什么是回流(重排 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表达式