淺析渲染引擎與前端優(yōu)化重點

1、淺析渲染引擎與前端優(yōu)化本文以 Chrome 瀏覽器的內(nèi)核 WebKit（更確切是 WebKit 分支 Blink，以下統(tǒng)稱為 WebKit ）為例，對渲染引擎如何展示頁面做個簡單、全面的了解。作者：hanyuxinting來源：hanyuxinting|2016-12-08 10:57 收藏  分享本文主要是兩方面內(nèi)容：· 淺析瀏覽器內(nèi)核的工作原理（以 WebKit 2 為例）。· 淺析由瀏覽器內(nèi)核想到的前端優(yōu)化，或者說前端優(yōu)化規(guī)則是從哪兒來的。大家知道，大部分的 WEB 頁面依托瀏覽器呈現(xiàn)，而瀏覽器能夠?qū)㈨撁嬲故境鰜?，基?/p>

2、依賴于瀏覽器的內(nèi)核，即渲染引擎。今天以 Chrome 瀏覽器的內(nèi)核 WebKit（更確切是 WebKit 分支 Blink，以下統(tǒng)稱為 WebKit ）為例，對渲染引擎如何展示頁面做個簡單、全面的了解。瀏覽器的渲染引擎及其依賴模塊渲染引擎主要是將 WEB 資源如 HTML、CSS、圖片、JavaScript等經(jīng)過一系列加工，最終呈現(xiàn)出展示的圖像。渲染引擎主要包含了對這些資源解析的處理器，如 HTML 解釋器、CSS 解釋器、布局計算+繪圖工具、JavaScript 引擎等。為了更好地呈現(xiàn)渲染效果，渲染引擎還會依賴網(wǎng)絡(luò)棧、緩存機制、繪圖工具、硬件加速機制等。瀏覽器的渲染過程瀏覽器的渲染過程，主要

3、包括兩大部分：網(wǎng)頁資源加載過程和渲染過程。上圖將整個網(wǎng)頁渲染的過程做了大致的剖析。以下我們按照數(shù)據(jù)流向，逐一詳細(xì)剖析每個過程。一、域名解析 DNS當(dāng)我們在瀏覽器中輸入 URL 后，瀏覽器首先會進(jìn)行域名解析。一般情況下，一次 DNS 域名解析大概需要 60-120 ms，一次 TCP 的三次握手需要 1.5 個 RTT（round-trip time）。WebKit 的方案是 采用 DNS 預(yù)取技術(shù)和 TCP 預(yù)連接技術(shù)。DNS 預(yù)取技術(shù)利用現(xiàn)有 DNS 機制，提前解析網(wǎng)頁中可能的網(wǎng)絡(luò)連接。即對用戶瀏覽網(wǎng)頁中存在的鏈接，用較少的 CPU 和網(wǎng)絡(luò)帶寬來解析這些鏈接的域名或 IP 地址；等

4、用戶單擊鏈接時，就會節(jié)省時間 特別是域名解析慢的時候同樣，在地址欄輸入鏈接時，候選項也會被默默地執(zhí)行 DNS 預(yù)取。在 DNS 預(yù)取后，會預(yù)先建立 TCP 連接。對此前端優(yōu)化建議：· 在頁面中指定預(yù)取域名：<link rel=”dns-prefetch” href=”http:/this-is-”>· 大數(shù)據(jù)分析，推測用戶可能點擊的鏈接，提前預(yù)取。· 減少頁面中的域名數(shù)量，可以直接減少DNS的請求。二、SPDY 和 HTTP2因為請求帶來的 TCP 三次握手的 1.5 RTT 延遲，Google 引入 SPDY，嘗試解決HTTP的延遲和安全性（HTTP

5、 明文方式）問題。不過，SPDY 促使了 HTTP2.0 的誕生后，自己也不再更新，逐步退出。SPDY 基于 SSL 之上，輕松兼容 HTTP 新老版本。其優(yōu)勢如下：· 多路復(fù)用。一個 TCP 連接傳輸多個資源。減少 TCP 連接成本。· 不同資源，不同優(yōu)先級。比如優(yōu)先加載首屏。· Header 頭壓縮。減少傳送的字節(jié)數(shù)。SPDY 對 Header 壓縮率可高達(dá) 80%。SPDY 開拓了 HTTP 新局面，秒殺我們太多的前端優(yōu)化工作，從本質(zhì)上提升了頁面加載速度。但我們前端優(yōu)化的工作還是不能偏廢。向著繼續(xù)減少請求，減少 TCP 連接建立的路上，讓

