浏览器解析渲染页面优化手段

浏览器解析渲染页面的过程是：

1. 解析 HTML，生成 DOM 树
2. 解析 CSS，生成 CSS 规则树（CSS Rule Tree）
3. 将 DOM Tree 和 CSS Rule Tree 相结合，生成 渲染树（Render Tree）
4. 从根节点开始，计算每一个元素的大小、位置，给出每个节点所应该出现的屏幕精确坐标，从而得到基于渲染树的 布局渲染树（Layout of the render tree）。
5. 遍历渲染树，将每个节点用 UI 渲染引擎来绘制，从而将整棵树绘制到页面上，这个步骤叫 绘制渲染树（Painting the render tree）

关于这个步骤我们的优化方案有：

1. CSS 选择器解析问题。编码过程中用尽可能少的选择器来表示一个元素，因为 CSS 是从右往左加载的。
2. CSS 加载问题。尽可能在 head 位置加载 CSS，减少 HTML 加载完毕需要等待 CSS 加载的问题。
3. JS 加载问题。JS 的加载会阻塞 HTML 和 CSS 的加载，所以 script 标签通常放 body 后面，同时可以利用 script 标签的 async 和 defer 属性，同步加载 JS 或者等 HTML 和 CSS 加载渲染完后再加载 JS。
4. DOM 渲染问题。DOM 渲染的时候可能会触发回流和重绘，应该尽量避免触发。

如何避免触发回流：

1. 【CSS】使用 visibility 替换 display
2. 【CSS】避免 table 布局。对于 Render Tree 的计算通常只需要遍历一次就可以完成，但是 table 布局需要计算多次，通常要花 3 倍于等同元素的时间，因此要避免。
3. 【JS】避免频繁做 width、height 等会触发回流的操作。
4. 【JS】操作 DOM 的时候，如果是添加 DOM 节点，可以将所有节点都在 JS 中操作完毕，再进行渲染（一次性）