今天要來介紹關於瀏覽器是怎麼將程式轉換為網頁內容。

渲染流水線

瀏覽器在將 HTML、CSS、JavaScript 轉換為我們目前看到的網頁內容，並顯示在螢幕上。這樣的過程稱為 渲染流水線 ，以下為渲染步驟：

1. 構建 DOM樹 ：

   1. 瀏覽器解析 HTML 文檔
   2. 創建一個稱為 DOM （文檔對象模型）的樹狀結構
      • 用來表示網頁的結構與層次關係。

2. 構建 CSSOM樹 ：

   1. 瀏覽器解析 CSS 文件
   2. 建立一個稱為 CSSOM （CSS對象模型）的樹狀結構
      • 用來表示網頁的所有樣式信息。

3. 合併 DOM 和 CSSOM ：瀏覽器將 DOM樹 和 CSSOM樹 合併成一個結構。

   • 此結構稱為 渲染樹 （Render Tree）
     • 用來表示HTML元素和相關聯的樣式信息

4. 佈局（Layout） ：瀏覽器根據 渲染樹 計算每個元素在頁面上的位置和大小。

5. 繪製（Painting） ：根據計算的位置和大小，瀏覽器開始繪製每個元素。

6. 合成（Compositing） ：瀏覽器將所有繪製的元素組合在一起，建立我們所看見的畫面。

   • 瀏覽器使用 圖層（layers） 的概念來加速這一過程，這樣在動畫和滾動等情況下可以更高效地進行合成。
7. • 重排（Reflow） 和 重繪（Repaint） ：如果某個元素的樣式發生變化，瀏覽器將需要重新執行
     • 佈局
     • 繪製
     • 合成
   • 重排（Reflow） ：重新執行 佈局（Layout） ，重新渲染的步驟為：
     1. 佈局
     2. 繪製
     3. 合成
   • 重繪（Repaint） ：重新執行 繪製（Painting） ，重新渲染的步驟為：
     1. 繪製
     2. 合成

因為渲染的順序（佈局 -> 繪製 -> 合成）是固定的，因此我們可以歸納出， 重排必定重繪，但重繪不會重排 。