一、關鍵渲染流程

1. 解析 HTML → 生成 DOM 樹

   • 瀏覽器逐行解析 HTML，構建**DOM（文檔對象模型）**樹狀結構

   • 遇到?<link>?或?<style>?標簽時會暫停 HTML 解析，開始加載 CSS

2. 解析 CSS → 生成 CSSOM

   • 將 CSS 規則解析為**CSSOM（CSS 對象模型）**樹

   • 瀏覽器處理選擇器優先級（權重計算）、繼承和層疊規則

3. 合并 DOM + CSSOM → 構建渲染樹（Render Tree）

   • 結合 DOM 和 CSSOM，過濾不可見元素（如?display: none）

   • 保留可見節點及其計算后的樣式信息

4. 布局（Layout/Reflow）

   • 計算每個節點的幾何信息（位置、尺寸）

   • 確定視口（viewport）內元素的精確坐標

   • 首次布局稱為「回流」

5. 繪制（Painting）

   • 將布局結果轉換為屏幕上的像素

   • 分圖層繪制（如處理?z-index）

   • 可能觸發重繪（Repaint）

6. 合成（Compositing）

   • 將不同圖層合并為最終界面

   • 利用 GPU 加速處理動畫等效果

---

二、CSS 解析細節

1. 選擇器匹配

   • 瀏覽器從右向左匹配選擇器（優化性能）

   • 例：div .box a?先查找?<a>?標簽，再向上匹配

2. 層疊規則

   • 優先級順序：!important?> 內聯樣式 > ID > 類/偽類 > 標簽

   • 相同權重時，后定義的樣式覆蓋前者

3. 繼承機制

   • 部分屬性（如?font-family,?color）會繼承到子元素

   • 顯式設置?inherit?可強制繼承

---

三、性能優化要點

1. 減少回流（Layout Thrashing）

   • 避免頻繁讀取布局屬性（如?offsetWidth）

   • 使用?transform/opacity?等觸發合成層（跳過布局和繪制）

2. 選擇器優化

   • 避免過度嵌套（如?.nav ul li a）

   • 減少通用選擇器?*?的使用

3. 渲染阻塞

   • <link>?標簽默認會阻塞渲染，可使用?media?屬性優化加載

   • 關鍵 CSS 可內聯以加速首屏渲染

---

四、調試工具

1. Chrome DevTools：

   • Performance 面板：分析完整渲染流程

   • Layers 面板：查看合成層信息

   • Rendering 選項卡：高亮重繪區域

---

總結流程圖

復制

HTML解析 → DOM樹↓
CSS解析 → CSSOM → 合并 → 渲染樹 → 布局 → 繪制 → 合成 → 屏幕顯示