重排和重繪會(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元素
更多建議: