浏览器渲染原理
步骤
- 根据HTML构建HTML树（DOM）
- 根据CSS创建CSS树（CSSDOM）
- 将两棵树合成一颗渲染树（rendr tree）
- Layout布局（文档流、盒模型）
- Paint绘制（把边框颜色文字颜色阴影等画出来）
- Compose合成（根据层叠关系显示画面）
三棵树的结构
. JS / CSS > 样式 > 布局 > 绘制 > 合成
如果您修改元素的“layout”属性，也就是改变了元素的几何属性（例如宽度、高度、左侧或顶部位置等），那么浏览器将必须检查所有其他元素，然后“自动重排”页面。任何受影响的部分都需要重新绘制，而且最终绘制的元素需进行合成。
注意：第一种全走drv.remove()会触发当前消失，其他元素relayout
2. JS / CSS > 样式 > 绘制 > 合成
如果您修改“paint only”属性（例如背景图片、文字颜色或阴影等），即不会影响页面布局的属性，则浏览器会跳过布局，但仍将执行绘制。
注意：第二种跳过Layout改变背景颜色，直接repaint+composite
3. JS / CSS > 样式 > 合成
如何提高浏览器的性能
注意：第三种跳过Layout和paint，改变transform，只需composite.
如果您更改一个既不要布局也不要绘制的属性，则浏览器将跳到只执行合成。
- 坚持使用 transform 和 opacity 属性更改来实现动画。
- 使用
will-change或translateZ提升移动的元素。 - 避免过度使用提升规则；各层都需要内存和管理开销。
使用 transform 和 opacity 属性更改来实现动画
性能最佳的像素管道版本会避免布局和绘制，只需要合成更改：
素材取自
By Paul Lewis
