HTML、CSS和JS如何變成頁面的？

阿新 • • 發佈：2021-10-02

我們經常寫 HTML 、 CSS 和 JavaScript ，寫好這些之後，我們就會在瀏覽器中看到頁面，那瀏覽器究竟在這背後做了一些什麼事情呢？本篇文章將揭曉答案！

瞭解瀏覽器的渲染原理是我們在通往更深層次的前端開發中不可缺少的，它可以讓我們從更深層次、角度去考慮效能優化等～

下面進入正文～

程序、執行緒

瀏覽器會分配一個執行緒“自上而下，從左到右”依次解析和渲染程式碼，那麼程序和執行緒是什麼，它們之間有著怎樣的關係呢？

程序

一個程序就是一個程式執行的例項。當啟動一個程式的時候，作業系統會為該程式建立一塊記憶體，用來存放程式碼，執行中的資料和一個執行任務的主執行緒，這樣的一個執行環境就叫程序

執行緒

執行緒不能單獨存在，它是由程序來啟動和管理的。執行緒依附於程序，程序中使用多執行緒並行處理能提升運算效率

兩者之間的關係

1、程序中的任意一執行緒執行出錯，都會導致整個程序的崩潰

2、執行緒之間可以共享資料

3、當一個程序關閉後，作業系統會回收程序所佔用的記憶體

4、程序之間的內容相互隔離

渲染機制

從HTML、CSS和JavaScript開始

瞭解瀏覽器的渲染原理，我們就要從理解 HTML 、 CSS 和 JavaScrip 開始，我們先來看一張圖

HTML (超文字標記語言)，顧名思義，由標記（標籤）和文字組成，每個標籤都有自己的語意，瀏覽器會根據標籤和文字展示對應的內容。

CSS (層疊樣式表)，由選擇器和屬性組成，它可以改變 HTML 的樣式，比如上圖中，我們改變了 span 的顏色由藍色為綠色。

JavaScript ，我們可以通過 JS 完成很多事情，例如上圖中修改樣式。

下面開始分析渲染的原理

渲染流水線

渲染模組由於渲染的機制的複雜，被劃分為了很多子階段，輸入的 HTML 經過這些子階段，最後會輸出為畫素。這樣的處理流程就叫做渲染流水線

按照渲染的時間順序，流水線可分為幾個子階段：構建 DOM 樹、樣式計算、佈局階段、分層、繪製、分塊、光柵化和合成

構建DOM樹

由於瀏覽器無法直接理解和使用 HTML ,所以需要將 HTML 轉換為瀏覽器能夠理解的結構（ DOM 樹）

樹結構示意圖

DOM樹的構建過程

我們來分析一下下面這段程式碼會構建出一棵什麼樣的 DOM 樹

我們先將上面的程式碼執行，然後在瀏覽器控制檯輸入 document ，看看會有什麼效果

我們一層級一層級的開啟就會看到如上圖的效果，我們可以根據這每一層級展開的效果，繪製出一棵 DOM 樹結構，如下：

接下來，我們試一下利用 JS 修改一下內容，看有什麼改變：

我們可以看到“瀏覽器”的文字變成了“chrome”

再來看一下 DOM 樹是否有改變

我們看到在“瀏覽器”的位置換成了“chrome”，那麼如何讓 DOM 節點擁有樣式？

樣式計算

樣式計算，顧名思義，就是計算出 DOM 節點中每個元素的具體樣式，這個階段會分為三部分：

把 CSS 轉換為瀏覽器能夠理解的結構
轉換樣式表中的屬性值，使其標準化
計算出 DOM 樹中每個節點的樣式

CSS樣式來源

link 匯入外部樣式資源

瀏覽器會新開闢一個執行緒，去伺服器獲取對應的資原始檔（不阻礙主執行緒的渲染）

style 內嵌樣式

從上到下解析，解析完繼續解析 DOM 結構。在真實專案中，如果 css 程式碼不是很多，或是移動端專案，我們應該使用內嵌式，以此來減少 http 資源的請求，提高頁面渲染速度

行內樣式
@import 匯入

它是同步的，不會開闢新執行緒去載入資原始檔，而是讓主執行緒去獲取，這阻礙 DOM 結構的繼續渲染；只有把外部樣式匯入進來，並且解析後，才會繼續渲染 DOM 結構

把CSS轉換為瀏覽器能夠理解的結構

瀏覽器就像不能理解 HTML 一樣，不理解 CSS ，所以當渲染引擎接收到 CSS 檔案時，會執行轉換操作，將 CSS 文字轉換為瀏覽器可以理解的 styleSheets 結構。

在 HTML 中，在瀏覽器中輸入 document 可以檢視 html 的結構。在 css 中，可以輸入 document.styleSheets 看到 css 的結構

現在的結構是空的，我們來加一些樣式，看看效果

轉換樣式表中的屬性值，使其標準化

屬性值標準化就是將所有值轉換為渲染引擎容易理解的、標準化的計算值。我們大致看一下效果：

標準化前

body {
    font-size: 2em;
    color: black;
    font-weight: bold;
    ...
}
複製程式碼

標準化後

body {
    font-size: 16px;
    color: rgb(0, 0, 0);
    font-weight: 700;
    ...
}
複製程式碼

計算出DOM樹中每個節點的具體樣式

樣式計算有兩個CSS的規則：繼承規則和層疊規則

CSS繼承規則

