WEB 是如何工作的

是兄弟節點，在 DOM 樹的構建過程中，當前節點所有的子節點全都構建完成後才會構建下一兄弟節點

構建 CSSOM 樹

在上面的 HTML 中，

裡有個外部樣式表 style.css，HTML 解析到這裡時會向服務器請求資源，得到這樣的資源：

body { 
 font-size: 16px}p { 
 font-weight: bold 
}span { 
 color: red 
}p span { 
 display: none 
}img { 
 float: right 
}

和處理 HTML 類似，瀏覽器處理 CSS 構建了 CSSOM

構建渲染樹

前面已經構建了 DOM 樹和 CSSOM 樹，現在瀏覽器就把它們合併成一個渲染樹

在渲染樹的構建過程中，瀏覽器遍歷 DOM 樹，然後對應 CSSOM 樹給每個節點設置計算樣式（最終樣式），設置了 display: none 的節點，將會在渲染樹中移除

這樣，渲染樹就包含了頁面上所有可見的內容和它們的計算樣式

佈局、繪製

渲染樹只包含了內容和樣式，要放到瀏覽器窗口中，還需要計算它們在窗口裡的確切的位置和大小，這個過程叫做佈局，也稱為“自動重排”

瀏覽器從渲染樹的根節點開始遍歷，我們可以想象為有外向裡的過程，先確定外層的位置大小，在向裡層計算

佈局流程的輸出是一個“盒模型”，它會精確地捕獲每個元素在視口內的確切位置和尺寸：所有相對測量值都轉換為屏幕上的絕對像素

佈局完成後，瀏覽器會立即發出“Paint Setup”和“Paint”事件，將渲染樹中的每個節點轉換成屏幕上的實際像素，這一步通常稱為“繪製”或“柵格化”

重排和重繪

當 DOM 或 CSSOM 被修改時，會發生重排（Reflow），也就是把上面的步驟重新來一遍，這樣才能確定哪些像素需要在屏幕上進行重新渲染，這個過程也被叫做迴流

如果改變的屬性與元素的位置大小無關，比如背景顏色，那麼瀏覽器只會重新繪製那個元素，這個過程叫重繪（Repaint）

重排必然會引起重繪，重繪則不一定會重排

CSS、JS 阻塞

默認情況下，CSS 是阻塞渲染的資源，瀏覽器需要等 DOM 和 CSSDOM 都準備好之後才會渲染，注意，這裡說的是阻塞渲染，而不是阻塞 DOM 的構建，事實上 DOM 和 CSSDOM 的構建是可以同時進行的

構建 CSSOM 會阻塞它後面 JavaScript 語句的執行，而 JavaScript 語句的執行又會阻止 CSSOM 的構建，原因很簡單，因為 JavaScript 執行時可能會改變 CSSOM，同時進行會對性能產生影響

除非將 JavaScript 顯式聲明為異步，否則它會阻止構建 DOM，因為默認情況下，瀏覽器遇到