瀏覽器是如何渲染網頁的《學如逆水行舟，不進則退》

五公里發表於2019-05-08
瀏覽器網頁

現在我們主要接觸的主流瀏覽器有：IE, FireFox, Safari, Chrome,Opera; 你真的瞭解它們嗎？

1. 瀏覽器的主要功能
  • 向伺服器發出請求，在瀏覽器視窗中展示你選擇的網路資源;（一般指HTML文件，也可以是PDF,圖片，或其他的型別）資源的位置由使用者使用的URL(統一資源標示符)指定。 瀏覽器解釋並顯示HTML檔案的方式是在HTML和CSS規範中指定的。這些規範由網路標準化組織W3C(全球資訊網聯盟)進行規定。
2. 瀏覽器的主要元件

瀏覽器的主要元件
瀏覽器的主要元件

  • 使用者介面：(包括位址列，前進/後退按鈕，書籤選單等)。除了瀏覽器主視窗顯示的各個部分都屬於使用者介面
  • 瀏覽器引擎：在使用者介面和呈現引擎之間傳送指令
  • 呈現引擎/渲染引擎/瀏覽器核心/排版引擎/解釋引擎：負責顯示請求的內容，並將解析後的內容顯示在瀏覽器螢幕上
  • 網路：用於網路呼叫，比如HTTP請求，其介面與平臺無關，併為所有平臺提供底層實現。
  • 使用者介面的後端：用於繪製基本的視窗小部件，比如組合框和視窗。其公開了與平臺無關的通用介面，而在底層 使用作業系統的使用者介面方法。
  • JavaScript直譯器：用於解析和執行JavaScript程式碼
主流瀏覽器	js引擎
IE -> Edge	JScript（IE3.0-IE8.0） / Chakra
Chrome		V8（大名鼎鼎）
Safari		Nitro（4-）
Firefox		SpiderMonkey（1.0-3.0）/ TraceMonkey（3.5-3.6）
Opera		Linear A（4.0-6.1）/ Linear B（7.0-9.2）
複製程式碼
  • 資料儲存：(持久層)；瀏覽器需要在硬碟上儲存各種資料，例如Cookie。HTML5定義了”網路資料庫“（完整且輕便的瀏覽器內資料庫）
3. 渲染引擎/瀏覽器核心解析
  • 預設情況下，呈現引擎可顯示HTML和XML文件與圖片，通過外掛(或瀏覽器擴充套件程式)顯示，eg:PDF檢視器外掛就可以顯示PDF文件。
  • 不同的瀏覽器瀏覽器核心不相同
