瀏覽器渲染機制

_htfire發表於2018-12-25
瀏覽器

前言

在說瀏覽器渲染機制之前，我們先了解下瀏覽器的核心。

在平時的業務開發中我們經常會對不同的瀏覽器做一些相容性處理，一般會在專案編譯過程中通過 PostCSS 的Autoprefixer來做一些瀏覽器字首的相容；

例如常見的對flex進行相容：

display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: flex;
複製程式碼

這些差異性正是由於瀏覽器的核心的不同而導致的。

瀏覽器核心可以分為兩部分：渲染引擎 和 JS引擎。

市面上常見瀏覽器核心有：Blink（Chrome、Opera）、Webkit（Safari）、Trident（IE）、Gecko（火狐）。

瀏覽器渲染過程

瀏覽器渲染機制

  • 解析HTML

這一步HTML Parser的主要作用是處理 HTML 標記並構建 DOM樹。將文字的HTML文件，提煉出關鍵資訊，巢狀層級的樹形結構，便於計算。同時會發出頁面渲染所需要的各種外部資源請求。

  • 計算樣式

瀏覽器將識別並載入所有的CSS樣式資訊與DOM樹進行合併，生成render tree。

  • 計算圖層佈局

頁面中所有元素的相對位置資訊、大小等資訊在這一步進行計算。

  • 繪製圖層

瀏覽器會根據DOM程式碼結果，把每一個頁面圖層轉化為畫素，並對所有的媒體檔案進行解碼。 wil-changecss屬性可以提升合成層，不影響其他元素繪製，感興趣可以瞭解一下，戳這裡

  • 整合圖層

最後瀏覽器會合併合各個圖層，將資料由 CPU 輸出給 GPU 最終繪製在螢幕上。 詳細瞭解可以戳這裡

細分渲染過程

瀏覽器渲染機制

  • **DOM Tree：**HTML Parser的主要作用是處理 HTML 標記並構建 DOM 下面給出一個簡單的html：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>html parse</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <section>
        <h1>html parse</h1>
        <img src="aa.jpg" alt="">
        <p>這是一段文字</p>
    </section>
    <script src="aa.js"></script>
</body>

</html>
複製程式碼

經過HTML Parser解析後DOM Tree大致如下圖：

瀏覽器渲染機制

  • CSSOM Tree: 解析css 其中包括（內聯樣式、外部樣式以及第三方樣式表），然後建立CSSOM樹。DOM Tree和 CSSOM Tree的構建是並行的。
  • Render Tree: CSSOM與DOM結合後，即得到render Tree

瀏覽器渲染機制
如果樣式表中有如下內容：

section p {
    display: none;
}
複製程式碼

則上圖中<p>將不會被構建，雖然DOM 樹中包含；

有如下內容：

section h1:after {
    content: 'asdf';
}
複製程式碼

則偽元素將會被新增到渲染樹中，雖然DOM樹中沒有；

ps:只有實際會被渲染在頁面中的元素 才會進入到render Tree中

  • 佈局渲染樹： 瀏覽器知道每個元素的相應樣式規則後，就開始計算佈局，也就是元素佔用多少空間，顯示在螢幕的哪個位置，此時的過程叫做layout，也叫reflow(迴流)

瀏覽器渲染機制

  • 繪製渲染樹： 瀏覽器會遍歷渲染樹，繪製每個節點，圖片會通過Image Decode將這些內容解析到記憶體當中；瀏覽器將圖層和圖塊從CPU傳送給GPU，GPU將多圖層進行合併（composite），然後將內容顯示在螢幕上。

總結：首先基於HTML構建DOM Tree，與CSSOM Tree結合，得到Render Tree，瀏覽器以Render Tree為藍本，計算佈局Layout，最後Paint繪製畫素資訊，顯示到螢幕上。

參考：

1.www.html5rocks.com/en/tutorial… 2.juejin.im/post/5a6547… 3.classroom.udacity.com/courses/ud8…

相關文章