重绘和回流

Question

回流： 当元素的尺寸，布局改变时，会重新计算布局，在进行绘制
重绘： 元素外观变化时，不影响布局时，例如背景颜色 改变时，会重新渲染

回流必重绘，重绘不一定回流，回流的场景

1. 删除或新增可见元素
2. 元素位置变化
3. 元素尺寸变化
4. 内容变化，字体或者图片
5. resize

减少回流

1. 使用 transform 替代 top 等定位
2. 使用 visibility 替换 display: none
3. dom 位置属性值不要在循环里重复获取
4. 将频繁改动的元素单独合成一个图层，避免该节点回流影响其他元素

单独合成图层

• translateZ、translate3d
• will-change
• video、iframe
• 动画实现 opacity 变化
• position: fixed