6、我們繼續(xù)。· 合并資源，如 combo 合并 JavaScript 文件、CSS 文件，利用 sprite 合并圖片，圖片地圖等；· 當(dāng)頁面資源較小時，可直接放頁面中，如小圖可使用 Base64 編碼格式引入。甚至一些基礎(chǔ)樣式，或首屏依賴樣式，都可以放在頁面中；· 資源壓縮技術(shù)。如 Gzip 等。主要是對響應(yīng)數(shù)據(jù)的壓縮· 精簡 JavaScript 和 CSS 代碼。減少無用的空格。壓縮混淆· 避免鏈接重定向、避免錯誤的鏈接請求。建立多次鏈接、多次 DNS 解析，阻礙 DNS 預(yù)取技術(shù)。及時更新掉你頁面中沒有價值的鏈接吧。三、資源加載域名解析完

7、，TCP 連接也建立起來后，資源加載器就開始工作了。資源及資源加載器資源包括：HTML、JavaScript、CSS 樣式表、圖片、SVG、字體文件、視頻音頻等。資源加載器有三種：1. 特定加載器，只加載某一種。如ImageLoader類。2. 緩存機制的資源加載器。特定加載器通過它查找是否有緩存資源，屬于 HTML 的文檔對象。3. 通用的資源加載器。在WebKit需要從網(wǎng)絡(luò)或文件系統(tǒng)獲取資源時使用。只負(fù)責(zé)獲取資源的數(shù)據(jù)，被所有特定資源加載器共享。資源加載的過程在 WebKit 中，資源都以 CachedResource 為基類，以 Cached 為前綴，體現(xiàn)了瀏覽器的緩存機制。即請求資源時

8、，瀏覽器會先看緩存中有沒有這個資源，然后再決定是否向服務(wù)器發(fā)出請求。這引出兩個問題，首先，緩存資源的生命周期。瀏覽器緩存不會無限增大，緩存池中的數(shù)據(jù)必然出現(xiàn)更替，WebKit 采用 LRU 最近最少使用算法更新緩存池數(shù)據(jù)。WebKit 遵循 HTTP 協(xié)議，當(dāng)頁面刷新時，判斷資源是否在資源池。若存在，則附上該資源在本地的一些信息（如修改時間等），發(fā)送 HTTP 請求給服務(wù)器，服務(wù)器根據(jù)信息作出判斷，若資源沒更新則網(wǎng)絡(luò)狀態(tài)為 304，利用現(xiàn)有資源；否則執(zhí)行資源加載過程。其次，資源加載過程。資源池中沒有該資源時，執(zhí)行加載過程。WebKit 可以并行（多線程）下載普通資源和 Ja

9、vaScript 資源。在當(dāng)前主線程被阻塞時，WebKit 會啟動另一個線程去遍歷后邊的網(wǎng)頁，收集需要的資源 URL再發(fā)請求，避免阻塞。基于資源加載，前端優(yōu)化建議：利用緩存機制，緩存常用且短時期內(nèi)不會變更的資源，或給資源設(shè)置過期時間。比如設(shè)置 ETag/Last-Modified 和 Expires/Cache-Control。Expires/Cache-Control 兩者作用一致，指明資源有效期，如果本地緩存還在有效期內(nèi)，瀏覽器直接使用本地緩存，不再發(fā)送請求。兩者同時配置時，Cache-Control 高于 Expires。配置 ETag/Last-Modif

10、ied 后，瀏覽器再次訪問 URL 時，還會向服務(wù)器發(fā)送請求，確認(rèn)文件是否已修改，沒修改則服務(wù)器返回304，瀏覽器直接從本地緩存獲取數(shù)據(jù)；修改過則服務(wù)器返回數(shù)據(jù)給瀏覽器。兩者同時配置，服務(wù)器會優(yōu)先檢測 ETag，一致才會繼續(xù)檢測 Last-Modified。兩者同時配置，可以使服務(wù)器更準(zhǔn)確的判斷瀏覽器是否已有需要的緩存數(shù)據(jù)。ETag/Last-Modified 和 Expires/Cache-Control 兩對都設(shè)置時， Expires/Cache-Control 優(yōu)先級更高。所以，只要本地緩存在有效期內(nèi)，就不會發(fā)送請求。但頁面 F5 刷新和強刷時，緩存將失效。鑒于資源下載中可能被阻塞，將

