6、等文檔數(shù)據(jù)傳輸完成之后，「渲染進程」會返回“確認(rèn)提交”的消息給「瀏覽器進程」。

7、「瀏覽器進程」接收到「渲染進程」"確認(rèn)提交"的消息之后，便開始移除之前舊的文檔，然后更新**「瀏覽器進程」**中的頁面狀態(tài)。

5.瀏覽器的渲染流程

HTML，DOM，樣式計算，布局，圖層，繪制，柵格化，合成和顯示。

一個完整的渲染流程大致可總結(jié)如下:

接下來我們從一個簡單的html頁面來談瀏覽器的渲染流程：

5.1 構(gòu)建 DOM 樹

HTML內(nèi)容轉(zhuǎn)換為瀏覽器DOM樹結(jié)構(gòu)的過程：字節(jié) → 字符 → 令牌 → 節(jié)點 → 對象模型。

• 轉(zhuǎn)換: 瀏覽器從磁盤或網(wǎng)絡(luò)讀取 HTML 的原始字節(jié)，并根據(jù)文件的指定編碼（例如 UTF-8）將它們轉(zhuǎn)換成各個字符。
• 令牌化: 瀏覽器將字符串轉(zhuǎn)換成 W3C HTML5 標(biāo)準(zhǔn)規(guī)定的各種令牌，例如，“”、“”，以及其他尖括號內(nèi)的字符串。每個令牌都具有特殊含義和一組規(guī)則。
• 詞法分析: 發(fā)出的令牌轉(zhuǎn)換成定義其屬性和規(guī)則的“對象”。
• DOM 構(gòu)建: 最后，由于 HTML 標(biāo)記定義不同標(biāo)記之間的關(guān)系（一些標(biāo)記包含在其他標(biāo)記內(nèi)），創(chuàng)建的對象鏈接在一個樹數(shù)據(jù)結(jié)構(gòu)內(nèi)，此結(jié)構(gòu)也會捕獲原始標(biāo)記中定義的父項-子項關(guān)系: HTML 對象是 body 對象的父項，body 是 paragraph 對象的父項，依此類推。

當(dāng)解析器發(fā)現(xiàn)非阻塞資源，例如一張圖片，瀏覽器會請求這些資源并且繼續(xù)解析。當(dāng)遇到一個CSS文件時，解析也可以繼續(xù)進行，但是對于<script>標(biāo)簽（特別是沒有 async 或者 defer 屬性）會阻塞渲染并停止HTML的解析。

瀏覽器構(gòu)建DOM樹時，這個過程占用了主線程。當(dāng)這種情況發(fā)生時，**「預(yù)加載掃描儀」**將解析可用的內(nèi)容并請求高優(yōu)先級資源，如CSS、JavaScript和web字體。多虧了預(yù)加載掃描器，我們不必等到解析器找到對外部資源的引用來請求它。它將在后臺檢索資源，以便在主HTML解析器到達請求的資源時，它們可能已經(jīng)在運行，或者已經(jīng)被下載。預(yù)加載掃描儀提供的優(yōu)化減少了阻塞。

5.2 樣式計算

樣式計算的目的是為了計算出DOM節(jié)點中每一個元素的具體樣式，這個階段大體分三步。

5.2.1 把CSS轉(zhuǎn)換為瀏覽器內(nèi)容理解的結(jié)構(gòu)：將css文本轉(zhuǎn)換為樣式表

CSS來源有：

• 外部樣式表：通過link引用的CSS文件
• 內(nèi)部樣式表：style標(biāo)簽內(nèi)的CSS
• 內(nèi)聯(lián)樣式：元素的style屬性內(nèi)嵌的CSS

和HTML文件一樣，瀏覽器也是無法直接理解這些純文本的CSS樣式，所以**「當(dāng)渲染引擎接收到CSS文本的時，會執(zhí)行一個轉(zhuǎn)換操作，將css文本轉(zhuǎn)換為瀏覽器可以理解的結(jié)構(gòu)—styleSheets?！?*

渲染引擎會把獲取到的 CSS 文本全部轉(zhuǎn)換為 styleSheets 結(jié)構(gòu)中的數(shù)據(jù)，并且該結(jié)構(gòu)同時具備了查詢和修改功能，這會為后面使用JS的樣式操作提供基礎(chǔ)。

5.2.2 轉(zhuǎn)換樣式表中的屬性值，使其標(biāo)準(zhǔn)化

我們已經(jīng)將CSS轉(zhuǎn)換為瀏覽器能理解的結(jié)構(gòu)了，那么接下來就要對其進行屬性值的標(biāo)準(zhǔn)化操作。

所以需要將所有值如 2em、blue、bold，轉(zhuǎn)換為渲染引擎容易理解的、標(biāo)準(zhǔn)化的計算值，這個過程就是屬性值標(biāo)準(zhǔn)化。

5.2.3 計算出DOM樹中每一個節(jié)點的具體樣式

這里就涉及到CSS的**「繼承規(guī)則」和「層疊規(guī)則」**了。

樣式計算階段的目的是為了計算出 DOM 節(jié)點中每個元素的具體樣式，在計算過程中需要遵守 CSS 的繼承和層疊兩個規(guī)則。這個階段最終輸出的內(nèi)容是每個 DOM 節(jié)點的樣式，并被保存在 ComputedStyle 的結(jié)構(gòu)內(nèi)。

每個 DOM 元素最終的計算樣式，可以打開 Chrome 的“開發(fā)者工具”，選擇第一個“element”標(biāo)簽，然后再選擇“Computed”子標(biāo)簽

5.3 布局階段

現(xiàn)在，我們有DOM樹和DOM樹中元素的樣式，但是還足以顯示頁面，因為我們還不知道DOM元素的幾何位置，那么接下來就需要**「計算出DOM樹中可見元素的幾何位置，我們把這個計算過程叫做布局」**。

Chrome在布局階段需要完成兩個任務(wù):

5.3.1 創(chuàng)建布局樹

DOM樹有些元素不會在頁面上顯示，被用戶看到，如head標(biāo)簽和使用了display:none的元素。所以在顯示之前，我么還要額外地構(gòu)建一棵**「只包含了可見元素的布局樹」**。

從上圖可以看出，DOM樹中所有不可見的節(jié)點都沒有有包含到布局樹中。

5.3.2 布局計算

我們已經(jīng)有了一棵完整的布局樹，那么接下來就要根據(jù)DOM節(jié)點對應(yīng)的CSS樹中的樣式，計算布局樹節(jié)點的坐標(biāo)位置。即計算元素在視口上確切的位置和大小。

5.4 分層 (圖層樹)

有了布局樹之后，每個元素的具體位置信息都計算出來了，那么接下來是不是就要開始著手繪制頁面了？不是。因為頁面中有很多復(fù)雜的效果，如一些**「復(fù)雜的3D轉(zhuǎn)換」，「頁面滾動」，或者使用z-index，為了更方便的實現(xiàn)這些效果，「渲染引擎還需要為特定的節(jié)點生成專門的圖層，并生成一棵對應(yīng)的圖層樹(LayerTree)」**。這和PS的圖層類似，正是這些圖層疊加在一起才最終構(gòu)成了頁面圖像。

想要直觀的理解什么是圖層，可以打開Chrome的"開發(fā)工具"，選擇Layers標(biāo)簽，就可以查看可視化頁面的分層情況。

「布局樹和圖層樹的關(guān)系」

通常情況下，并不是布局樹中的每一個節(jié)點都包含一個圖層，如果一個節(jié)點沒有對應(yīng)的圖層，那么這個節(jié)點就從屬于父節(jié)點的圖層。那么什么情況滿足，渲染引擎才會為特定的節(jié)點創(chuàng)建新的圖層呢?滿足一下兩個條件中的任意一個，元素就可以被單獨提升為一個圖層。

頁面是一個二維平面，但層疊上下文能夠上HTML元素?fù)碛腥S概念，這些HTML元素按自身屬性的優(yōu)先級分布在垂直于這個二維平面的Z軸上，以下情況會作為單獨的圖層。

• position:fixed
• css 3d 例如：transform:rotateX(30deg)
• video
• canvas
• 有CSS3動畫的節(jié)點
• will-change

那么什么是剪裁，結(jié)合以下代碼

這里我么把div的大小限定為200 * 200像素，而div里面的文字內(nèi)容比較多，文字所顯示的區(qū)域肯定會超過200 * 200的面積，這時候就產(chǎn)生了剪裁，渲染引擎會把裁剪文字內(nèi)容的一部分用于顯示在div區(qū)域，下面是運行時的執(zhí)行結(jié)果:

出現(xiàn)這種裁剪情況時，渲染引擎會為文字單獨為文字創(chuàng)建一層，如出現(xiàn)滾動條，滾動條也會被提升為單獨的層。

5.5 圖層的繪制

在完成圖層樹的構(gòu)建之后，渲染引擎會對圖層樹中的每個圖層進行繪制，那么接下來我們看看渲染引擎是如何實現(xiàn)圖層的繪制?

如果給你一張紙，讓你先把背景涂成暗色，然后再中間中間位置花一個紅色的圓，最后在圓上畫一個綠色三角，你會怎么操作，通常你會按順序操作。

渲染引擎實現(xiàn)圖層的繪制與之類似，會把一個圖層的繪制拆分為很多小的繪制指令，然后再把這些指令按照順序組成一個待繪制列表，如下圖所示:

從圖中可以看出，繪制列表中的指令其實非常簡單，就是讓其執(zhí)行一個簡單的繪制操作，比如說繪制粉色矩形或者黑色的線等。而繪制一個元素通常需要好幾條繪制指令，因為每個元素的背景、前景、邊框都需要單獨的指令去繪制。所以在**「圖層繪制階段，輸出的內(nèi)容就是這些待繪制列表」**。

5.6 柵格化操作

柵格化，就是指將圖塊轉(zhuǎn)化為位圖。

合成線程接收到上面的繪制列表后的工作：因為視口，合成線程會把圖層劃分多個圖塊，然后每個圖塊按離視口的距離被優(yōu)先交由GPU柵格化生成位圖，并保存在GPU中

繪制列表指令用來記錄繪制順序和繪制指令的列表，而實際上**「繪制操作是由渲染引擎中的合成線程來完成」**。結(jié)合下圖看渲染主線程和合成線程之間的關(guān)系:

如上圖所示，當(dāng)圖層的繪制列表準(zhǔn)備好之后，主線程會把該繪制列表提交給合成線程，那么合成線程是如何工作的？

首先我們談一個概念，「視口」。什么是視口？

通常一個頁面可能很大，用戶只能看到其中的一部分，我們把**「用戶可以看到的這個區(qū)域叫視口(viewport)。」**

比如說，一個圖層很大，頁面需要滾動底部，才能全部顯示。但是通過視口，用戶只能看到頁面很小的一部分，所以在此種情況下，要一次性繪制完圖層所有的內(nèi)容，會產(chǎn)生很大的開銷，且沒有必要。

基于這個原因，「合成線程會將圖層劃分為圖塊」，這些圖塊的大小通常是256 * 256或512 * 512。然后**「合成線程會按照視口附近的圖塊來優(yōu)先生成位圖」**，實際生成位圖的操作就是有柵格化來執(zhí)行的。所謂柵格化，**是指將圖塊轉(zhuǎn)化為位圖(所謂位圖就是能夠看的到的圖層區(qū)域)。而圖塊是柵格化執(zhí)行的最小單位。**渲染進程維護了一個柵格化的線程池，所有的圖塊柵格化都是在線程池內(nèi)執(zhí)行，運行方式如下圖所示:

通常，柵格化過程都會使用GPU來加速生成，「使用GPU生成位圖過程叫快速柵格化，或者GPU柵格化」，生成的位圖被保存在GPU內(nèi)存中。GPU操作是運行在GPU進程中的，那么柵格化，還涉及到了跨進程操作。

從圖中可以看出，渲染進程把生成圖塊的指令發(fā)送給 GPU，然后在 GPU 中執(zhí)行生成圖塊的位圖，并保存在 GPU 的內(nèi)存中。

5.7 合成和顯示

一旦所有圖塊被柵格化，合成線程就會生成一個繪制圖塊的命令—“DrawQuad”，然后將該命令提交給瀏覽器進程。瀏覽器進程里的viz組件接收該指令并將頁面內(nèi)容繪制在內(nèi)存中，最后顯示在屏幕上

到此，經(jīng)過一系列的階段，編寫好的HTML、CSS、JavaScript等文件，經(jīng)過瀏覽器就會顯示為頁面。

6.重排、重繪、合成

重排：幾何位置的改變，width等，也稱回流，需要更新完整的渲染流水線，開銷最大

重繪：繪制屬性的改變，背景顏色等，省去了布局和分層階段

合成：比如css的transition動畫，更改一個既不要布局也不要繪制的屬性，渲染引擎將跳過布局、分層和繪制，只執(zhí)行后續(xù)的合成操作，

6.1 更新元素的幾何屬性(重排)

從上圖可以看出，如果你**「通過JS或CSS修改元素的幾何位置屬性」，如width，height等，那么會觸發(fā)瀏覽器的重新布局，解析之后的一系列子階段，這個過程就叫重排也稱回流。「重排需要更新完整的渲染流水線，所以開銷也最大的。」

6.2 更新元素的繪制屬性(重繪)

比如通過JS更改某些元素的背景顏色，渲染流水的調(diào)整參見下圖:

修改元素的背景色，布局階段不會執(zhí)行，因為**「沒有引起幾何位置的變換」，所以直接進入繪制，然后執(zhí)行之后的一系列子階段，這個過程就叫「重繪」。相較重排操作，「重繪省去了布局和分層階段，所以執(zhí)行效率會比重排效率高?！?*

6.3 直接合成階段

那如果你更改一個既不要布局也不要繪制的屬性，渲染引擎將跳過布局和繪制，只執(zhí)行后續(xù)的合成操作，我們把這個過程叫做**「合成?！?*

在上圖，我們使用CSS的transform來實現(xiàn)動畫效果，可以避開重排和重繪階段，直接在非主線程上執(zhí)行合成動畫操作。這樣的效率最高，因為是在非主線程上合成的，并沒有占用主線程的資源。

7.優(yōu)化

如果我們要提升性能，需要做的就是減少瀏覽器的重繪和回流

• CSS

• JS

總結(jié)

以上是生活随笔為你收集整理的浏览器渲染原理的学习与总结的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。