靈魂拷問：瀏覽器是如何將 HTML、CSS 和 JavaScript 在屏幕上渲染的呢？
其實，大致的過程是先構建 DOM 和 CSSOM 樹；
因此，我們需要確保儘快 ( 爲頁面優化留了口子 ) 將 HTML 和 CSS 都提供給瀏覽器。
→
DOM
由 HTML 文件構建 DOM 樹的過程大致爲：
字節 → 字符 → 令牌 ( token ) → 節點 → DOM
從一個具體的例子細細說來，假設 HTML 代碼爲：
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<link href="style.css" rel="stylesheet">
</html>
<body>
<p>Hello<span>web performance</span> students!</p>
<div><img src="awesome-photo.jpg"/></div>
</body>
瀏覽器會這樣處理該頁面：
- 轉換：瀏覽器從磁盤或網絡讀取 HTML 的原始字節，並根據文件的指定編碼 ( 例如 UTF-8 ) 將它們轉換成各個字符；
- token 化：瀏覽器將字符串轉換成 W3C HTML5 標準 規定的各種 token 如 “<html>”、"<body>" 等其它 尖括號內的字符串，每個 token 都具有特殊含義和一組規則；
- 詞法分析：發出的 token 轉換成定義其屬性和規則的 Node 節點對象；
- DOM 構建：最後，創建的 Node 節點鏈接在一個 樹數據結構內，即 DOM 樹 🌲
整個流程的最終輸出是頁面的 文檔對象模型 ( DOM )，瀏覽器對頁面進行的所有進一步處理都會用到它 👆
DOM 樹捕獲文檔標記的屬性和關係，但並未告訴我們元素在渲染後應呈現的外觀，這個嘛，就是 CSSOM 的事情了
CSSOM
與處理 HTML 時一樣，瀏覽器需要將收到的 CSS 規則轉換成它能理解和處理的東西 → CSSOM
CSS 字節轉換成字符，接着轉換成令牌和節點，最後鏈接到一個稱爲 “CSS 對象模型 ( CSSOM )” 的樹結構內：
CSSOM 爲何會具有樹結構呢？
上面兩步 瀏覽器 根據 HTML 和 CSS 輸入構建了 DOM 和 CSSOM 樹；
不過，它們都是獨立的對象，一個描述文檔內容，一個描述對文檔應用的樣式規則；
下一步，瀏覽器如要將它們合併在一起 ❤️
渲染樹（Render Tree）
爲構建渲染樹，瀏覽器大體上完成了下列工作：
- 從 DOM 樹的根節點開始遍歷每個可見節點：
- 某些節點不可見 ( 如 腳本標記、meta 標記 等 )，因爲它們不會體現在渲染輸出中，所以會被忽略；
- 某些節點通過 CSS 隱藏，因此在渲染樹中也會被忽略，如應用了
display: none的節點
- 對於每個可見節點，爲其找到適配的 CSSOM 規則並應用它們 咋個應用法
- Emit visible nodes with content and their computed styles
最終輸出的渲染同時包含了屏幕上的所有可見內容及其樣式信息；
有了渲染樹，瀏覽器就可以進入「佈局」階段了。
佈局（Layout）
到目前爲止，我們計算了哪些節點應該是可見的以及它們的計算樣式 ( Computed Style? )，但我們尚未計算它們在設備視口內的確切位置和大小 → 這，就是佈局 ( Layout ) 階段，也稱 “ 自動重排 ”
瀏覽器就從 渲染樹 的 根節點 開始遍歷，確定每個節點在網頁上的具體位置和大小，所有相對測量值都轉換爲屏幕上的絕對像素，最終輸出的一個 “ 盒模型 ”。
繪製（Paint）
現在，我們已經知道了 哪些節點可見、它們的樣式和幾何信息，所以可以將 渲染樹 中的每個節點轉換成屏幕上的實際像素了！