深入瀏覽器重排與重繪

dom樹表示頁面結構，渲染樹表示dom節點如何顯示。dom樹中的每乙個需要顯示的節點在渲染樹種至少存在乙個對應的節點（隱藏的dom元素disply值為none 在渲染樹中沒有對應的節點）。渲染樹中的節點被稱為「幀」或「盒」,符合css模型的定義，理解頁面元素為乙個具有填充，邊距，邊框和位置的盒子。一旦dom和渲染樹構建完成，瀏覽器就開始顯示（繪製）頁面元素。

當dom的變化影響了元素的幾何屬性（寬或高），瀏覽器需要重新計算元素的幾何屬性，同樣其他元素的幾何屬性和位置也會因此受到影響。瀏覽器會使渲染樹中受到影響的部分失效，並重新構造渲染樹。這個過程稱為重排。完成重排後，瀏覽器會重新繪製受影響的部分到螢幕，該過程稱為重繪。由於瀏覽器的流布局，對渲染樹的計算通常只需要遍歷一次就可以完成。但table及其內部元素除外，它可能需要多次計算才能確定好其在渲染樹中節點的屬性，通常要花3倍於同等元素的時間。這也是為什麼我們要避免使用table做布局的乙個原因。

並不是所有的dom變化都會影響幾何屬性，比如改變乙個元素的背景色並不會影響元素的寬和高，這種情況下只會發生重繪。

不管頁面發生了重繪還是重排，它們都會影響效能

頁面布局和元素幾何屬性的改變就會導致重排下列情況會發生重排

不同的條件下發生重排的範圍及程度會不同

某些情況甚至會重排整個頁面，比如滑動滾動條

例如：假如我要用js修改某個div的樣式

div.style.left = '10px';
div.style.top = '10px';
div.style.width = '10px';
div.style.height = '10px';

我們修改了元素的left、top、width、height屬性 ,滿足我們發生重排的條件 ,理論上會發生4次重排 ,但是實際上只會發生1次重排,因為我們現代的瀏覽器都有渲染佇列的機制 ,當我改變了元素的乙個樣式會導致瀏覽器發生重排或重繪時 ,它會進入乙個渲染佇列,然後瀏覽器繼續往下看，如果下面還有樣式修改 ,那麼同樣入隊 ,直到下面沒有樣式修改 ,瀏覽器會按照渲染佇列批量執行來優化重排過程，一併修改樣式 ,這樣就把本該4次的重排優化為1次

but,當我們寫如下**時：

div.style.left = '10px';
console.log(div.offsetleft);
div.style.top = '10px';
console.log(div.offsettop);
div.style.width = '20px';
console.log(div.offsetwidth);
div.style.height = '20px';
console.log(div.offsetheight);

還是1次重排嗎？

obviously not!此時發生了4次重排！

上文不是說瀏覽器有渲染佇列優化機制嗎？為什麼會有4次？

這和offsetleft/top/width/height有關

offsettop、offsetleft、offsetwidth、offsetheight clienttop、clientleft、clientwidth、clientheight scrolltop、scrollleft、scrollwidth、scrollheight

getcomputedstyle()（ie中currentstyle）

這些會強制重新整理佇列要求樣式修改任務立刻執行

因為瀏覽器並不確定在下面的**中是否還有修改同樣的樣式，為了獲取到當前正確的的即時值不得不立刻執行渲染佇列觸發重排！！！

我們就可以對上面的**進行優化

div.style.left = '10px';
div.style.top = '10px';
div.style.width = '20px';
div.style.height = '20px';
console.log(div.offsetleft);
console.log(div.offsettop);
console.log(div.offsetwidth);
console.log(div.offsetheight);

這樣就僅僅發生1次重排了！

還是我們最初修改樣式的**

div.style.left = '10px';
div.style.top = '10px';
div.style.width = '20px';
div.style.height = '20px';

雖然現代瀏覽器有渲染佇列的優化機制，但是古董瀏覽器效率仍然底下，觸發了4次重排，即便這樣，我們仍然可以做出優化，我們需要csstext屬性合併所有樣式改變

div.style.csstext = 'left:10px;top:10px;width:20px;height:20px;';

這樣只需要修改dom一次一併處理，僅僅觸發了1次重排，而且只用了一行**

除了csstext以外，我們還可以通過修改class類名來進行樣式修改

div.classname = 'new-class';

這種辦法可維護性好，還可以幫助我們免除顯示性**，但是會消耗一點點的效能

div.style.left = div.offsetleft + 1 + 'px';
div.style.top = div.offsettop + 1 + 'px';

這種讀操作完就執行寫操作造成了2次重排

快取可以進行優化

var curleft = div.offsetleft;
var curtop = div.offsettop;
div.style.left = curleft + 1 + 'px';
div.style.top = curtop + 1 + 'px';

相當於是分離讀寫操作，優化為1次重排

現在我們想要向ul中迴圈新增大量li （如果ul還不存在，最好的辦法是先迴圈新增li到ul，然後再把ul新增到文件，1次重排）

var ul = document.getelementbyid('demo');
for(var i = 0; i < 1e5; i++)

我可以做出下面的優化

var ul = document.getelementbyid('demo');
ul.style.display = 'none'; 
for(var i = 0; i < 1e5; i++)
ul.style.display = 'block';
var ul = document.getelementbyid('demo');
var frg = document.createdocumentfragment(); 
for(var i = 0; i < 1e5; i++)
var ul = document.getelementbyid('demo');
var clone = ul.clonenode(true); 
for(var i = 0; i < 1e5; i++)
ul.parentnode.replacechild(clone,ul);

上面的方法減少重繪和重排的原理很簡單

而改變元素就分別使用了隱藏元素、文件碎片和轉殖元素

深入瀏覽器重排與重繪

瀏覽器重排與重繪

瀏覽器重繪與重排

瀏覽器重繪和重排

深入瀏覽器重排與重繪

瀏覽器重排與重繪

瀏覽器重繪與重排

瀏覽器重繪和重排

相關推薦