CSS 繼承就是每個 DOM 節點都包含有父節點的樣式。我們來看一下下面這段程式碼中如何應用到 DOM 節點上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        h1 {
            color: red;
        }

        div {
            color: blue;
        }

        span {
            font-size: 16px;
        }
    </style>
</head>
<body>
    <h1>掘金</h1>
    <div>
        <span>瀏覽器</span>
        <span>渲染原理</span>
        構建DOM樹
    </div>
</body>
</html>
複製程式碼

子節點會擁有父節點的樣式，由此我們可以畫出這樣一張圖

我們還可以開啟控制檯，看一下選中 span 標籤，都會看到哪些內容

通過上圖，我們可看到一個元素的樣式、繼承過程等， userAgent 樣式是瀏覽器預設的內建樣式，如果我們不提供任何樣式，就會使用此樣式。

樣式層疊規則

層疊在 CSS 處於核心地位，它是 CSS 的一個基本特徵，它定義瞭如何合併來自多個源的屬性值的演算法。

樣式計算階段最終輸出的內容是每個 DOM 節點的樣式，並且儲存在了 ComputedStyle 中。我們可以通過控制檯看到某個 DOM 元素最終的計算樣式

佈局階段

現在我們不知道 DOM 元素的幾何位置資訊，所以現在我們需要計算出 DOM 樹中可見元素的幾何位置，這個計算過程就叫做佈局。佈局階段有兩個過程：

建立佈局樹
佈局計算

建立佈局樹

建立佈局樹的意思就是建立一棵只包含可見元素的樹。我們來看下面一段程式碼建立佈局樹的過程

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        h1 {
            color: red;
        }

        div {
            color: blue;
        }

        div span {
            font-size: 16px;
        }

        div span:last-child {
            display: none;
        }
    </style>
</head>
<body>
    <h1>掘金</h1>
    <div>
        <span>瀏覽器</span>
        <span>渲染原理</span>
        構建DOM樹
    </div>
</body>
</html>
複製程式碼

構建佈局樹的過程中， DOM 樹中所有不可見的節點都不會包含在這棵樹中。瀏覽器會遍歷 DOM 樹中所有能看見的節點，然後把這些節點加入到佈局中；不可見的節點就會被忽略， head 標籤下面的內容、 div 下最後一個 span 節點都不會在佈局樹中，我們看一下這個過程圖感受一下～

佈局計算

佈局計算就是計算佈局樹節點的座標位置。這個計算過程極為複雜。

分層

渲染引擎會為特定的節點生成專用的圖層，並生成一棵對應的圖層樹。這樣做是因為頁面中可能含有很多複雜的效果，我們可以開啟控制檯看一下頁面的分層情況

我們可以看到，渲染引擎給頁面分了很多圖層，這些圖層會按照一定順序疊加在一起，形成最終的頁面

那麼圖層的來源有哪些？

1、擁有層疊上下文屬性的元素會被提升為單獨的一層

層疊上下文可以使能夠使 HTML 元素具有三維的概念，這些 HTML 元素按照自身屬性的優先順序分佈在垂直於這個二維平面的 z 軸上。哪些元素具有層疊上下文屬性？

2、需要剪裁的地方會被建立為圖層

當我們建立一個有寬度和高度的 div 時，裡面的文字內容可能會超出這個區域，這時候渲染引擎會把裁剪文字內容的一部分用於顯示在 div 區域，例如

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background: yellow;
            overflow: auto;
        }
    </style>
</head>
<body>
    <div>
        我們經常寫`HTML`、`CSS`和`JavaScript`，寫好這些之後，我們就會在瀏覽器中看到頁面，那瀏覽器究竟在這背後做了一些什麼事情呢？本篇文章將揭曉答案！

        瞭解瀏覽器的渲染原理是我們在通往更深層次的前端開發中不可缺少的，它可以讓我們從更深層次、角度去考慮效能優化等～
    </div>
</body>
</html>
複製程式碼

執行結果

我們再開啟控制檯的 layers 看一下效果

可以看到渲染引擎為文字部分單獨建立了一個圖層。

在佈局樹中的節點如果擁有對應的圖層，這個節點就是一個圖層，如果沒有，這個節點就屬於父節點的圖層，如下圖：

圖層繪製

建立好圖層樹後，渲染引擎會繪製圖層樹中的每個圖層。渲染引擎會將圖層繪製分解為很多小的繪製指令，然後將這些指令按照順序組成待繪製列表，我們可以開啟控制檯的 layers ，選擇 document 層，看一下效果

柵格化操作

柵格化就是將圖塊轉換位點陣圖，圖塊是柵格化執行的最小單位。渲染程序維護了一個柵格化的執行緒池，所有圖塊的柵格化都是線上程池內執行的。

圖層繪製列表準備好之後，主執行緒會把這個繪製列表提交給合成執行緒，繪製操作由渲染引擎中的合成執行緒來完成。

合成執行緒將圖層劃分為圖塊，然後合成執行緒會按照視口（可見區域）附近的圖塊優先生成點陣圖。

合成與顯示

所有的圖塊都被光柵化後，合成執行緒會生成一個繪製圖塊的命令（ DrawQuad ），然後將該命令提交給瀏覽器程序。瀏覽器程序裡面 viz 元件用來接收 DrawQuad 命令，將其頁面內容繪製到記憶體中，最後將記憶體顯示到螢幕。這個時候，我們就看到了頁面

完善渲染流水線示意圖

根據上文中描述，我們可以畫出這樣一張圖

我還在網上找到了另外一張圖

這兩張圖都是描述瀏覽器的渲染流程的。