瀏覽器渲染機制與效能優化

詳讀了很多文章，最終對比總結出來的瀏覽器渲染機制，並提出相應的優化原則

瀏覽器將從伺服器中獲取的html文件逐步解析，構建dom樹

在構建dom樹時，如果碰到js和css，會載入執行並阻塞html的解析，即html解析器會將控制權交給js或css解析器，當這個元素被解析完之後，將控制權重交回給html解析器，直到整個dom樹構建完成

css樣式被載入和解析後，會構成重疊樣式表cssom

在dom和cssom的基礎上，渲染樹(rendering tree)將會被建立，代表一些列將被渲染的物件。渲染樹對映除了不可見元素外的所有dom結構。每段文字字串都將被劃分在不同的渲染物件中，每個渲染物件都包含了它相應的dom物件以及計算後的樣式。即，渲染樹是dom的直觀表示

渲染樹的每個元素包含的內容都是計算過的，它被稱之為布局layout(瀏覽器使用的一種流式處理的方法，只需要一次pass繪製操作就可以布局所有的元素，..tables需要多次pass繪製，pass表示畫素處理和定點處理)

最後布局完成，渲染樹將轉化為螢幕上的實際內容，即繪製painting

當頁面中的元素樣式不改變元素在文件流的位置時，瀏覽器只會將新樣式賦予元素並進行重繪操作

當改變影響文件內容或者結構，或者元素位置時，回流操作就被觸發，一般有下面幾種情況

瀏覽器本身會盡可能的減少重繪或回流的次數，只更改必要的元素。例如position設定為absolute/fixed的元素只會影響其本身和其子元素，而static的元素變化則會影響其之後的所有的頁面元素

另外一項技術則是，在js**執行時，瀏覽器會快取所有的變化，然後只通過一次pass繪製操作來應用這些更改。例如下面這些**就只觸發了一次重繪和回流

var $body = $('body');
$body.css('padding', '1px'); // 觸發重繪與回流

dy.c

ss(『

colo

r′,『

red′

);//

觸發重繪

body.css(『margin』, 『2px』); // 觸發重繪與回流

// 最終只有一次重繪和回流被觸發

然而，根據我們提到過的，獲取某個元素的屬性會觸發強制回流，比如在上面的**做一些修改

var $body = $('body');
$body.css('padding','1px');//觸發重繪與回流
$body.css('color'); // 觸發強制回流
$body.css('margin', '2px'); // 觸發重繪與回流
// 再進行一次回流，最終會有兩次回流被觸發

因此，我們在修改元素時，應該盡量避免或者合併讀取元素的屬性，來減少回流觸發，優化效能

當然我們有的時候不得不觸發強制回流，比如使乙個元素的margin-left先為100px，在通過動畫變回50px

.has-transition 
// 此處的屬性改變沒有動畫效果
$targetelem.css('margin-left', 100);
// 再加上動畫效果的屬性名
$targetelem.addclass('has-transition');
// 這次改變有動畫效果
$targetelem.css('margin-left', 50);

事實上這段**並不像我們注釋中寫的那樣進行，由於每條語句會被快取，所以我們只能看到最終的結果而不能看到動畫，所以我們就需要加一條強制回流語句使得動畫效果得以順利進行

// 此處的屬性改變沒有動畫效果
$targetelem.css('margin-left', 100);
//任意的可能觸發回流的語句都可以
$targetelem.css('margin-left')
// 再加上動畫效果的屬性名
$targetelem.addclass('has-transition');
// 這次改變有動畫效果
$targetelem.css('margin-left', 50);

如果想更深入底層進行了解可以查閱：

1. how browsers work

2. 【譯】瀏覽器渲染：repaint,reflow/relayout,restyle

瀏覽器渲染機制與效能優化

瀏覽器底層渲染機制和效能優化

瀏覽器渲染機制

瀏覽器渲染機制

相關推薦