>[danger]瀏覽器拿到html樹到渲染是什么樣的？ 當瀏覽器接收到 HTML 文件后，它會按照以下步驟將其轉化為可視化的網頁： 1. **解析 HTML**：瀏覽器使用解析器將 HTML 代碼解析成 DOM（文檔對象模型）樹。DOM 樹是一個以層級結構表示 HTML 文檔的對象樹，它將 HTML 元素及其屬性、文本內容等表示為節點，這些節點之間具有父子關系。 2. **構建 CSSOM**：在解析 HTML 的同時，瀏覽器還會構建 CSSOM（CSS 對象模型）。CSSOM 是表示 CSS 樣式信息的對象樹，它包含了樣式規則、選擇器和對應的屬性值。瀏覽器會根據 CSSOM 將樣式應用到 DOM 樹上的相應元素。 3. **創建渲染樹**：瀏覽器將 DOM 樹和 CSSOM 結合起來，創建渲染樹（Render Tree）。渲染樹只包含需要顯示的元素，例如可見的 HTML 元素和應用了樣式的元素，而不包含隱藏的元素或不可見的元素（如`display: none`）。 4. **布局（回流）**：瀏覽器會計算每個渲染樹節點的幾何信息，例如位置、大小等，并確定它們在屏幕上的精確位置。這個過程稱為布局或回流（Layout or Reflow）。當布局發生變化時，瀏覽器需要重新計算并更新渲染樹和頁面的幾何信息。 5. **繪制**：瀏覽器使用渲染樹和布局信息進行繪制，將每個節點轉換為屏幕上的實際像素。這個過程稱為繪制（Painting）。 6. **合成與顯示**：瀏覽器會將繪制好的圖像發送給 GPU（圖形處理單元），由 GPU 加速合成并顯示在屏幕上。GPU 能夠更高效地處理圖像合成，提高頁面的渲染性能。 總結起來，從瀏覽器拿到 HTML 樹到最終渲染的過程包括**解析 HTML、構建 CSSOM、創建渲染樹、布局、繪制以及合成與顯示**。這個過程是瀏覽器將靜態的 HTML 和 CSS 轉化為用戶可見的網頁的關鍵步驟。