有關(guān)網(wǎng)頁渲染 每個前端開發(fā)者都該知道的那點事
2019-03-26 來源：segmentfault
關(guān)于網(wǎng)頁渲染的文章很多，但是相關(guān)信息比較分散，且論述并不是很完整。如果要想對這個主題有個大致的了解，我們還得學習很多知識。因此，Web 開發(fā)者 Alexander Skutin 決定寫一篇文章。他相信，這篇文章不僅能幫助初學者，也能對那些想要刷新知識結(jié)構(gòu)的高級前端開發(fā)者有所裨益。
譯文如下
網(wǎng)頁渲染必須在很早的階段進行，可以早到頁面布局剛剛定型。因為樣式和腳本都會對網(wǎng)頁渲染產(chǎn)生關(guān)鍵性的影響。所以專業(yè)開發(fā)者必須了解一些技巧，從而避免在實踐的過程中遇到性能問題。
這篇文章不會研究瀏覽器內(nèi)部的詳細機制，而是提出一些通用的規(guī)則。畢竟，不同瀏覽器引擎的工作機制各不相同，這無疑會讓開發(fā)者對瀏覽器特性的研究變得更加復雜。
瀏覽器是如何完成網(wǎng)頁渲染？
首先，我們回顧一下網(wǎng)頁渲染時，瀏覽器的動作：
- 根據(jù)來自服務器端的 HTML 代碼形成文檔對象模型（DOM）
- 加載并解析樣式，形成 CSS 對象模型。
- 在文檔對象模型和 CSS 對象模型之上，創(chuàng)建一棵由一組待生成渲染的對象組成的渲染樹（在 Webkit 中這些對象被稱為渲染器或渲染對象，而在 Gecko 中稱之為“frame”。）渲染樹反映了文檔對象模型的結(jié)構(gòu)，但是不包含諸如 <head> 標簽或含有display:none屬性的不可見元素。在渲染樹中，每一段文本字符串都表現(xiàn)為獨立的渲染器。每一個渲染對象都包含與之對應的 DOM 對象，或者文本塊，還加上計算過的樣式。換言之，渲染樹是一個文檔對象模型的直觀展示。
- 對渲染樹上的每個元素，計算它的坐標，稱之為布局。瀏覽器采用一種流方法，布局一個元素只需通過一次，但是表格元素需要通過多次。
- 最后，渲染樹上的元素最終展示在瀏覽器里，這一過程稱為“painting”。
當用戶與網(wǎng)頁交互，或者腳本程序改動修改網(wǎng)頁時，前文提到的一些操作將會重復執(zhí)行，因為網(wǎng)頁的內(nèi)在結(jié)構(gòu)已經(jīng)發(fā)生了改變。
重繪
當改變那些不會影響元素在網(wǎng)頁中的位置的元素樣式時，譬如 background-color (背景色)， border-color (邊框色)， visibility (可見性)，瀏覽器只會用新的樣式將元素重繪一次(這就是重繪，或者說重新構(gòu)造樣式)。
重排
當改變影響到文本內(nèi)容或結(jié)構(gòu)，或者元素位置時，重排或者說重新布局就會發(fā)生。這些改變通常由以下事件觸發(fā)：
- DOM 操作（元素添加，刪除，修改，或者元素順序的改變）;
- 內(nèi)容變化，包括表單域內(nèi)的文本改變;
- CSS 屬性的計算或改變;
- 添加或刪除樣式表;
- 更改“類”的屬性;
- 瀏覽器窗口的操作（縮放，滾動）;
- 偽類激活（：懸停）。
瀏覽器如何優(yōu)化渲染？
瀏覽器盡可能將重繪/重構(gòu) 限制在被改變元素的區(qū)域內(nèi)。比如，對于位置固定或絕對的元素，其大小改變只影響元素本身及其子元素，然而，靜態(tài)定位元素的大小改變會觸發(fā)后續(xù)所有元素的重流。
另一種優(yōu)化技巧是，在運行幾段 JavaScript 代碼時，瀏覽器會緩存這些改變，在代碼運行完畢后再將這些改變經(jīng)一次通過加以應用。舉個例子，下面這段代碼只會觸發(fā)一個重構(gòu)和重繪：
- 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
然而，如前所述，改變元素的屬性會觸發(fā)強制性的重排。如果我們在上面的代碼塊中加入一行代碼，用來訪問元素的屬性，就會發(fā)生這種現(xiàn)象。
- var $body = $('body');
- $body.css('padding', '1px');
- $body.css('padding'); // reading a property, a forced reflow
- $body.css('color', 'red');
- $body.css('margin', '2px');
其結(jié)果就是，重排發(fā)生了兩次。因此，你應該把訪問元素屬性的操作都組織在一起，從而優(yōu)化網(wǎng)頁性能。（你可以在JSBin查到更為詳細的例子）
有時，你必須觸發(fā)一個強制性重排。比如，我們必須將同樣的屬性(比如左邊距)兩次賦值給同一個元素。起初，它應該設置為 100px，且不帶動效。接著，它必須通過過渡 (transition) 動效改變?yōu)?50px。
首先，我們創(chuàng)建一個帶過渡效果的 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;
- }
然后繼續(xù)執(zhí)行：
- // 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);
然而，這個執(zhí)行無法奏效。所有改變都被緩存，只在代碼塊末尾加以執(zhí)行。我們需要的是強制性的重排，我們可以通過以下更改加以實現(xiàn)：
- // 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);
現(xiàn)在代碼如預期那樣執(zhí)行了。
有關(guān)性能優(yōu)化的實際建議
總結(jié)現(xiàn)有的資料，我提出以下建議：
- 創(chuàng)建有效的 HTML 和 CSS 文件，不要忘記指明文檔的編碼方式。樣式應該包含在<head>標簽內(nèi)，腳本代碼則應該加在 <body> 標簽末端。
- 盡量簡化和優(yōu)化 CSS 選擇器（這種優(yōu)化方式幾乎被使用 CSS 預處理器的開發(fā)者統(tǒng)一忽視了）將嵌套程度保持在最低水平。以下是 CSS 選擇器的性能排名（從最快者開始）
- 識別器:#id
- 類:.class
- 標簽：div
- 相鄰兄弟選擇器：a + i
- 父類選擇器：ul> li
- 通用選擇器：*
- 屬性選擇：input[type="text"]
- 偽類和偽元素：a:hover
你應該記住，瀏覽器在處理選擇器時依照從右到左的原則，因此最右端的選擇器應該是最快的：#id 或則 .class：
- div * {...} // bad
- .list li {...} // bad
- .list-item {...} // good
- #list .list-item {...} // good
1、在你的腳本代碼中，盡可能減少 DOM 操作。緩存所有東西，包括元素屬性以及對象（如果它們被重用的話）。當進行復雜的操作時，使用“孤立”元素會更好，之后可以將其加到 DOM 中（所謂“孤立”元素是與 DOM 脫離，僅保存在內(nèi)存中的元素）。
2、如果你使用 jQuery 來選擇元素，請遵從 jQuery 選擇器最佳實踐方案。
3、為了改變元素的樣式，修改“類”的屬性是奏效的方法之一。執(zhí)行這一改變時，處在 DOM 渲染樹的位置越深越好（這還有助于將邏輯與表象脫離）。
4、盡量只給位置絕對或者固定的元素添加動畫效果。
5、在使用滾動時禁用復雜的懸停動效（比如，在<body>中添加一個額外的不懸停類）。
延伸閱讀：
- Web前端性能優(yōu)化教程01：減少Http請求
- Web前端性能優(yōu)化教程02：使用內(nèi)容分發(fā)網(wǎng)絡
- Web前端性能優(yōu)化教程03：添加Expires頭
- Web前端性能優(yōu)化教程04：壓縮組件
- Web前端性能優(yōu)化教程05：網(wǎng)站樣式和腳本
- Web前端性能優(yōu)化教程06：減少DNS查找、避免重定向
- Web前端性能優(yōu)化教程07：精簡JS 移除重復腳本
- Web前端性能優(yōu)化教程08：配置ETag
- Web前端性能優(yōu)化教程09：圖像和Cookie優(yōu)化
- 從四分鐘到兩秒：我的客戶端性能優(yōu)化實踐
標簽： 性能優(yōu)化 網(wǎng)站優(yōu)化 網(wǎng)頁渲染
版權(quán)申明：本站文章部分自網(wǎng)絡，如有侵權(quán)，請聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請與原作者聯(lián)系。
