今天我要將關(guān)注點(diǎn)放到網(wǎng)頁(yè)渲染以及其重要性上。雖然已經(jīng)有很多文章提到過這個(gè)主題了，但大部分信息都是零碎的片段。為了思考這件事情，我需要研究很多信息的來(lái)源。這也就是為什么我覺得我應(yīng)該寫這篇文章的原因。我相信這篇文章對(duì)新手會(huì)很有用，并且對(duì)想刷新和鞏固他們已經(jīng)了解的東西的高手也同樣適用。

渲染應(yīng)該從最開始當(dāng)頁(yè)面布局被定義時(shí)就進(jìn)行優(yōu)化，樣式和腳本在頁(yè)面渲染中扮演著非常重要的角色。專業(yè)人員知道一些技巧以避免一些性能問題。

這篇文章不會(huì)深入研究瀏覽器的技術(shù)細(xì)節(jié)，而是提供一些通用的原則。不同瀏覽器引擎工作原理不同，這就使特定瀏覽器的學(xué)習(xí)更加復(fù)雜。

瀏覽器是怎樣渲染一個(gè)頁(yè)面的？

我們從瀏覽器渲染頁(yè)面的大概過程開始說(shuō)起：

1. 由從服務(wù)器接收到的 HTML 形成 DOM（文檔對(duì)象模型）。
2. 樣式被加載和解析，形成 CSSOM（CSS 對(duì)象模型）。
3. 緊接著 DOM 和 CSSOM 創(chuàng)建了一個(gè)渲染樹，這個(gè)渲染樹是一些被渲染對(duì)象的集合（ Webkit 分別叫它們”renderer”和”render object”，而在Gecko 引擎中叫”frame”）。除了不可見的元素（比如 head 標(biāo)簽和一些有 display:none 屬性的元素），渲染樹映射了 DOM 的結(jié)構(gòu)。在渲染樹中，每一個(gè)文本字符串都被當(dāng)做一個(gè)獨(dú)立的 renderer。每個(gè)渲染對(duì)象都包含了與之對(duì)應(yīng)的計(jì)算過樣式的DOM 對(duì)象（或者一個(gè)文本塊）。換句話說(shuō)，渲染樹描述了 DOM 的直觀的表現(xiàn)形式。
4. 對(duì)每個(gè)渲染元素來(lái)說(shuō)，它的坐標(biāo)是經(jīng)過計(jì)算的，這被叫做“布局(layout)”。瀏覽器使用一種只需要一次處理的“流方法”來(lái)布局所有元素（tables需要多次處理）。
5. 最后，將布局顯示在瀏覽器窗口中，這個(gè)過程叫做“繪制(painting)”。

重繪

當(dāng)在頁(yè)面上修改了一些不需要改變定位的樣式的時(shí)候（比如background-color,border-color,visibility)，瀏覽器只會(huì)將新的樣式重新繪制給元素（這就叫一次“重繪”或者“重新定義樣式”）。

重排

當(dāng)頁(yè)面上的改變影響了文檔內(nèi)容、結(jié)構(gòu)或者元素定位時(shí)，就會(huì)發(fā)生重排（或稱“重新布局”）。重排通常由以下改變觸發(fā)：

• DOM 操作（如元素增、刪、改或者改變?cè)仨樞颍?/li>
• 內(nèi)容的改變，包括 Form 表單中文字的變化。
• 計(jì)算或改變 CSS 屬性。
• 增加或刪除一個(gè)樣式表。
• 改變”class”屬性。
• 瀏覽器窗口的操作（改變大小、滾動(dòng)窗口）。
• 激活偽類（如:hover狀態(tài)）。

瀏覽器如何優(yōu)化渲染？

瀏覽器盡最大努力限制重排的過程僅覆蓋已更改的元素的區(qū)域。舉個(gè)例子，一個(gè) position 為 absolue 或 fixed 的元素的大小變化只影響它自身和子孫元素，而對(duì)一個(gè) position 為 static 的元素做同樣的操作就會(huì)引起所有它后面元素的重排。

另一個(gè)優(yōu)化就是當(dāng)運(yùn)行一段Jjavascript 代碼的時(shí)候，瀏覽器會(huì)將一些修改緩存起來(lái)，然后當(dāng)代碼執(zhí)行的時(shí)候，一次性的將這些修改執(zhí)行。舉例來(lái)說(shuō)，這段代碼會(huì)觸發(fā)一次重繪和一次重排：

 
 

  
  
var $body = $('body');  
  
  
$body.css('padding', '1px'); // 重排, 重繪  
  
  
$body.css('color', 'red'); // 重繪  
  
  
$body.css('margin', '2px'); // 重排, 重繪  
  
  
// 實(shí)際上只有一次重排和重繪被執(zhí)行。 
 
 

如上面所說(shuō)，訪問一個(gè)元素的屬性會(huì)進(jìn)行一次強(qiáng)制重排。如果我們給上面的代碼加上一行讀取元素屬性的代碼，這個(gè)情況就會(huì)出現(xiàn)：

   
 

    
  
var $body = $('body');  
    
  
$body.css('padding', '1px');  
    
  
$body.css('padding'); // 這里讀取了一次元素的屬性，一次強(qiáng)制重排就會(huì)發(fā)生。  
    
  
$body.css('color', 'red');  
    
  
$body.css('margin', '2px'); 
   
 

上面這段代碼的結(jié)果就是，進(jìn)行了
兩次重排。因此，為了提高性能，你應(yīng)該講讀取元素屬性的代碼組織在一起（
細(xì)節(jié)的例子可以看JSBin上的代碼）。

