★ 重绘和回流 ( Repaint & Reflow )

概念区别

• 重绘：Repaint 当 render tree 中的一些元素需要更新属性，这些属性只影响元素的外观、风格而不会影响布局，称之为重绘
• 回流：Reflow 当 render tree 中的元素需要更新属性，这些属性影响元素的布局需要重新计算，称之为回流
• 回流必定引发重绘，重绘不一定引发回流

浏览器优化

• 浏览器通过队列机制批量更新布局：浏览器会维护1个队列，把所有会引起回流、重绘的操作放入这个队列，等队列中的操作到了一定的数量或者到了一定的时间间隔，浏览器就会进行一个批处理。这样就会让多次的回流、重绘变成一次回流重绘。
• 当我们获取布局信息的时候 offsetTop、scrollTop、clientWidth、width 等属性，队列中可能有会影响这些属性或方法返回值的操作，即使没有，浏览器也会强制清空队列，触发回流与重绘来确保返回正确的值。所以我们要尽量避免使用这些属性。

常见引起重绘与回流的属性方法

重绘

image.png

回流

• 添加或者删除可见的DOM元素；
• 元素尺寸改变——边距、填充、边框、宽度和高度
• 内容变化，比如用户在input框中输入文字
• 浏览器窗口尺寸改变——resize事件发生时
• 获取或 （offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、 clientTop、clientLeft、clientWidth、clientHeight、getComputedStyle() (currentStyle in IE) 属性
• 设置 style 属性的值

减少重绘与回流

CSS

• 使用 transform 替代 top，因为改变 transforms 只需要合成计算，而改变偏移量会触发布局计算和重绘，因此会有损性能。
• 使用 visibility 替换 display: none ，因为前者只会引起重绘，后者会引发回流，改变了布局
• 尽量避免使用 table 布局，对 Render Tree 的计算通常只需要遍历一次就可以完成，但 table 及其内部元素除外，他们可能需要多次计算，通常要花3倍于同等元素的时间，这也是为什么要避免使用 table 布局的原因之一。
• 避免使用CSS表达式，可能会引发回流。
• 将动画效果应用到 position 属性为 absolute 或 fixed 的元素上，避免影响其他元素的布局，这样只是一个重绘，而不是回流，同时，控制动画速度可以选择 requestAnimationFrame
• 将频繁重绘或者回流的节点设置为图层，图层能够阻止该节点的渲染行为影响别的节点，例如 will-change、video、iframe 等标签，浏览器会自动将该节点变为图层。
• CSS3 硬件加速（GPU加速），使用 css3 硬件加速，可以让 transform、opacity、filters 这些动画不会引起回流重绘 。

JS

• 避免频繁操作样式，最好一次性重写 style 属性，或者将样式列表定义为 class 并一次性更改 class 属性。
• 避免频繁操作DOM，创建一个documentFragment，在它上面应用所有DOM操作，最后再把它添加到文档中。
• 避免频繁读取会引发回流/重绘的属性，如果确实需要多次使用，就用一个变量缓存起来。
• 对具有复杂动画的元素使用绝对定位，使它脱离文档流，否则会引起父元素及后续元素频繁回流。