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

時間 2019-12-05

原文原文鏈接

其實，有關網頁渲染的文章不少，可是相關信息比較分散，且論述並非很完整。若是要想對這個主題有個大體的瞭解，咱們還得學習不少知識。所以，Web 開發者 Alexander Skutin 決定寫一篇文章。他相信，這篇文章不只能幫助初學者，也能對那些想要刷新知識結構的高級前端開發者有所裨益。php

原文地址css

譯文以下html

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

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

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

首先，咱們回顧一下網頁渲染時，瀏覽器的動做：瀏覽器

根據來自服務器端的 HTML 代碼造成文檔對象模型（DOM）
加載並解析樣式，造成 CSS 對象模型。
在文檔對象模型和 CSS 對象模型之上，建立一棵由一組待生成渲染的對象組成的渲染樹（在 Webkit 中這些對象被稱爲渲染器或渲染對象，而在 Gecko 中稱之爲「frame」。）渲染樹反映了文檔對象模型的結構，可是不包含諸如 <head> 標籤或含有display:none屬性的不可見元素。在渲染樹中，每一段文本字符串都表現爲獨立的渲染器。每個渲染對象都包含與之對應的 DOM 對象，或者文本塊，還加上計算過的樣式。換言之，渲染樹是一個文檔對象模型的直觀展現。
對渲染樹上的每一個元素，計算它的座標，稱之爲佈局。瀏覽器採用一種流方法，佈局一個元素只需經過一次，可是表格元素須要經過屢次。
最後，渲染樹上的元素最終展現在瀏覽器裏，這一過程稱爲「painting」。

當用戶與網頁交互，或者腳本程序改動修改網頁時，前文提到的一些操做將會重複執行，由於網頁的內在結構已經發生了改變。緩存

重繪

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

重排

當改變影響到文本內容或結構，或者元素位置時，重排或者說從新佈局就會發生。這些改變一般由如下事件觸發：服務器

DOM 操做（元素添加，刪除，修改，或者元素順序的改變）;
內容變化，包括表單域內的文本改變;
CSS 屬性的計算或改變;
添加或刪除樣式表;
更改「類」的屬性;
瀏覽器窗口的操做（縮放，滾動）;
僞類激活（：懸停）。

瀏覽器如何優化渲染？

瀏覽器儘量將重繪/重構限制在被改變元素的區域內。好比，對於位置固定或絕對的元素，其大小改變隻影響元素自己及其子元素，然而，靜態定位元素的大小改變會觸發後續全部元素的重流。babel

另外一種優化技巧是，在運行幾段 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。你如今能夠在 JSbin 上學習這個例子，不過我會在這兒更詳細地介紹它。

首先，咱們建立一個帶過渡效果的 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

在你的腳本代碼中，儘量減小 DOM 操做。緩存全部東西，包括元素屬性以及對象（若是它們被重用的話）。當進行復雜的操做時，使用「孤立」元素會更好，以後能夠將其加到 DOM 中（所謂「孤立」元素是與 DOM 脫離，僅保存在內存中的元素）。
若是你使用 jQuery 來選擇元素，請聽從 jQuery 選擇器最佳實踐方案。
爲了改變元素的樣式，修改「類」的屬性是奏效的方法之一。執行這一改變時，處在 DOM 渲染樹的位置越深越好（這還有助於將邏輯與表象脫離）。
儘可能只給位置絕對或者固定的元素添加動畫效果。
在使用滾動時禁用複雜的懸停動效（好比，在<body>中添加一個額外的不懸停類）。讀者能夠閱讀關於這個問題的一篇文章。

想了解更多的細節問題，你們也能夠看看這兩篇文章：

本文系 OneAPM 工程師編譯整理。想閱讀更多技術文章，請訪問 OneAPM 官方技術博客。