## 解析頁面流程
前面有提到http交互，那么接下來就是瀏覽器獲取到html，然后解析，渲染
**這部分很多都參考了網上資源，特別是圖片，參考了來源中的文章**
### 流程簡述
瀏覽器內核拿到內容后，渲染步驟大致可以分為以下幾步：
```
1. 解析HTML，構建DOM樹
2. 解析CSS，生成CSS規則樹
3. 合并DOM樹和CSS規則，生成render樹
4. 布局render樹（Layout/reflow），負責各元素尺寸、位置的計算
5. 繪制render樹（paint），繪制頁面像素信息
6. 瀏覽器會將各層的信息發送給GPU，GPU會將各層合成（composite），顯示在屏幕上
```
如下圖：
:-: 
- 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