## 三、對于性能的影響
重排和重繪會不斷觸發,這是不可避免的。但是,它們非常耗費資源,是導致網頁性能低下的根本原因。
提高網頁性能,就是要降低"重排"和"重繪"的頻率和成本,盡量少觸發重新渲染。
前面提到,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元素