页面重绘重排

Posted 2020-08-30 沐子馨

1、重绘(Repaint)
重绘是一个元素外观的改变所触发的浏览器行为，例如改变outline、背景色等属性。浏览器会根据元素的新属性重新绘制，
使元素呈现新的外观。重绘不会带来重新布局，所以并不一定伴随重排。

2、重排(Reflow)
渲染对象在创建完成并添加到渲染树时，并不包含位置和大小信息。计算这些值的过程称为布局或重排

"重绘"不一定需要"重排"，比如改变某个网页元素的颜色，就只会触发"重绘"，不会触发"重排"，因为布局没有改变。
但是，"重排"必然导致"重绘"，比如改变一个网页元素的位置，就会同时触发"重排"和"重绘"，因为布局改变了。

3、常见的触发重排的操作
Reflow 的成本比 Repaint 的成本高得多的多。DOM Tree 里的每个结点都会有 reflow 方法，
一个结点的 reflow 很有可能导致子结点，甚至父点以及同级结点的 reflow。在一些高性能的电脑上也许还没什么，
但是如果 reflow 发生在手机上，那么这个过程是非常痛苦和耗电的。

所以，下面这些动作有很大可能会是成本比较高的。
当你增加、删除、修改 DOM 结点时，会导致 Reflow , Repaint。
当你移动 DOM 的位置
当你修改 CSS 样式的时候。
当你 Resize 窗口的时候（移动端没有这个问题）
当你修改网页的默认字体时。
获取某些属性时
注：display:none 会触发 reflow，而 visibility:hidden 只会触发 repaint，
因为没有发现位置变化。

4、注意
当你请求向浏览器请求一些 style信息的时候，就会让浏览器flush队列，比如：

（1）offsetTop, offsetLeft, offsetWidth, offsetHeight
（2）scrollTop/Left/Width/Height
（3）clientTop/Left/Width/Height
（4）width,height

当你请求上面的一些属性的时候，浏览器为了给你最精确的值，需要flush队列，
因为队列中可能会有影响到这些值的操作。即使你获取元素的布局和样式信息跟最近的布局信息差不多，
浏览器都会强行刷新渲染队列。

5、优化
（1）将多次改变样式属性的操作合并成一次操作
（2）将需要多次重排的元素，position属性设为absolute或fixed，
这样此元素就脱离了文档流，它的变化不会影响到其他元素。例如有动画效果的元素就最好设置为绝对定位。
（3）由于display属性为none的元素不在渲染树中，对隐藏的元素操作不会引发其他元素的重排。
如果要对一个元素进行复杂的操作时，可以先隐藏它，操作完成后再显示。这样只在隐藏和显示时触发2次重排。