三、對(duì)于性能的影響

三、對(duì)于性能的影響

重排和重繪會(huì)不斷觸發(fā)，這是不可避免的。但是，它們非常耗費(fèi)資源，是導(dǎo)致網(wǎng)頁性能低下的根本原因。

提高網(wǎng)頁性能，就是要降低"重排"和"重繪"的頻率和成本，盡量少觸發(fā)重新渲染。

前面提到，DOM變動(dòng)和樣式變動(dòng)，都會(huì)觸發(fā)重新渲染。但是，瀏覽器已經(jīng)很智能了，會(huì)盡量把所有的變動(dòng)集中在一起，排成一個(gè)隊(duì)列，然后一次性執(zhí)行，盡量避免多次重新渲染。

div.style.color = 'blue';
div.style.marginTop = '30px';

上面代碼中，div元素有兩個(gè)樣式變動(dòng)，但是瀏覽器只會(huì)觸發(fā)一次重排和重繪。

如果寫得不好，就會(huì)觸發(fā)兩次重排和重繪。

div.style.color = 'blue';
var margin = parseInt(div.style.marginTop);
div.style.marginTop = (margin + 10) + 'px';

上面代碼對(duì)div元素設(shè)置背景色以后，第二行要求瀏覽器給出該元素的位置，所以瀏覽器不得不立即重排。

一般來說，樣式的寫操作之后，如果有下面這些屬性的讀操作，都會(huì)引發(fā)瀏覽器立即重新渲染。

• offsetTop/offsetLeft/offsetWidth/offsetHeight
• scrollTop/scrollLeft/scrollWidth/scrollHeight
• clientTop/clientLeft/clientWidth/clientHeight
• getComputedStyle()

所以，從性能角度考慮，盡量不要把讀操作和寫操作，放在一個(gè)語句里面。

// 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";

一般的規(guī)則是：

• 樣式表越簡單，重排和重繪就越快。
• 重排和重繪的DOM元素層級(jí)越高，成本就越高。
• table元素的重排和重繪成本，要高于div元素