有一種情況是必須觸發(fā)一次強(qiáng)制重排的。例如：給元素改變同一個(gè)屬性兩次（比如margin-left），一開始設(shè)置100px，沒有動(dòng)畫，然后通過動(dòng)畫的形式將值改為50px。具體可以看例子，當(dāng)然，我在這里會(huì)講更多的細(xì)節(jié)。

我們從一個(gè)有transition的CSS class開始：

 
 

  
  
.has-transition {  
  
  
   -webkit-transition: margin-left 1s ease-out;  
  
  
      -moz-transition: margin-left 1s ease-out;  
  
  
        -o-transition: margin-left 1s ease-out;  
  
  
           transition: margin-left 1s ease-out;  
  
  
} 
 
 

然后進(jìn)行實(shí)現(xiàn)：

 
 

  
  
//我們的元素默認(rèn)有"has-transition"屬性  
  
  
var $targetElem = $('#targetElemId');  
  
  
   
  
  
//刪除包含transition的class  
  
  
$targetElem.removeClass('has-transition');  
  
  
   
  
  
// 當(dāng)包含transition的class已經(jīng)沒了的時(shí)候，改變?cè)貙傩? 
  
  
$targetElem.css('margin-left', 100);  
  
  
   
  
  
// 再將包含transition的class添加回來(lái)  
  
  
$targetElem.addClass('has-transition');  
  
  
   
  
  
// 改變?cè)貙傩? 
  
  
$targetElem.css('margin-left', 50); 
 
 

上面的實(shí)現(xiàn)沒有按照期望的運(yùn)行。所有的修改都被瀏覽器緩存了，只在上面這段代碼的最后才會(huì)執(zhí)行。我們需要的是一次強(qiáng)制重排，我們可以通過進(jìn)行以下修改來(lái)實(shí)現(xiàn)：

   
 

    
  
//刪除包含transition的class  
    
  
$(this).removeClass('has-transition');  
    
  
   
    
  
// 改變?cè)貙傩? 
    
  
$(this).css('margin-left', 100);  
    
  
   
    
  
//觸發(fā)一次強(qiáng)制重排，從而使變化了的class或?qū)傩阅軌蛄⒓磮?zhí)行。  
    
  
$(this)[0].offsetHeight; // offsetHeight僅僅是個(gè)例子，其他的屬性也可以奏效。  
    
  
   
    
  
// 再將包含transition的class添加回來(lái)  
    
  
$(this).addClass('has-transition');  
    
  
   
    
  
// 改變?cè)貙傩? 
    
  
$(this).css('margin-left', 50); 
   
 

現(xiàn)在這段代碼如我們所期望的運(yùn)行了。

實(shí)際的優(yōu)化建議

匯總了一些有用的信息，我建議以下幾點(diǎn)：

• 創(chuàng)建合法的 HTML 和 CSS ，別忘了制定文件編碼，Style 應(yīng)該寫在 head 標(biāo)簽中，script 標(biāo)簽應(yīng)該加載 body 標(biāo)簽結(jié)束的位置。
• 試著簡(jiǎn)化和優(yōu)化 CSS 選擇器（這個(gè)優(yōu)化點(diǎn)被大多數(shù)使用 CSS 預(yù)處理器的開發(fā)者忽略了）。將嵌套層數(shù)控制在最小。以下是 CSS 選擇器的性能排行（從最快的開始）：

1. ID選擇器：#id
2. class選擇器： .class
3. 標(biāo)簽: div
4. 相鄰的兄弟元素：a + i
5. 父元素選擇器： ul > li
6. 通配符選擇器： *
7. 偽類和偽元素： a:hover ，你應(yīng)該記住瀏覽器處理選擇器是從右向左的，這也就是為什么最右面的選擇器會(huì)更快——#id或.class。

  
  

   
   
div * {...} // bad  
   
   
.list li {...} // bad  
   
   
.list-item {...} // good  
   
   
#list .list-item {...} // good 
  
  

8. 在你的腳本中，盡可能的減少 DOM 的操作。把所有東西都緩存起來(lái)，包括屬性和對(duì)象（如果它可被重復(fù)使用）。進(jìn)行復(fù)雜的操作的時(shí)候，最好操作一個(gè)“離線”的元素（“離線”元素的意思是與 DOM 對(duì)象分開、僅存在內(nèi)存中的元素），然后將這個(gè)元素插入到 DOM 中。
9. 如果你使用 jQuery，遵循jQuery 選擇器最佳實(shí)踐
10. 要改變?cè)氐臉邮?，修改“class”屬性是最高效的方式之一。你要改變 DOM 樹的層次越深，這一條就越高效（這也有助于將表現(xiàn)和邏輯分開）。
11. 盡可能的只對(duì) position 為 absolute 或 fix 的元素做動(dòng)畫。
12. 當(dāng)滾動(dòng)時(shí)禁用一些復(fù)雜的 :hover 動(dòng)畫是一個(gè)很好的主意（例如，給 body 標(biāo)簽加一個(gè) no-hover 的 class）關(guān)于這個(gè)主題的文章。

想了解更多的細(xì)節(jié)，可以看一下這些文章：

1. How browsers work
2. Rendering: repaint, reflow/relayout, restyle

希望這篇文章能夠?qū)δ阌兴鶐椭?/p>

原文鏈接： frontendbabel   翻譯： 伯樂在線 - Moejser

譯文鏈接： http://blog.jobbole.com/72692/

當(dāng)前題目：為什么每個(gè)前端開發(fā)者都要理解網(wǎng)頁(yè)渲染？
URL地址：http://uogjgqi.cn/article/cdchdes.html