11、JavaScript 文件放置頁面下方。JavaScript 資源就是阻塞主線程的那個，而重建一個線程也是需要時間滴，所以把 JavaScript 扔最后吧 但 JavaScript 資源并不影響之前資源的加載和 DOM 樹的構(gòu)建。四、從 URL 到 DOM 樹的構(gòu)建當(dāng)我們拿到頁面所需的資源后，渲染引擎便啟動 HTML 解釋器，對獲取的資源進(jìn)行解析處理。網(wǎng)頁代碼（字節(jié)流）經(jīng)過詞法分析器解碼，再由語法分析器解釋成詞語 Token，并構(gòu)建成節(jié)點 Node，直到最終構(gòu)建成一棵 DOM 樹。期間，當(dāng)節(jié)點為 JavaScript 節(jié)點時，將啟動 JavaScript 引擎，這時將阻塞 DOM 樹的構(gòu)建。

12、因為 JavaScript 執(zhí)行過程中， JavaScript 很可能會對 DOM 樹進(jìn)行讀寫操作。直到 JavaScript 執(zhí)行完畢， DOM 樹才會恢復(fù)構(gòu)建。其他資源并不影響 DOM 樹的構(gòu)建。在前端優(yōu)化中，建議將 CSS 文件放在頁首，以便構(gòu)建 DOM 樹；而將 JavaScript 文件盡量放在頁面下方，防止阻塞構(gòu)建 DOM 樹；而 JavaScript 的 onload 事件里，不要寫太多影響首屏渲染的、操作 DOM 樹的 JavaScript 代碼。另外強調(diào)一下：DOMContentLoaded： DOM 樹構(gòu)建完；DOM 的onload事件： DOM 樹構(gòu)建完且網(wǎng)頁依賴的資源都

13、加載完了五、網(wǎng)頁排版過程：由 DOM 樹到構(gòu)建 RenderLayer 樹這一過程，就像是頁面的排版過程。它通過 CSS 樣式信息，對 DOM 樹進(jìn)行排版，形成 RenderObject 樹及 RenderLayer 樹。在 DOM 樹構(gòu)建完成后，WebKit 為 DOM 樹節(jié)點構(gòu)建 RenderObject 對象。WebKit 將根據(jù)盒模型計算節(jié)點的位置、大小等樣式信息（即布局計算或排版），并將這些信息保存到對應(yīng)的 RenderObject 對象。1. CSS解釋器CSS解釋過程，是從 CSS 字符串經(jīng)過 CSS 解釋器（CSSParser、CSSGrammer）處理后，變成渲染引擎的內(nèi)部樣

14、式規(guī)則表示的過程。樣式規(guī)則是解釋器的輸出結(jié)構(gòu)，是樣式匹配的輸入數(shù)據(jù)。具體過程：WebKit 在渲染元素時，CSS 解釋器獲取樣式信息，返回匹配好的結(jié)果樣式信息。每個元素可能需要匹配不同來源的規(guī)則，依次是用戶代理（瀏覽器）規(guī)則集合、用戶規(guī)則集合和HTML頁面中包含的自定義規(guī)則集合。三者匹配方式類似。對于每個規(guī)則集合，先查找 ID 規(guī)則，檢查有無匹配的規(guī)則，然后依次檢查類型規(guī)則、標(biāo)簽規(guī)則等。匹配好的規(guī)則，保存到匹配結(jié)果中。WebKit 對這些規(guī)則進(jìn)行排序。對于元素需要的樣式屬性，WebKit 選擇從高優(yōu)先級規(guī)則中選取，并將樣式屬性值返回。2. 渲染基礎(chǔ)：RenderObject 樹DOM 樹經(jīng)過布

15、局計算、CSS parse 后，將樣式信息存儲在 RenderObject 對象中，并構(gòu)建成 RenderObject 樹。同時，WebKit 會根據(jù)網(wǎng)頁的層次結(jié)構(gòu)創(chuàng)建 RenderLayer 樹，完成繪圖上下文。DOM 樹、Render 樹和繪圖上下文同時并存，直到頁面銷毀。RenderObject 樹，基于 DOM 樹的一棵新樹，是布局計算和渲染等機制的基礎(chǔ)設(shè)施。DOM 節(jié)點建立新的 RenderObject 對象的時機：· DOM 樹的 Document 節(jié)點。· DOM 樹的可視節(jié)點，如html、body、div 等。非可視節(jié)點如meta、head、script 等

16、不創(chuàng)建。· 為滿足 WebKit 處理，需要建立匿名 RenderObject 節(jié)點，它不對應(yīng)于 DOM 樹的任何節(jié)點。如：匿名的 RenderBlock 節(jié)點。DOM 樹的每個節(jié)點對象會遞歸檢查是否需要創(chuàng)建 RenderObject，并根據(jù) DOM 節(jié)點類型創(chuàng)建 RenderObject 節(jié)點；動態(tài)加入的 DOM 元素，會相應(yīng)的創(chuàng)建 RenderObject 節(jié)點。所有這些節(jié)點構(gòu)成一棵 RenderObject 樹。3. 渲染基礎(chǔ)：網(wǎng)頁層次和 RenderLayer 樹在 HTML 頁面上，網(wǎng)頁分層展示。目的有兩個：1. 方便開發(fā)網(wǎng)頁、設(shè)置網(wǎng)頁的層次；2. 簡化 WebKit 渲染

