iT邦幫忙

DAY 8
0

30 天學會 Web 前端效能優化系列 第 8

[30 天學會 Web 前端效能優化] 8. 瀏覽器是如何建構 DOM 的?

讓我們正式進入瀏覽器內部運作的議題。

前情提要

HTML5 的 Spec 裡面,對於建構 DOM 的過程有非常詳細的指示,HTML5 之前的版本都是由各家瀏覽器自己決定如何解析 HTML Document ,HTML5 的出現解決了這樣混亂的情況。此篇文章講解的是 HTML5 規範的流程。

當瀏覽器發送 Request 向 Server 索取頁面時,Server 便會將 HTML Document 傳給瀏覽器,那麼瀏覽器接收到 Server 的 Response 之後,它會做什麼事情呢?

首先我們要了解,計算機的世界裡資料都是以二進位的形式儲存,因此起初瀏覽器接收到的 Response 是由一個 byte 、一個 byte 所構成的,為了正確解析,瀏覽器做的第一件事就是將這些 bytes 按照特定編碼(如 UTF-8)轉換成一個一個字元。

按照特定編碼轉換成一個一個字元後,瀏覽器就會開始進行 tokenizing 的動作,將 strings 轉成不同的 token ,我們以下面這份簡單的 HTML Document 為例:

        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <link href="style.css" rel="stylesheet">
      
      
        <p>Hello!</p>
        <div><img src="test.jpg"></div>
      

HTML Spec 裡都有定義每個 token 的意義以及規則,被包在 angle brackets 裡面的文字為 tag 。

Tokenization 的演算法很複雜,此演算法以 state machine 的方式表示。每一個 state 都會消耗 input stream 中一至多個字元,並且會根據這些字元更新下一個 state。

初始狀態(initial state)為「Data State」,遇到「<」這個字元,就會將狀態改變為「Tag Open Sate」,接著 consume 英文字母 a-z ,便會觸發「Start Tag Token」的創建,而改變成「Tag Name State」。遇到「>」這個字元後,當前的 token 就會被排出,返回至「Data State」,繼續往下重複上述動作。

最後結果用圖表示的話就是這樣:

Tokenizing 這個階段結束後,瀏覽器就會開始將這些 Token 轉換成 node object , node object 之間有關係(relationship)存在,這個關係是透過 Start Tag 以及 End Tag 來辨識的。(可以看上面的 token 圖)以這裡的 tag 為例,因為它在 Start Tag 底下,因此 為 的 child。

在 裡面我們可以看到它有三個 child ,分別為 <meta> 、 <link> 以及 <title> ,而 裡面有 <p> 跟 <div> 兩個 child , <div> 裡面有 <img> 。

把每一個 token 轉換成 node object 之後,就是所謂的 DOM(Document Object Model),如下圖:

如果有注意就會發現我在 img 這個 node 的旁邊特別標注它的 src 屬性,實際上 DOM 就是整份 HTML Document 的表現,因此每個 node object 都會包含它特有的屬性以及內容,例如 <img> 的 src 屬性。


上一篇
[30 天學會 Web 前端效能優化] 7. 瀏覽器做了哪些事? - High Level View
下一篇
[30 天學會 Web 前端效能優化] 9. flush early, flush often
系列文
30 天學會 Web 前端效能優化30

尚未有邦友留言

立即登入留言