有關網頁渲染 每個前端開發者都該知道的那點事

關於網頁渲染的文章很多,但是相關信息比較分散,且論述並不是很完整。如果要想對這個主題有個大致的瞭解,我們還得學習很多知識。因此,Web 開發者 Alexander Skutin 決定寫一篇文章。他相信,這篇文章不僅能幫助初學者,也能對那些想要刷新知識結構的高級前端開發者有所裨益。

譯文如下

網頁渲染必須在很早的階段進行,可以早到頁面佈局剛剛定型。因為樣式和腳本都會對網頁渲染產生關鍵性的影響。所以專業開發者必須瞭解一些技巧,從而避免在實踐的過程中遇到性能問題。

這篇文章不會研究瀏覽器內部的詳細機制,而是提出一些通用的規則。畢竟,不同瀏覽器引擎的工作機制各不相同,這無疑會讓開發者對瀏覽器特性的研究變得更加復雜。

瀏覽器是如何完成網頁渲染?

首先,我們回顧一下網頁渲染時,瀏覽器的動作:

  1. 根據來自服務器端的 HTML 代碼形成文檔對象模型(DOM)
  2. 加載並解析樣式,形成 CSS 對象模型。
  3. 在文檔對象模型和 CSS 對象模型之上,創建一棵由一組待生成渲染的對象組成的渲染樹(在 Webkit 中這些對象被稱為渲染器或渲染對象,而在 Gecko 中稱之為frame。)渲染樹反映瞭文檔對象模型的結構,但是不包含諸如 <head> 標簽或含有display:none屬性的不可見元素。在渲染樹中,每一段文本字符串都表現為獨立的渲染器。每一個渲染對象都包含與之對應的 DOM 對象,或者文本塊,還加上計算過的樣式。換言之,渲染樹是一個文檔對象模型的直觀展示。
  4. 對渲染樹上的每個元素,計算它的坐標,稱之為佈局。瀏覽器采用一種流方法,佈局一個元素隻需通過一次,但是表格元素需要通過多次。
  5. 最後,渲染樹上的元素最終展示在瀏覽器裡,這一過程稱為painting。

當用戶與網頁交互,或者腳本程序改動修改網頁時,前文提到的一些操作將會重復執行,因為網頁的內在結構已經發生瞭改變。

重繪

當改變那些不會影響元素在網頁中的位置的元素樣式時,譬如 background-color (背景色), border-color (邊框色), visibility (可見性),瀏覽器隻會用新的樣式將元素重繪一次(這就是重繪,或者說重新構造樣式)。

重排

當改變影響到文本內容或結構,或者元素位置時,重排或者說重新佈局就會發生。這些改變通常由以下事件觸發:

  • DOM 操作(元素添加,刪除,修改,或者元素順序的改變);
  • 內容變化,包括表單域內的文本改變;
  • CSS 屬性的計算或改變;
  • 添加或刪除樣式表;
  • 更改類的屬性;
  • 瀏覽器窗口的操作(縮放,滾動);
  • 偽類激活(:懸停)。

瀏覽器如何優化渲染?

瀏覽器盡可能將重繪/重構 限制在被改變元素的區域內。比如,對於位置固定或絕對的元素,其大小改變隻影響元素本身及其子元素,然而,靜態定位元素的大小改變會觸發後續所有元素的重流。

另一種優化技巧是,在運行幾段 JavaScript 代碼時,瀏覽器會緩存這些改變,在代碼運行完畢後再將這些改變經一次通過加以應用。舉個例子,下面這段代碼隻會觸發一個重構和重繪:

  • var $body = $(‘body’);
  • $body.css(‘padding’, ‘1px’); // reflow, repaint
  • $body.css(‘color’, ‘red’); // repaint
  • $body.css(‘margin’, ‘2px’); // reflow, repaint
  • // only 1 reflow and repaint will actually happen

然而,如前所述,改變元素的屬性會觸發強制性的重排。如果我們在上面的代碼塊中加入一行代碼,用來訪問元素的屬性,就會發生這種現象。

  • var $body = $(‘body’);
  • $body.css(‘padding’, ‘1px’);
  • $body.css(‘padding’); // reading a property, a forced reflow
  • $body.css(‘color’, ‘red’);
  • $body.css(‘margin’, ‘2px’);