17、的邏輯。在RenderObject 樹基礎(chǔ)上，WebKit 根據(jù)需要為其中的某些節(jié)點創(chuàng)建新的 RenderLayer 節(jié)點，并形成一棵 RenderLayer 樹。RenderObject 節(jié)點建立新 RenderLayer 對象的時機：· DOM 樹的 Document 節(jié)點對應(yīng)的 RenderView 節(jié)點。· DOM 樹的 Document 的子節(jié)點，即 HTML 節(jié)點對應(yīng)的 RenderBlock 節(jié)點。· 顯式的指定 CSS 位置的 RenderObject 節(jié)點。· 有透明效果的 RenderObject 節(jié)點。· 節(jié)點有溢出 ov

18、erflow、alpha 或反射等效果的 RenderObject 節(jié)點。· 使用Canvas 2D、3D (WebGL)技術(shù)的 RenderObject 節(jié)點。· Video 節(jié)點對應(yīng)的 RenderObject 節(jié)點。RenderLayer 節(jié)點的使用可以有效減少網(wǎng)頁結(jié)構(gòu)的復(fù)雜程度，并在許多情況下能減少重新渲染的開銷。4. 布局計算及重繪時機CSS 盒模型，是布局計算的基礎(chǔ)；渲染引擎用來確定如何排版元素、及元素間的位置關(guān)系。布局計算，是針對 RenderObject 樹及其子樹的計算，是一種遞歸計算，其節(jié)點信息需要先計算其子節(jié)點的位置、大小等信息。RenderObjec

19、t 對象會將計算結(jié)果存儲，等待渲染時機。· 每個元素會實現(xiàn)自己的 layout。· 頁面元素定義了寬高，則按自定義寬高確定元素大小。· 文本節(jié)點等內(nèi)聯(lián)元素，需要結(jié)合字號大小、文字多少確定寬高。· 頁面元素確定的寬高超過了布局容器包含塊提供的寬高，同時 overflow 為 visible 或 auto，WebKit 則提供滾動條保證可顯示所有內(nèi)容。· 一般頁面元素的寬高是在布局時通過計算得來。除非網(wǎng)頁定義了頁面元素的寬高。重繪時機：只要樣式發(fā)生變化，就重新計算。· 首次打開頁面，瀏覽器設(shè)置網(wǎng)頁的可視區(qū)域，并調(diào)用計算布局的方法?？梢晠^(qū)域

20、改變時，網(wǎng)頁包含塊的大小也會改變，WebKit 需要重新計算布局。· 網(wǎng)頁的動畫會觸發(fā)布局計算。動畫可能改變樣式屬性。· JavaScript 通過 CSSOM（CSS 對象模型） 直接修改樣式，會觸發(fā) WebKit 重新計算布局。· 用戶交互，如滾動網(wǎng)頁。前端優(yōu)化建議，因布局計算耗時間，一旦布局發(fā)生變化，WebKit 就需要后面的重新繪制操作。SO，減少樣式的變動減少重繪利用 CSS3 新功能（如 CSS3 變形 translate、scale、rotate 等方法，過渡 transition 方法等）可有效提高網(wǎng)頁的渲染效率。六、

21、 網(wǎng)頁渲染過程：由 RenderLayer 樹到最終的圖像在上一個過程，網(wǎng)頁完成了 DOM 樹到 RenderLayer 樹的布局計算和排版處理。接下來，由渲染引擎（一般是繪圖類工具）完成對 RenderLayer 樹的繪制，并最終形成圖像，展示給用戶。1. 繪圖上下文繪圖上下文，所有的繪圖操作都是在該上下文中進(jìn)行的。它是一個與平臺無關(guān)的抽象類，它將每個繪圖操作橋接到不同的繪圖具體實現(xiàn)類。2D 繪圖上下文：· 提供基本繪圖單元的繪制接口及設(shè)置繪圖的樣式。· 繪圖接口包括：畫點、畫線、畫圖、畫多邊形、畫文字等。繪圖樣式包括顏色、線寬、字號、漸變等。· CPU 來完成 2D 操作?；蛴?3D 圖形接口（ OpenGL ）完成。3D 繪圖上下文：支持 CSS3D、WebGL 等。· 使用 3D 圖形接口（OpenGL、Direct3D 等）2. 渲染方式軟件渲染：CPU。通常渲染