浏览器的重排和重绘

浏览器的渲染过程

解析HTML源码

构建一棵和HTML对应的DOM树，

再根据DOM元素的几何属性构建一棵渲染树。
根据渲染树把页面绘制到浏览器上。
（由于浏览器的流布局，对渲染树的计算通常只需要遍历一次就可以完成。

但table及其内部元素除外，它可能需要多次计算才能确定好其在渲染树中节

点的属性，通常要花3倍于同等元素的时间。这也是为什么我们要避免使用

table做布局的一个原因。）

重排和重绘：

重绘不一定伴随重排，重排也不一定会引起浏览器的重绘（visibility:hidden

）
触发情况：
1、DOM元素的几何属性变化
2、DOM书的结构变化（浏览器引擎布局的过程，类似于树的前序遍历，是

一个从上到下从左到右的过程。通常在这个过程中，当前元素不会再影响其

前面已经遍历过的元素。所以，如果在body最前面插入一个元素，会导致整

个文档的重新渲染，而在其后插入一个元素，则不会影响到前面的元素。）
3、用户改变窗口


浏览器的优化以及优化策略：
1、将对DOM的操作放在队列中，批量操作，操作结束后进行一次绘制。
对于部分属性，浏览器为了获得正确的值，所以每次获取都会触发浏览器的

重排。这些属性包括：offsetTop、offsetLeft、 offsetWidth、offsetHeight、

scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、

clientWidth、clientHeight、getComputedStyle() (currentStyle in IE)。
2、合并改变样式的操作，使用className的方式。
3、设置元素脱离文档流（absolute、fixed），这样该元素的变化就不会影响

到其他元素。
4、对DOM的复杂操作，使用clone节点的方式，将对节点的操作在内存中进

行，结束后替换原节点，或设置display为none，操作完成后再进行显示，以

及使用文档碎片。

5、对于会触发浏览器重排的属性，缓存到变量中，不要频繁读取。

参考资料：

高性能js.。