其結果就是,重排發生瞭兩次。因此,你應該把訪問元素屬性的操作都組織在一起,從而優化網頁性能。(你可以在JSBin查到更為詳細的例子)

有時,你必須觸發一個強制性重排。比如,我們必須將同樣的屬性(比如左邊距)兩次賦值給同一個元素。起初,它應該設置為 100px,且不帶動效。接著,它必須通過過渡 (transition) 動效改變為 50px。

首先,我們創建一個帶過渡效果的 CSS 類:

  • .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;
  • }

然後繼續執行:

  • // our element that has a “has-transition” class by default
  • var $targetElem = $(‘#targetElemId’);
  • // remove the transition class
  • $targetElem.removeClass(‘has-transition’);
  • // change the property expecting the transition to be off, as the class is not there
  • // anymore
  • $targetElem.css(‘margin-left’, 100);
  • // put the transition class back
  • $targetElem.addClass(‘has-transition’);
  • // change the property
  • $targetElem.css(‘margin-left’, 50);

然而,這個執行無法奏效。所有改變都被緩存,隻在代碼塊末尾加以執行。我們需要的是強制性的重排,我們可以通過以下更改加以實現:

  • // remove the transition class
  • $(this).removeClass(‘has-transition’);
  • // change the property
  • $(this).css(‘margin-left’, 100);
  • // trigger a forced reflow, so that changes in a class/property get applied immediately
  • $(this)[0].offsetHeight; // an example, other properties would work, too
  • // put the transition class back
  • $(this).addClass(‘has-transition’);
  • // change the property
  • $(this).css(‘margin-left’, 50);

現在代碼如預期那樣執行瞭。

有關性能優化的實際建議

總結現有的資料,我提出以下建議:

  • 創建有效的 HTML 和 CSS 文件,不要忘記指明文檔的編碼方式。樣式應該包含在<head>標簽內,腳本代碼則應該加在 <body> 標簽末端。
  • 盡量簡化和優化 CSS 選擇器(這種優化方式幾乎被使用 CSS 預處理器的開發者統一忽視瞭)將嵌套程度保持在最低水平。以下是 CSS 選擇器的性能排名(從最快者開始)
  1. 識別器:#id
  2. 類:.class
  3. 標簽:div
  4. 相鄰兄弟選擇器:a + i
  5. 父類選擇器:ul> li
  6. 通用選擇器:*
  7. 屬性選擇:input[type=”text”]
  8. 偽類和偽元素:a:hover

你應該記住,瀏覽器在處理選擇器時依照從右到左的原則,因此最右端的選擇器應該是最快的:#id 或則 .class:

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

1、在你的腳本代碼中,盡可能減少 DOM 操作。緩存所有東西,包括元素屬性以及對象(如果它們被重用的話)。當進行復雜的操作時,使用孤立元素會更好,之後可以將其加到 DOM 中(所謂孤立元素是與 DOM 脫離,僅保存在內存中的元素)。

2、如果你使用 jQuery 來選擇元素,請遵從 jQuery 選擇器最佳實踐方案。

3、為瞭改變元素的樣式,修改類的屬性是奏效的方法之一。執行這一改變時,處在 DOM 渲染樹的位置越深越好(這還有助於將邏輯與表象脫離)。

4、盡量隻給位置絕對或者固定的元素添加動畫效果。

5、在使用滾動時禁用復雜的懸停動效(比如,在<body>中添加一個額外的不懸停類)。

延伸閱讀:

  • Web前端性能優化教程01:減少Http請求
  • Web前端性能優化教程02:使用內容分發網絡
  • Web前端性能優化教程03:添加Expires頭
  • Web前端性能優化教程04:壓縮組件
  • Web前端性能優化教程05:網站樣式和腳本
  • Web前端性能優化教程06:減少DNS查找、避免重定向
  • Web前端性能優化教程07:精簡JS 移除重復腳本
  • Web前端性能優化教程08:配置ETag
  • Web前端性能優化教程09:圖像和Cookie優化
  • 從四分鐘到兩秒:我的客戶端性能優化實踐