什么是回流(重排 reflow)？什么是重绘(repaint)？如何减少回流、重绘？

什么是回流(重排 reflow)？

回流（重排 reflow）：对DOM树进行渲染，只要修改DOM或修改元素的形状大小，就会触发reflow，reflow的时候，浏览器会使已渲染好受到影响的部分失效，并重新构造这部分，完成reflow后，浏览器会重新绘制受影响的部分到屏幕中

 

（继昨日每日一题：display:none和visibility:hidden

　　当display显示及隐藏元素时，显示时占据空间，隐藏时不占空间，隐藏前后DOM结构发生变化，所以需要重新渲染

　　当visibility显示及隐藏元素时，不论是显示还是隐藏，都占据空间，因此隐藏前后DOM结构未发生变化，所以不需要重新渲染。）

 

什么是重绘(repaint)？

重绘(repaint)：当我们对DOM的修改导致的样式变化，但未影响几何属性时，浏览器不需要重新计算元素的几何属性，直接可以为该元素绘制新的样式，跳过了回流环节，这个过程就叫重绘。

 

 

结论：回流必定会发生重绘，重绘不一定发生回流

 

在页面交互中存在频繁的回流与重绘，这个过程，会很大程度的影响性能，因为回流所需成本比重绘高的多，so，能用重绘就不要用回流了。

 

如何减少回流、重绘？

减少回流、重绘就是减少对DOM的操作

1.直接改变className，如果动态改变样式，则使用cssText（减少设置多项内联样式）

2.让要操作的元素进行“离线处理”，处理完后一起更新

　　当使用DocumentFragment进行缓存操作，引发一次回流和重绘

　　使用display:none 技术，只引发两次回流和重绘

　　使用cloneNode(true or false)和replaceChild技术，引发一次回流和重绘

3.不要经常访问会引起浏览器flush队列的属性，如果你确实要访问，利用缓存

4.让元素脱离动画流，减少render 树的规模

5.牺牲平滑度换取速度

6.避免使用table布局

7.IE中避免使用javascript表达式