1，html元素布局分类有哪些

• 内联元素(display:inline)：无法设定宽高，元素大小由内容大小决定，不会自动换行，从左到右排列，内部不能嵌套块级元素
• 块级元素(display:block)：会自动换行，宽度默认父元素的宽度，高度默认内容高度
• 内联块级元素(display:inline-block)：可以设置宽高，排列方式从左向右

2，html中b标签和strong标签的区别

• b：为了加粗而加粗
• strong：为了标明重点加粗 （盲人使用阅读设备strong会重读，b不会）

3，减少dom数量的办法

• 使用伪元素替代dom元素解决方案，比如清除浮动，样式实现等。
• 不滥用dom标签，结构合理。
• 按需加载，减少不必要的渲染。

4，一次性给你大量dom如何优化

• 缓存dom对象，比如循环插入大量dom对象，将父dom在循环外获取，循环内插入。
• 使用document.createDocumentFragement创建文档碎片节点或者创建一个不在dom树上的节点，将大量dom一次性更新进入该节点，然后批量替换或插入dom中。
• 将连续的appendChild替换成使用innerHtml，避免多次对dom造成影响（ps:appendChild向父元素最后一个子节点插入元素，innerHtml直接替换父元素下所有元素，appendChild添加的元素如果是页面上已有的元素，执行完原元素会被销毁。）

5,如何禁用a标签默认事件且禁用后如何实现跳转

• 禁用a标签默认事件

  • a标签的href属性设置为href="javascript:;"||href="javascript:void(0);",通过执行空js代码，阻止跳转
  • 在a标签点击事件上使用e.preventDefault()与window.event.returnValue=false，后者兼容ie，以此阻止dom元素默认行为

• 实现跳转

  • 点击事件 使用location.href = url 进行跳转。

6，什么是SEO

搜索引擎后台有个非常庞大的数据库，数据库存储海量关键词，每个关键词对应多个网址。这些数据由蜘蛛每天在互联网中收集获取，从一个链接爬行到另一个链接，对当前网页进行提炼关键词，之后将关键词与对应网站保存在数据库中，而当我们使用搜索引擎时，搜索引擎肯定会将与搜索词与数据库中存在的关键词对比，匹配程度越高的关键词对应的网站越是优先展示在前面。
而seo（seach engine optimization）就是在此基础上，对当前网站进行优化，改进网站对应关键词在搜索引擎中的排名，获取更多的曝光程度。

7，前端如何进行seo优化

前端进行seo优化无非是期望通过对网页的处理，使得爬虫对当前网站提取出的关键词更加贴切，提高网站关键词在搜索引擎中的排名。

• 合理控制网站首页链接数量，链接足够多蜘蛛才能爬取内页，提高网站收录数量，但也不能太多，过多无意义链接不仅影响用户体验也会降低网站首页权重
• 控制网站结构层次在三层以内，让蜘蛛跳转三次就能到到达网站任何一个内页，这意味着层次低越容易被蜘蛛收录，如果层次太多蜘蛛可能就不愿意继爬取
• 导航尽量使用文字的方式，如果是图片也必须加入alt与title属性，告诉搜索引擎导航的定位
• 利用布局，将重要的的html放在前面，便于蜘蛛的优先爬取
• 控制页面大小，提高页面加载速度，如果页面加载速度很慢，蜘蛛就会离开
• 页面的<meta keywords>keywords><meta description>尽量强调重点关键词，不要重复过分堆砌
• 正文标题使用h1标签，h1标签自带权重，蜘蛛认为它最重要
• 使用strong标签em标签而不是b标签，因为strong与em目的就是标明重点而加粗，在搜索引擎能够得到高度重视
• 重要内容不要使用js输出，蜘蛛不会读取js输出，可以采用服务端渲染的办法将中药内容直接呈现在当前html中。
• 蜘蛛只抓取get请求页面，不抓去post请求页面，合理控制页面请求方式
• 外部链接需要加上el = nofollow属性，告诉蜘蛛不要去爬取，因为爬取外链可能蜘蛛就不回来了。
• 不要使用iframe框架，蜘蛛一般不会读取其内容

