javascript性能优化-repaint和reflow

1、什么是repaint？什么是reflow？

先来张浏览器引擎的渲染流程：

简单介绍一下：

（1）解析HTML以构建DOM树：

（2）渲染树构建：

（3）渲染树布局：

（4）渲染树绘制：

很清晰，reflow（渲染）出现在第三步，repaint（重绘）出现在第四步。

对于DOM结构中的各个元素都有自己的盒子（模型），这些都需要浏览器根据各种样式（浏览器的、开发人员定义的等）来计算并根据计算结果将元素放到它该出现的位置，这个过程称之为reflow；当各种盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定下来后，浏览器于是便把这些元素都按照各自的特性绘制了一遍，于是页面的内容出现了，这个过程称之为repaint。

可见这两个东东对浏览器渲染页面是很重要的啊，都是会影响性能的，因此我们需要了解一些常见的会引起repaint和reflow的一些操作，并且应该尽量减少以提高渲染速度。

2、repaint和reflow如何发生？

DOM Tree里的每个节点都会有reflow方法，一个节点的reflow可能导致子节点甚至父节点同级节点的reflow，十分耗性能。

（1）DOM元素的添加、修改（内容）、删除时，repaint＋reflow；

（2）DOM元素变更字体颜色，repaint；

（3）DOM元素应用新样式或者修改任何影响元素外观的属性

（4）resize浏览器的窗口、滚动页面；

（5）读取元素的某些属性

注：display:none会触发reflow，而visibility:hidden只触发repaint，因为没有位置的变化。

3、如何优化？

首先，很明显，reflow的成本远高于repaint，reflow不可避免，因此我们应该把reflow的对性能的影响降到最小。下面时几条建议：

（1）减少直接对DOM的操作；

（2）尽可能减少修改style属性，通过class来修改样式；

（3）缓存layout属性；

（4）元素position设置为absolute或fixed，从而使元素脱离标准流，在需要reflow时只要reflow自身及下级元素即可；

（5）少用table，因为table一旦被触发就会导致table中所有元素reflow。可以设置table-layout的属性为auto或fixed，使table一行行渲染，限制reflow的影响范围；

（6）避免使用expression，因为它每调用一次就会重新计算一遍，包括加载页面。

上面参考高人博客及总结工作经验，对js性能优化做了简单归纳，后续继续！