## 三、对于性能的影响
重排和重绘会不断触发，这是不可避免的。但是，它们非常耗费资源，是导致网页性能低下的根本原因。
提高网页性能，就是要降低"重排"和"重绘"的频率和成本，尽量少触发重新渲染。
前面提到，DOM变动和样式变动，都会触发重新渲染。但是，浏览器已经很智能了，会尽量把所有的变动集中在一起，排成一个队列，然后一次性执行，尽量避免多次重新渲染。
~~~
div.style.color = 'blue';
div.style.marginTop = '30px';
~~~
上面代码中，div元素有两个样式变动，但是浏览器只会触发一次重排和重绘。
如果写得不好，就会触发两次重排和重绘。
~~~
div.style.color = 'blue';
var margin = parseInt(div.style.marginTop);
div.style.marginTop = (margin + 10) + 'px';
~~~
上面代码对div元素设置背景色以后，第二行要求浏览器给出该元素的位置，所以浏览器不得不立即重排。
一般来说，样式的写操作之后，如果有下面这些属性的读操作，都会引发浏览器立即重新渲染。
> * offsetTop/offsetLeft/offsetWidth/offsetHeight
> * scrollTop/scrollLeft/scrollWidth/scrollHeight
> * clientTop/clientLeft/clientWidth/clientHeight
> * getComputedStyle()
所以，从性能角度考虑，尽量不要把读操作和写操作，放在一个语句里面。
~~~
// bad
div.style.left = div.offsetLeft + 10 + "px";
div.style.top = div.offsetTop + 10 + "px";
// good
var left = div.offsetLeft;
var top = div.offsetTop;
div.style.left = left + 10 + "px";
div.style.top = top + 10 + "px";
~~~
一般的规则是：
> * 样式表越简单，重排和重绘就越快。
> * 重排和重绘的DOM元素层级越高，成本就越高。
> * table元素的重排和重绘成本，要高于div元素