8，什么是meta标签及其常用属性

meta标签位于html的head区域，它描述了当前网页的各种信息，比如页面的说明，关键字，修改日企等。对于用户它是不可见的，它服务于浏览器，搜索引擎及其他网络服务。

• charset：定义文档字符编码
• content：定义name属性或者http-equiv属性相关元信息
• name：将content属性关联到一个名称
• http-equiv：将content属性关联到http头部

// 当前网页字符编码utf-8
<meta charset="utf-8"/>
// 当前网页关键字，seo优化会用到
<meta name="keywords" content="便于seo优化"/>
// 描述当前网页干什么的
<meta name="description" content="当前网页说明"/>
// 声明网页字符编码
<meta name="content-Type" content="text/html"/>

9，script的async与defer区别

浏览器在解析html时遇到script标签会停止解析，先去下载执行js文件，再继续解析，所以如果该标签至于html前面会影响html解析给用户带来不好体验，而async与defer就是处理这个事情。

• defer：defer加载完成时会等到dom解析完毕执行 （当dom加载完会执行DOMContentLoaded事件，defer标签未加载或未执行完，将推迟该事件执行，直到defer标签加载执行完才会触发该事件 ），这就相当于将script标签放在html文档底部，且defer按原本script标签出现顺序执行
• async：async加载完毕立即执行，所以js执行顺序与标签出现顺训很有可能不一样（js创建的脚本默认都是以async加载的）
• ps：
  • 二者都是使得script标签异步加载，加载时不阻塞dom解析
  • 且对内联js脚本不起作用（<script>var a = 1</script>）
  • 脚本内不可是用document.write
  • 二者都会阻塞onload事件（onload意味着所有依赖资源加载完成执行）
  • defer阻塞DOMContentLoaded事件，async不阻塞（DOMContentLoaded：当dom资源下载解析完执行该事件，此时css图片等资源可能未加载完成）
  • defer与async同时出现，async优先级更高，除非浏览器不兼容async，则以defer为准。

11，preload，prefetch，dns-prefetch

• preload：顾名思义预加载资源<link rel='preload' as='script' src = 'main.js' onload="_load()"/>,提升了你所需要资源加载优先级，提前加载你所需要的资源，该方式不会阻塞DOMContentLoaded与onload事件，但是该方式不管你是否是用都会预先加载资源，使用该资源需要手动指定，一般我们使用preload方案为先头部预加载资源，在window.onload事件中去使用，在预加载字体时需要设置crossorigin，使用匿名跨域模式，否则字体文件会被加载两次（当你期望不影响当前页面性能去加载某个脚本资源时preload+window.onload是最优方案）

• prefetch：顾名思义预先获取资源， <link rel="prefetch" href="main.jpg">使用该方式可以利用浏览器空闲时间去获取将来可能用的上的资源缓存起来，当我们用到该资源可以直接从缓存获取，不需要发送请求。他将下载优先级降到最低。（可以这么说，prefetch专注于未来的资源，preload专注于当前资源）

• dns-prefetch：顾名思义预先进行dns解析，dns解析需要耗时，所以我们当前页面如果可能跳转到别的网站可以使用dns-prefetch<link ref="dns-prefetch" href="xxx.com."/>，这将在浏览器空闲时解析该网站的dns，当我们前往该网站时就不需要在进行dns解析。

• preconnect：顾名思义预先链接，dns-prefetch是提前dns解析，而preconnect则是提前完成与某个网站的连接，包括dns解析，tls协商，tcp握手，与dns-prefetch进行优化区别是一般我们知道用户可能一定会使用的某个链接可以使用preconnect，其他不确定的可以dns-prefetch，否则全部进行preconnect，不管用不用得到反而得不偿失。

12，什么是Html语义化及语义化的优点

h5出现后，新增了很多语义化标签，比如header，footer，nav，article等，能够清楚的向浏览器或者开发者解释当前内容的意义。

• 便于开发者阅读代码，清晰代码结构
• 利于Seo蜘蛛爬取数据时对数据的理解