文章目錄
- 前言
- **1. HTTP請求與緩存處理**
- **緩存機制**
- ? 強緩存（Cache-Control / Expires）
- ? 協商緩存（Last-Modified / ETag）
- **2. 服務器響應與數據解析**
- **3. HTML DOM 構建**
- **4. CSSOM 構建**
- **5. 渲染樹（Render Tree）生成**
- **6. 布局（Layout / Reflow）**
- **7. 繪制（Painting）**
- **8. 合成（Compositing）與顯示**
- **總結：從請求到渲染的完整流程**
前言
HTTP請求與緩存、頁面渲染全流程
當用戶在瀏覽器輸入URL并按下回車，到頁面最終渲染到屏幕上，整個過程涉及多個關鍵步驟：
- HTTP請求與緩存處理
- 服務器響應與數據解析
- HTML DOM 構建
- CSSOM 構建
- 渲染樹（Render Tree）生成
- 布局（Layout/Reflow）
- 繪制（Painting）
- 合成（Compositing）與顯示
1. HTTP請求與緩存處理
瀏覽器在發起HTTP請求前，會先檢查緩存策略，以減少不必要的網絡請求。
緩存機制
? 強緩存（Cache-Control / Expires）
? 瀏覽器檢查Cache-Control（優先級更高）或Expires，判斷資源是否過期。
? 如果未過期，直接從內存緩存（Memory Cache）或磁盤緩存（Disk Cache）讀取，不發送HTTP請求。
? 示例：
```http
Cache-Control: max-age=3600 // 1小時內有效
Expires: Wed, 21 Oct 2025 07:28:00 GMT
```
? 協商緩存（Last-Modified / ETag）
? 如果強緩存失效，瀏覽器會向服務器發送請求，攜帶If-Modified-Since（基于Last-Modified）或If-None-Match（基于ETag）。
? 服務器檢查資源是否變化：
? 304 Not Modified：資源未變，瀏覽器繼續使用緩存。 ? 200 OK：資源已更新，返回新數據。
? 示例：
```http
Last-Modified: Wed, 21 Oct 2025 07:28:00 GMT
ETag: "33a64df551425fcc55e4d42a148795d9"
```
2. 服務器響應與數據解析
? 服務器返回HTTP Response，包含：
? 狀態碼（200 OK / 304 Not Modified / 404 Not Found）
? 響應頭（Content-Type、Cache-Control等）
? 響應體（HTML、CSS、JS等）
? 瀏覽器解析流程：
- 解析HTML → 構建DOM樹
- 解析CSS → 構建CSSOM樹
- 執行JS（可能阻塞DOM/CSSOM構建）
- 合并DOM + CSSOM → 生成Render Tree（渲染樹）
- 布局（Layout） → 計算元素位置
- 繪制（Paint） → 填充像素
- 合成（Composite） → 最終渲染到屏幕
3. HTML DOM 構建
? 解析HTML：
? 瀏覽器逐行讀取HTML，遇到<script>會暫停解析，執行JS（除非async/defer）。
? 解析完成后，生成DOM樹（Document Object Model）。
? DOM樹結構：
<html><head><title>Page</title></head><body><div>Hello</div></body>
</html>
↓
Document
├─ <html>
│ ├─ <head>
│ │ └─ <title>Page</title>
│ └─ <body>
│ └─ <div>Hello</div>
4. CSSOM 構建
? 解析CSS：
? 瀏覽器解析<style>、外部.css文件，生成CSSOM（CSS Object Model）。
? CSSOM是樹狀結構，決定元素的最終樣式（層疊、繼承、優先級）。
? 示例：
body { font-size: 16px; }
div { color: red; }
↓
CSSOM
├─ body { font-size: 16px; }
└─ div { color: red; }
5. 渲染樹（Render Tree）生成
? 合并DOM + CSSOM：
? 瀏覽器遍歷DOM樹，結合CSSOM，生成Render Tree（僅包含可見元素，如display: none不包含）。
? Render Tree = DOM + Computed Styles
? 示例：
Render Tree
├─ <html>
│ └─ <body>
│ └─ <div>Hello</div> (color: red, font-size: 16px)
6. 布局（Layout / Reflow）
? 計算元素位置：
? 瀏覽器計算每個節點的幾何信息（寬、高、位置）。
? 回流（Reflow）：布局變化（如窗口大小改變、DOM修改）會觸發重新計算。
? 優化：
? 避免頻繁修改DOM（使用DocumentFragment）。
? 使用transform代替top/left減少回流。
7. 繪制（Painting）
? 填充像素：
? 瀏覽器遍歷Render Tree，調用GPU繪制每個節點（顏色、邊框、陰影等）。
? 重繪（Repaint）：樣式變化但不影響布局（如color變化）僅觸發重繪。
? 優化：
? 減少復雜選擇器（如div > span + p）。
? 使用will-change提示瀏覽器優化繪制。
8. 合成（Compositing）與顯示
? GPU合成：
? 瀏覽器將不同層（如position: fixed、opacity）交給GPU合成。
? 最終渲染：合成后的圖像顯示在屏幕上。
? 優化：
? 使用transform和opacity觸發GPU加速（避免主線程計算）。
總結：從請求到渲染的完整流程
- HTTP請求 → 檢查緩存（強緩存/協商緩存）。
- 服務器響應 → 返回HTML/CSS/JS。
- 解析HTML → 構建DOM樹。
- 解析CSS → 構建CSSOM樹。
- 合并DOM+CSSOM → 生成Render Tree。
- 布局（Layout） → 計算元素位置。
- 繪制（Painting） → 填充像素。
- 合成（Compositing） → GPU渲染到屏幕。
關鍵優化點
? 緩存：合理設置Cache-Control、ETag減少請求。
? 減少DOM操作：避免頻繁回流/重繪。
? CSS優化：減少選擇器復雜度，使用transform/opacity。
? JS優化：async/defer避免阻塞DOM解析。
這樣，瀏覽器就能高效地從HTTP請求到最終渲染頁面！ 🚀
源碼分析)
)
