css 浏览器调试中不可见_浏览器渲染页面的过程简析

前言

关键渲染路径：当前用户操作有关的内容。例如，用户在浏览器打开一个页面，其中页面所显示的内容就是当前用户操作相关的内容

浏览器的渲染过程主要分为五个步骤：

* 浏览器将获取的 HTML 文档解析成 DOM 树；
* 处理 CSS 标记，构成层叠样式表模型（CSSOM）；
* 将 DOM 和 CSSOM 合并为渲染树（rendering tree）；
* 渲染树的每个元素的内容都是计算过的，称之为 布局layout；
* 将渲染树上的各个节点绘制到屏幕上，称之为 绘制painting；

---

一、构建 DOM 树

浏览器从服务器拿到 HTML 文档后，遍历所有的节点生成 DOM 树；

1. DOM 树的构建可能会被 CSS 和 JS 的加载而阻塞；
2. display: none 的元素也会在 DOM 树中；
3. 注释也会在 DOM 树中；
4. script 标签也会在 DOM 树中；

二、解析 CSS

浏览器会解析 CSS 文件并生成 CSS 规则树，每个 CSS 文件都会被解析成 StyleSheet 对象，每个对象都包括 CSS 规则，CSS规则对象包括对应的选择器和声明对象以及其他对象；

1. CSS 的解析可以与 DOM 的解析同步进行
2. CSS 的解析与 script 的执行互斥
3. 在 Webkit 内核中进行了 script 执行优化，只有在 JS 访问 CSS 时才会发生互斥 

三、构建渲染树

根据 DOM 树和 CSS 规则树，浏览器就可以构建渲染树了。浏览器首先遍历 DOM 树上的每一个可见节点，然后对每个可见节点找到匹配的 CSS 样式规则并应用；

1. 渲染树和 DOM 树不完全对对应；
2. display: none 的元素不在渲染树中；
3. visiblity: none 的元素在渲染树中；

四、渲染树布局

布局阶段浏览器会遍历渲染树的所有节点，由于每个节点都是一个render对象，都包含宽高、位置、背景等样式信息，所以浏览器就能根据这写信息来确定元素在页面中的所在位置，及其样式；

1. float 元素、absolute 元素、fixed 元素会发生位置偏移；
2. 脱离标准文档流就是脱离渲染树（render tree）；

五、渲染树的绘制

绘制阶段，浏览器遍历所有的渲染树节点，调用 paint() 方法，将其渲染在屏幕上。渲染树的绘制工作是由浏览器的UI后端组件完成的。

浏览器渲染过程可能出现的事情

一、阻塞渲染

浏览器会延迟 JavaScript 的执行和 DOM 的构建，

1. CSS 被默认为阻塞渲染的资源，所以在 CSSOM 构建完成之前不会处理任何已处理的内容；
2. JavaScript 可以读取和修改 DOM 属性，还可读取和修改 CSSOM 属性，所以 CSS 解析和 script 的执行互斥

因此，script标签的位置很重要我们在实际开发中应该尽量坚持以下两个原则：

1. 在引入顺序上，CSS 资源先于 JavaScript 资源；
2. JavaScript 尽量少去影响 DOM 的构建；

二、回流和重绘（ reflow 和 repaint ）

reflow（回流）：当浏览器发现某个部分发生了变化影响了布局，这个时候就需要倒回去重新渲染，这个过程就叫做 reflow；
repaint（重绘）：当改变某个元素的背景色、字体颜色、边框颜色等不影响布局的属性时，屏幕的一部分需要重画，但是元素的几何尺寸和位置都没有发现变化；

Tips：display:none 会触发 reflow；visibility: hidden 不会出发 reflow，只会触发 repaint；

可以通过一些操作来减少 reflow：

1. 用transform 来做形变和位移；
2. 通过绝对定位的方式来脱离当前层叠上下文，形成新的 render layout
3. 异步 reflow；

三、优化渲染效率建议

1. 合法地去书写 HTML 和 CSS ，且不要忘了文档编码类型；
2. 样式文档应该在 head 标签中，而脚本文档应该在 body 结束之前，防阻塞；
3. 优化 CSS 选择器，尽量少嵌套；
4. 减少 JavaScript 对 DOM 的操作；
5. 修改元素的样式时，修改 class 是性能最高的方法；
6. 尽量用 transform 来做形变和位移