关于回流(reflows)与重绘(repaints)的总结

 

页面加载简要流程

1. 解析HTML构建DOM(DOM树)，并行请求css/img/js
2. css文件下载完成开始构建CSSOM(CSS对象模型)
3. CSSOM构建完成后连接DOM树形成render tree(渲染树)，用来描述所有可见的DOM内容，并将CSSOM样式信息附加到节点上(注意  visibility:hidden隐藏的元素还是会包含到render tree中的，因为visibility:hidden 会影响布局(layout)，会占有空间)
4. 布局(Layout):在render tree(渲染树)上运行布局来计算每个可见节点的位置
5. 显示(Painting)：通过GPU将页面画到屏幕上

但是我们需要明白的是，以上5个步骤不是顺序完成的，如果DOM或CSSOM被修改以上过程需要重新执行，这样才能计算出那些节点要如何渲染在屏幕上

 

回流

回流是指当render tree中的部分或者全部因为尺寸、边距、布局等发生改变而需要重建的过程叫做回流

引起回流的操作总结：

1. 页面初始化渲染
2. DOM树结构变化，如添加删除DOM元素
3. 元素的几何属性发生变化，如padding/margin/border/width/heigh/top/bottom/left/right/position/float/clear
4. 访问某些属性和方法时，这些属性包括offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、 clientTop、clientLeft、clientWidth、clientHeight、getComputedStyle() (currentStyle in IE)
5. 改变节点内部文字结构，这些属性包括text-align、overflow-y、font-weight、overflow、font-family、line-height、vertival-align、white-space、font-size
6. 浏览器窗口发生变化

 

重绘

重绘是指render tree中元素的一部分属性发生改变，只影响了外观但不会引起布局变化而重新需要渲染的过程叫做重绘，例如修改background/visibility/outline

 

回流与重绘之间的关系

在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程成为重绘，所以回流一定会引起重绘，但重绘不一定引起回流

 

如何减少回流与重绘

频繁的回流与重绘会造成较大的性能消耗，虽然大部分浏览器都会优化这些操作(浏览器会维护一个队列，它会把所有引起回流和重绘的操作都放置到这个队列中来，等队列中的数量达到阈值或者到一定的时间间隔，浏览器就会把这个队列进行一个批处理，这样就能让多次的回流与重绘变成一次)，但是在编码过程中如果访问了一些属性或者方法，为了得到比较精确的值，浏览器会强制刷新维护回流与重绘的队列（这些属性和方法包括offsetTop/Left/Width/Height，scrollTop/Left/Width/Height，clientTop/Left/Width/Height，width，height，getComputedStyle，currentStyle），回流与重绘是不可避免的，但是是可以减少的，所以我们在平时的编码过程中应该尽量的减少回流与重绘的发生，那么到底怎样做才能减少回流与重绘的发生呢？下面我们就来具体列举几种方式~

1. 不要一个一个的改变或者设置元素的样式属性，尽可能的使用class,如果需要动态设置可以使用cssText来改变
2. 将元素的操作进行“离线处理”，处理完成后一次更新，这里的离线处理是指让所操作的元素不在render tree中，例如：a. 使用DocumentFragment（文档片段），它是一个没有父级文件的最小文档，因为它不是真实DOM树的一部分，所以它的变化不会触发DOM树的重新渲染，当把所有要新增的节点放置到DocumentFragment中，并添加(append)或插入(inserted)到文档中的时候，页面插入的并不是片段本身，而是片段中的所有子节点，这些子节点会被一次性插入到文档中，所以只会引发一次重渲染   b. 使用display:none,先将节点隐藏，然后进行所有操作，操作完成后再显示，因为元素display:none不在ender tree中，所以不会引起回流和重绘，这样只会有两次回流
3. 动画效果应用到position为absolute或者fie或者fixed的节点上，因为它已经脱离了文档流，不会影响其他节点的布局，所以只会引发重绘
4. 避免使用table布局

 

以上只是自己的归纳总结，如有不足还请指正~

如果文章帮助到了你就点个赞鼓励鼓励吧~