## HTML解析，構建DOM
整個渲染步驟中，HTML解析是第一步。
簡單的理解，這一步的流程是這樣的：**瀏覽器解析HTML，構建DOM樹。**
但實際上，在分析整體構建時，卻不能一筆帶過，得稍微展開。
解析HTML到構建出DOM當然過程可以簡述如下：
```
Bytes → characters → tokens → nodes → DOM
```
譬如假設有這樣一個HTML頁面：（以下部分的內容出自參考來源，修改了下格式）
```
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href="style.css" rel="stylesheet">
<title>Critical Path</title>
</head>
<body>
<p>Hello <span>web performance</span> students!</p>
<div><img src="awesome-photo.jpg"></div>
</body>
</html>
```
瀏覽器的處理如下：
:-: 
列舉其中的一些重點過程：
```
1. Conversion轉換：瀏覽器將獲得的HTML內容（Bytes）基于他的編碼轉換為單個字符
2. Tokenizing分詞：瀏覽器按照HTML規范標準將這些字符轉換為不同的標記token。每個token都有自己獨特的含義以及規則集
3. Lexing詞法分析：分詞的結果是得到一堆的token，此時把他們轉換為對象，這些對象分別定義他們的屬性和規則
4. DOM構建：因為HTML標記定義的就是不同標簽之間的關系，這個關系就像是一個樹形結構一樣
例如：body對象的父節點就是HTML對象，然后段略p對象的父節點就是body對象
```
最后的DOM樹如下：
:-: 
- Web 開發筆記
- 從輸入 URL 到頁面加載完成的過程中都發生了什么事情？
- 從瀏覽器接收url到開啟網絡請求線程
- 開啟網絡線程到發出一個完整的http請求
- 從服務器接收到請求到對應后臺接收到請求
- 后臺和前臺的http交互
- http的緩存
- 解析頁面流程
- HTML解析，構建DOM
- CSS解析，構建CSSOM
- 資源外鏈的下載
- CSS的可視化格式模型
- 包含塊（Containing Block）
- 控制框（Controlling Box）
- BFC（Block Formatting Context）
- IFC（Inline Formatting Context）
- 其它
- JS引擎解析過程
- JS的解釋階段
- JS的預處理階段
- JS的執行階段
- 回收機制
- 參考資料
- JavaScript模塊化編程
- AMD
- requireJS
- CommonJS
- UMD
- ES6模塊
- 參考資料
- 使用 JavaScript 實現一門編程語言
- 如何使用 JavaScript 實現一門編程語言(1) —— 前言
- 如何使用 JavaScript 實現一門編程語言(2) —— 編寫一個解析器
- 如何使用 JavaScript 實現一門編程語言(3) —— Input stream
- 如何使用 JavaScript 實現一門編程語言(4) —— Token stream
- 如何使用 JavaScript 實現一門編程語言(5) —— AST
- 如何使用 JavaScript 實現一門編程語言(6) —— Interpreter
- 完整代碼
- 參考資料
- 前端布局概論
- 參考資料
- Windows 筆記
- 錯誤解決
- win10應用商店無法登錄提示0x80070426解決方法
- 使用技巧
- 設置 Hyper-V 和 VMware 共存
- Powershell
- WSL