1. Doctype 作用？标准模式与兼容模式有什么区别？

位于第一行，html 标签之前，告诉浏览器的解析器用什么标准解析文档。如果不存在或者格式错误，会导致文档已兼容模式呈现。
标准模式的排版和 js 运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松向后兼容的方式显示，模拟老式浏览器的行为以防止站点无法工作。

2. 浏览器内核

理解

主要分两部分：渲染引擎和 js 引擎。
渲染引擎：负责取得网页内容、加入CSS 等。浏览器不同，渲染的效果也不相同。
js 引擎：解析和执行 js 代码来实现网页的动态效果。
最开始渲染引擎和 js 引擎并没有很明确区分，后来 js 引擎越来越独立，内核就倾向于指渲染引擎。

常见浏览器内核

Trident 内核：IE,360,搜狗浏览器等。[又称MSHTML]
Gecko内核：Firefox。
Presto内核：Opera7及以上。 [Opera内核原为：Presto，现为：Blink;]
Webkit内核：Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）]

3. HTML 标签语义化

用正确的标签做正确的事情。
结构更清晰，提高代码可读性。
易修改、易维护。
搜索引擎友好，利于 SEO。

4. link 和 @import 区别

（1）从属关系区别。 link 是 HTML 提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性、引入网站图标等。@import 是 CSS 提供的语法规则，只有导入样式表的作用。

（2）加载顺序区别。加载页面时，link 标签引入的 CSS 被同时加载；@import 引入的 CSS 将在页面加载完毕后被加载。

（3）兼容性区别。link 标签作为 HTML 元素，不存在兼容性问题。@import 是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别。

（4）DOM 可控性区别。可以通过 JS 操作 DOM ，插入 link 标签来改变样式；由于 DOM 方法是基于文档的，无法使用 @import 的方式插入样式。

5. 渲染页面时常见不良现象

FOUC：主要指的是样式闪烁的问题，由于浏览器渲染机制（比如firefox），在 CSS 加载之前，先呈现了 HTML，就会导致展示出无样式内容，然后样式突然呈现的现象。会出现这个问题的原因主要是 css 加载时间过长，或者 css 被放在了文档底部。
白屏：有些浏览器渲染机制（比如chrome）要先构建 DOM 树和 CSSOM 树，构建完成后再进行渲染，如果 CSS 部分放在 HTML尾部，由于 CSS 未加载完成，浏览器迟迟未渲染，从而导致白屏；也可能是把 js 文件放在头部，脚本的加载会阻塞后面文档内容的解析，从而页面迟迟未渲染出来，出现白屏问题。

6. 重绘和回流

重绘: 当渲染树中的一些元素需要更新属性，而这些属性只是影响元素的外观、风格，而不会影响布局的操作，比如 background-color，我们将这样的操作称为重绘。
回流：当渲染树中的一部分（或全部）因为元素的规模尺寸、布局、隐藏等改变而需要重新构建的操作，会影响到布局的操作，这样的操作我们称为回流。
常见引起回流属性和方法：任何会改变元素几何信息（元素的位置和尺寸大小）的操作，都会触发回流。

（1）添加或者删除可见的 DOM 元素；

（2）元素尺寸改变——边距、填充、边框、宽度和高度

（3）内容变化，比如用户在 input 框中输入文字

（4）浏览器窗口尺寸改变——resize事件发生时

（5）计算 offsetWidth 和 offsetHeight 属性

（6）设置 style 属性的值

（7）当你修改网页的默认字体时。
回流必定会发生重绘，重绘不一定会引发回流。回流所需的成本比重绘高的多，改变父节点里的子节点很可能会导致父节点的一系列回流。
减少回流
- 使用 transform 替代 top。
- 不要把节点的属性值放在一个循环里当成循环里的变量。
- 不要使用 table 布局，可能很小的一个小改动会造成整个 table 的重新布局。
- 把 DOM 离线后修改。如：使用 documentFragment 对象在内存里操作 DOM。
- 不要一条一条地修改 DOM 的样式。与其这样，还不如预先定义好 css 的 class，然后修改 DOM 的 className。。

7. 前端需要注意的 SEO

合理的 title、description、keywords
- 搜索对着三项的权重逐个减小，title 值强调重点即可，重要关键词出现不要超过2次，而且要靠前，不同页面 title 要有所不同；
- description 把页面内容高度概括，长度合适，不可过分堆砌关键词，不同页面 description 有所不同；
- keywords 列举出重要关键词即可。
语义化的 HTML 代码，符合 W3C 规范：语义化代码让搜索引擎容易理解网页。
重要内容 HTML 代码放在最前：搜索引擎抓取 HTML 顺序是从上到下，有的搜索引擎对抓取长度有限制，保证重要内容肯定被抓取。
重要内容不要用 js 输出：爬虫不会执行 js 获取内容。
少用 iframe：搜索引擎不会抓取 iframe 中的内容。
非装饰性图片必须加 alt。

8. cookies，sessionStorage 和 localStorage

推荐看：神三元的博客

这三者都可以被用来在浏览器端存储数据，而且都是字符串类型的键值对。

区别在于前两者属于 HTML5 WebStorage，创建它们的目的便于客户端存储数据。

而 cookie 是网站为了标示用户身份而储存在用户本地终端上的数据（通常经过加密）。 cookie 数据始终在同源（协议、主机、端口相同）的 http 请求中携带（即使不需要），会在浏览器和服务器间来回传递。

	cooike	sessionStorage	localStorage
存储大小	≤ 4 k	可以达到 5 M 或更大	可以达到 5 M 或更大
有效时间	设置的过期时间之前一直有效，即使窗口或浏览器关闭。	数据在页面会话结束时会被清除。	存储持久数据，浏览器关闭后数据不丢失除非主动删除数据。
作用域	在所有同源窗口中都是共享的。	只在同源的同窗口（或标签页）中共享数据，也就是只在当前会话中共享。	在所有同源窗口中都是共享的。

9. 浏览器架构

用户界面
- 主进程
- 内核
  - 渲染引擎
  - JS 引擎
    - 执行栈
  - 事件触发线程
    - 消息队列
      - 微任务
      - 宏任务
  - 网络异步线程
  - 定时器线程

10. 前端性能优化

第一个方面是页面的内容方面

（1）通过文件合并、css 雪碧图、使用 base64 等方式来减少 HTTP 请求数，避免过多的请求造成等待的情况。

（2）通过 DNS 缓存等机制来减少 DNS 的查询次数。

（3）通过设置缓存策略，对常用不变的资源进行缓存。

（4）使用延迟加载的方式，来减少页面首屏加载时需要请求的资源。延迟加载的资源当用户需要访问时，再去请求加载。

（5）通过用户行为，对某些资源使用预加载的方式，来提高用户需要访问资源时的响应速度。

第二个方面是服务器方面

（1）使用 CDN 服务，来提高用户对于资源请求时的响应速度。

（2）服务器端启用 Gzip、Deflate 等方式对于传输的资源进行压缩，减小文件的体积。

（3）尽可能减小 cookie的大小，并且通过将静态资源分配到其他域名下，来避免对静态资源请求时携带不必要的 cookie。

第三个方面是 CSS 和 JavaScript 方面

（1）把样式表放在页面的 head 标签中，减少页面的首次渲染的时间。

（2）避免使用 @import 标签。

（3）尽量把 js 脚本放在页面底部或者使用 defer 或 async 属性，避免脚本的加载和执行阻塞页面的渲染。

（4）通过对 JavaScript 和 CSS 的文件进行压缩，来减小文件的体积。

HTML 重点总结