前端性能优化之减少重排，对比重排与重绘

在前端开发的过程中，性能优化是一个最常见的问题，重绘与重排也是提到优化时不可忽视的一块。

那么什么是重绘与重排呢，在解释重绘与重排之前，我们首先需要先了解清楚浏览器的渲染过程， 下面先上一张比较常见的渲染过程图：

 

根据上图我们可以看到和总结出浏览器的渲染大致分为以下五个步骤：

1. DOM Tree： 浏览器根据HTML解析出DOM Tree

2. Style Rules：根据CSS解析出Style Rules

3. Render Tree： 将DOM Tree与Style Tree二者关联生成Render Tree

4. Layout： 根据Render Tree计算每个节点的信息,即节点在屏幕上的显示位置

5. Painting ：根据计算好的信息绘制整个页面

很多人在开发的过程中总是听说，在浏览器的渲染过程中，DOM 的操作是最消耗性能的，为什么呢？因为大部分的JavaScript DOM操作会导致一系列的重绘。

那么什么是重绘与重排呢：简单来说，我的理解是，

重绘（repaint）：当元素的外观属性发生变化，即元素的颜色，背景色发生改变但没有影响到dom树的位置改变的时候，会触发重绘；

重排（reflow）：当页面内的元素尺寸发生了变化，导致部分或者全部DOM树，渲染树需要重新更新，会触发重排， 重排又称为回流；

一般情况下，页面的重排必定会导致重绘，但重绘不一定会导致重排。

触发重排的条件，具体来说有以下几点：

       1.页面渲染初始化；

       2.添加与删除DOM元素；

　　3.元素位置的改变，或者使用动画；

　　4.元素的尺寸发生改变；

　　5.浏览器窗口尺寸的变化（resize事件发生时）；

       6.文本内容被改变或者图片被不同尺寸的图片替换；

　　7.读取某些元素属性：（offsetLeft/Top/Height/Width,　clientTop/Left/Width/Height,　scrollTop/Left/Width/Height,　width/height,　getComputedStyle(),　currentStyle(IE)　)

一般在我们的开发过程中，当DOM元素的操作不可避免时， 我们可以通过以下方式来尽量减少重绘与重排，重点是减少重排，主要的思路是， 将多次的DOM 操作合并为一次，或者使需要被操作的元素脱离文档流以减少浏览器重绘与重排的次数，下面的这些操作都是通过减少重排重绘来实现性能优化的：

      1.元素的多次样式修改合并成一次修改；

      2.如需进行对DOM节点进行多次操作，先将其脱离文本流之后再进行多次操作；

      3.table布局的渲染与普通DOM节点的操作相比，性能消耗更大，如果可以，尽量减少table布局的使用；

      4.缓存常用的布局信息；

      5.兼容IE时减少使用hover；

      6.动画使用window.requestAnimationFrame()，window.requestAnimationFrame() 这两个方法调节重新渲染；

      7.使用虚拟dom脚本库，例如react或者snabbdom等。

 

 

参考链接：

网页性能管理，重绘与重排：https://www.jianshu.com/p/f69b476a7200 

dom操作为什么耗性能： https://segmentfault.com/a/1190000014070240