主流瀏覽器	核心
IE -> Edge	trident->EdgeHTML
Chrome		webkit->blink
Safari		webkit
Firefox		Gecko
Opera		Presto->blink
複製程式碼
4.瀏覽器渲染基本流程
從網路層獲取請求文件的內容（內容的大小一般限制在8000個塊以內）--->
解析HTML構造DOM樹和CSSOM樹--->構建渲染樹(把DOM樹中的一些不可視元素去掉，
然後與CSSOM合成一棵render樹）--->渲染DOM樹佈局(計算出各個節點(元素)在螢幕的位置)
-->渲染樹繪製(瀏覽器根據渲染樹將頁面渲染到螢幕)
複製程式碼

瀏覽器渲染流程
瀏覽器渲染流程

(1). 解析HTML文件一邊邊構建DOM樹一邊構建CSS規則樹(CSSOM)

  • 解析HTML/XHTML文件時，將各標記逐個轉化成"內容樹"上的DOM節點，遇到css標籤或JS指令碼標籤就下載和解析（其中css是非同步下載同步執行）；

  • 在構建DOM樹過程中，當遇到css元素{包括外部CSS樣式以及內聯樣式}，瀏覽器會開啟一個非同步請求執行緒，在該執行緒上，瀏覽器會去請求相應的css檔案，並且根據該檔案去構建CSSOM樹(也叫css rule)，css的載入並不會導致html解析和渲染的停止，即不會阻塞dom樹的構建；該執行緒會阻塞 JavaScript引擎執行緒（即css後 面的js模組的解析會在css解析完畢後執行），因為js指令碼不僅可以讀取修改到dom，也可以讀取修改到cssom。故在js指令碼執前，browser必須保證到css檔案完全載入並解析完成，即cssom樹完全構建好。這就導致了js執行的延遲，也因此導致html解析和渲染延遲。（這就是css阻塞js執行，阻塞渲染的根本原因）

  • 構建DOM樹過程中，瀏覽器渲染和 JS 執行是共用一個執行緒，即單執行緒工作，多執行緒會產生渲染 DOM 衝突。如果遇到當遇到JS元素時，HTML解析器就會將控制權轉讓給JavaScript引擎執行緒，該執行緒會阻斷HTML解析器的執行，就阻塞了DOM樹的構建 當js載入並且執行完畢後，JavaScript引擎執行緒會將控制權還給HTML解析器，讓其去繼續構建dom樹。也就是說，如果你想首屏渲染的越快，就越不應該在首屏就載入 JS 檔案，這也是都建議將 script 標籤放在 body 標籤底部的原因。當然，並不是說 script 標籤必須放在底部，因為你可以給 script 標籤新增 defer 或者 async 屬性

  • JS檔案不只是阻塞DOM的構建，它會導致CSSOM也阻塞DOM的構建。原本DOM和CSSOM的構建是互不影響，井水不犯河水，但是一旦引入了JavaScript，CSSOM也開始阻塞DOM的構建，只有CSSOM構建完畢後，再恢復DOM樹構建。這是因為JavaScript不只是可以改DOM，它還可以更改樣式，也就是它可以更改CSSOM。因為不完整CSSOM是無法使用的，如果JavaScript想訪問CSSOM並更改它，那麼在執行JavaScript時，必須要能拿到完整的CSSOM。所以就導致了一個現象，如果瀏覽器尚未完成CSSOM的下載和構建，而我們卻想在此時執行指令碼，那麼瀏覽器將延遲指令碼執行和DOM構建，直至其完成CSSOM的下載和構建。也就是說，在這種情況下，瀏覽器會先下載和構建CSSOM，然後再執行JavaScript，最後在繼續構建DOM。

  • CSS規則樹中的元素是和 DOM 元素相對應的，但並非一一對應。非視覺化的 DOM 元素不會插入規則樹中，例如“head”元素。如果元素的 display 屬性值為“none”，那麼也不會顯示在規則樹中（但是 visibility 屬性值為“hidden”的元素仍會顯示）。有一些 DOM 元素對應多個視覺化物件。它們往往是具有複雜結構的元素，無法用單一的矩形來描述。

eg:DOM樹

DOM樹
DOM樹

eg:CSSOM樹

CSSOM樹
CSSOM樹

(2). 瀏覽器引擎通過 DOM 樹和CSS規則樹(CSSOM)生成一顆渲染樹(Rendering Tree)
  • 渲染樹是由DOM樹和CSSOM樹合成的；渲染樹的每一個節點都有自己的style樣式；渲染樹上沒有隱藏的節點，比如display：block和無樣式head節點，就不會在渲染樹上，因為這些節點不會呈現也不影響呈現；visibility:hidden會存在渲染樹，因為它佔有空間，會影響佈局）
    渲染樹
    渲染樹
(3). 渲染DOM樹佈局(reFlow 或 Layout)

通過 CSS 規則樹 匹配 DOM 樹每個節點分配一個應出現在螢幕上的確切座標，即進行定位座標和大小

(4). 繪製(paint)[呼叫作業系統Native GUI的API繪製]

呈現引擎會遍歷呈現樹，由使用者介面後端層將每個節點繪製出來。

5.面試常問
  • 瀏覽器渲染原理解析/瀏覽器渲染過程/瀏覽器怎麼載入頁面的？瀏覽器如果渲染過程中遇到CSS檔案/JS檔案怎麼處理？/dom樹和css樹是如何合併的？/瀏覽器的執行機制是什麼，什麼會造成渲染阻塞？如何優化
參考文章
瀏覽器執行機制參考文章

2019-05-05 18:42:17 星期日

相關文章