共计 724 个字符，预计需要花费 2 分钟才能阅读完成。
浏览器解析渲染页面的过程是：
- 解析 HTML，生成
DOM树 - 解析 CSS，生成
CSS 规则树（CSS Rule Tree） - 将
DOM Tree和CSS Rule Tree相结合，生成 渲染树 （Render Tree） - 从根节点开始，计算每一个元素的大小、位置，给出每个节点所应该出现的屏幕精确坐标，从而得到基于渲染树的 布局渲染树 （
Layout of the render tree）。 - 遍历渲染树，将每个节点用 UI 渲染引擎来绘制，从而将整棵树绘制到页面上，这个步骤叫 绘制渲染树 （
Painting the render tree）
关于这个步骤我们的优化方案有：
- CSS 选择器解析问题 。编码过程中用尽可能少的选择器来表示一个元素，因为 CSS 是从右往左加载的。
- CSS 加载问题 。尽可能在
head位置加载 CSS，减少 HTML 加载完毕需要等待 CSS 加载的问题。 - JS 加载问题 。JS 的加载会阻塞 HTML 和 CSS 的加载，所以
script标签通常放body后面，同时可以利用script标签的async和defer属性，同步加载 JS 或者等 HTML 和 CSS 加载渲染完后再加载 JS。 - DOM 渲染问题 。DOM 渲染的时候可能会触发回流和重绘，应该尽量避免触发。
如何避免触发回流：
- 【CSS】使用
visibility替换display - 【CSS】避免
table布局。对于Render Tree的计算通常只需要遍历一次就可以完成，但是table布局需要计算多次，通常要花 3 倍于等同元素的时间，因此要避免。 - 【JS】避免频繁做
width、height等会触发回流的操作。 - 【JS】操作 DOM 的时候，如果是添加 DOM 节点，可以将所有节点都在 JS 中操作完毕，再进行渲染（一次性）
正文完
