徹底搞清楚浏覽器渲染過程

一、概述

在分析浏覽器的渲染過程之前，我們先了解一下什麼是程序和線程：

（1）什麼是程序？

程序是CPU進行資源配置設定的基本機關

（2）什麼是線程？

線程是CPU排程的最小機關，是建立在程序的基礎上運作的機關，共享程序的記憶體空間。

那麼我們可以得出結論：

1、程序是會占用系統資源；2、一個程序内可以存在一個或者多個線程，這就是單線程和多線程；3、無論是單線程還是多線程都是在一個程序内。

部落格首發位址（sau交流學習社群）：https://www.mwcxs.top/page/567.html

二、多程序

從上圖中可知：

1、浏覽器是多程序

2、不同類型的标簽頁都會開啟一個新的程序

3、相同類型的标簽頁是會合并到一個程序

上圖中浏覽器的各個程序的主要作用：

1、浏覽器程序

（1）負責管理各個标簽頁的建立和銷毀

（2）負責浏覽器的頁面顯示和功能（前進，後退，收藏等）

（3）負責資源的管理與下載下傳

2、第三方插件程序

（1）負責每個第三方插件的使用，每個第三方插件使用時候都會建立一個對應的程序

3、GPU程序

（1）負責3D繪制和硬體加速

4、浏覽器渲染程序（咱們這回主要分析的）

1、浏覽器核心，主要負責HTML，CSS，JS等檔案的解析和執行

三、浏覽器核心

浏覽器核心就是浏覽器渲染程序，從接收下載下傳檔案後再到呈現整個頁面的過程，由浏覽器渲染程序負責，主要流程如下：

1、解析HTML檔案和CSS檔案，加載圖檔等資源檔案，渲染成使用者看到的頁面

2、執行解析js檔案腳本代碼

這裡主要講浏覽器頁面渲染過程，js腳本解析執行過程，可以看這篇文章：Javascript引擎執行的過程的了解--執行階段 ，是以本文的js解析的内容會省略

在該過程中浏覽器渲染程序會開啟多個線程協作完成，主要的線程以及作用如下：

1、GUI渲染線程

（1）負責解析HTML檔案建構DOM樹，解析CSS，結合DOM樹渲染成RenderObject樹，然後布局和繪制頁面

（2）當RenderObject樹需要更新樣式屬性時，即發生重繪（Repaint）；當RenderObject樹中的元素規則尺寸，布局或顯示隐藏等發生變化，即發生回流（reflow）。

2、JS引擎線程

3、時間出發線程

4、定時器觸發線程

5、異步Http請求線程

注：GUI渲染線程與JS引擎線程是互相排斥的，因為JS引擎線程在執行的過程中可能會發生重繪和回流，是以GUI渲染線程執行時候，JS引擎線程會被挂起，等待GUI渲染線程執行完畢之後，JS引擎線程執行時候同理。

3.1GUI渲染線程

首先看一張圖，圖如下

接下來我們主要分析GUI渲染線程執行的詳細過程：

1、解析HTML檔案，建構DOM樹，同時浏覽器主程序負責下載下傳CSS檔案

2、CSS檔案下載下傳完成，解析CSS檔案成樹形的資料結構，然後結合DOM樹合并成RenderObject樹

3、布局RenderObject樹，負責RenderObject樹中的元素的尺寸，位置等計算

4、繪制RenderObject樹，繪制頁面的像素資訊

5、浏覽器主程序将預設的圖層和複合圖層交給GPU程序，GPU程序再将各個圖層合成（conposite），最後顯示出頁面

注意：

1、預設圖層指的是出于普通文檔流的元素

2、複合圖層一般指的使用動畫執行或者<video><iframe><canvas><webgl>等元素，也可以使用z-index将層級高的元素變成複合圖層，使用複合圖層可以進行硬體加速，其原理是避免了預設圖層的重繪和回流，想了解更深入介意自行研究

了解GUI渲染線程的執行過程，我們可以根據原理進行渲染優化：

1、盡可能早的提前引入css檔案，例如在頭部引入css檔案。

2、盡可能早的加載css檔案中的引入的資源，例如自定義字型檔案，可以使用預加載，在link标簽中加入rel=“preload” as = “font”該元素屬性，不會造成渲染阻塞。

3、在DOM和CSS渲染之後加載js檔案，例如在尾部加載js檔案，或者使用該元素屬性defer和async，進行js問價異步加載，但是不同的浏覽器會有相容性問題。

四、總結

主要是介紹浏覽器的渲染過程，但是沒有分析js腳本檔案解析過程。

（一）浏覽器渲染程序包含1、解析HTML檔案和CSS檔案，加載圖檔等資源檔案，渲染成使用者看到的頁面；2、執行解析js檔案腳本代碼。

（二）整個過程浏覽器會開啟多個線程協作完成，包括：GUI渲染線程，JS引擎線程，事件觸發線程，定時器觸發線程，異步HTTP請求線程。

（三）其中GUI渲染線程和JS引擎線程是互相排斥的，因為JS引擎線程在執行的時候有可能會發生重繪和回流。

文中有錯誤的地方希望指出，共同進步