浏览器的渲染机制

浏览器的渲染一般分为以下几个步骤

1.处理HTML并构建DOM树

2.处理CSS构建CSSOM树

3.将DOM与CSSOM合并成一个渲染树

4.根据渲染树布局，计算每个节点的位置

5.调用GPU绘制，合成图层，显示在屏幕上

在构建CSSOM树时，会阻塞渲染，直到CSSOM树构建完成。并且构建CSSOM树十分消耗性能，所以应尽量保证层级扁平，减少过度层叠，越是具体的CSS选择器，执行越慢

当HTML解析到<script>时，会暂停构建DOM，完成后才会从暂停的地方开始构建DOM。所以优化首屏加载速度的方法之一是，不在首屏加载JS文件。并且CSS也会影响JS的执行，只有解析完样式表，才会执行JS，所以可以认为在这种情况下，CSS也会暂停构建DOM

图层

普通文档流是一个图层，特定的属性可以生成新的图层。不同的图层渲染互不影响，所以某些需要频繁渲染的可以生成一个新图层，以提高性能。

以下可以生成新图层

• translate3d translateZ
• will-change
• <viedo> <iframe>
• 通过动画实现的opacity变化
• position:fix

重绘（Repaint）和回流(Reflow)

重绘：节点需要更改外观⽽不会影响布局的，如改变 color

回流：布局或者⼏何属性(width/height)需要改变

回流必定会发⽣重绘，重绘不⼀定会引发回流。回流所需的成本⽐重绘高的多，改变深层次的节点很可能导致⽗节点的⼀系列回流。

以下几个动作可能会导致性能问题

• 改变window大小
• 改变字体
• 添加或删除样式
• 文字改变
• 定位或者浮动
• 盒模型

重绘和回流与Event loop有关

1. 当 Event loop 执⾏完 Microtasks 后，会判断 document 是否需要更新。因为浏览器是 60Hz 的刷新率，每 16ms 才会更新⼀次
2. 然后判断是否有 resize 或者 scroll ，有的话会去触发事件，所以 resize 和 scroll 事件也是⾄少 16ms 才会触发⼀次，并且⾃带节流功能
3. 判断是否触发了 media quer
4. 更新动画并且发送事件
5. 判断是否有全屏操作事件
6. 执⾏ requestAnimationFrame 回调
7. 执⾏ IntersectionObserver 回调，该⽅法⽤于判断元素是否可⻅，可以⽤于懒加载上，但是兼容性不好
8. 更新界⾯
9. 以上就是⼀帧中可能会做的事情。如果在⼀帧中有空闲时间，就会去执⾏ requestIdleCallback 回调。

减少重绘和回流的方法

• 使用translate替代top
• 使用visibility替换display:none
• 把DOM离线后修改。比如先dispaly:none DOM（一次回流），再修改一百次，再显示
• 不要把DOM的属性值放在一个循环里当作循环的变量
• 不要使用table布局，可能很小的改动会造成整个table重新布局
• 适当选择动画的速度，动画速度越快，回流次数越多。也可以选择使用requestAnimationFrame
• CSS选择器从右往左匹配查找，避免DOM深度过深
• 将频繁运行的动画变为图层，图层能够阻止该节点回流影响别的元素。