瀏覽器渲染原理

瀏覽器向伺服器請求到了HTML文件後便開始解析，產物是DOM（文件物件模型），如果有css，會根據css生成CSSOM（CSS物件模型），然後再由DOM和CSSOM合併產生渲染樹，有了渲染樹，知道了所有節點的樣式，便根據這些節點以及樣式計算它們在瀏覽器中確切的大小和位置，這就是佈局。最後把節點繪製到瀏覽器上。

• css的載入和解析不會阻塞html文件的解析
• css的解析會阻塞js的執行，必須等到CSSOM生成後才能執行js
• js的執行會阻塞html文件的解析
• html一邊解析一邊顯示
• css必須完全解析完畢才能進入生成渲染樹環節

建立DOM樹—建立CSSOM樹—執行指令碼—生成渲染樹—生成佈局—繪製

重繪

當頁面元素樣式改變不影響元素在文件流中的位置時（如background-color，border-color，visibility），瀏覽器只會將新樣式賦予元素並進行重新繪製操作。

迴流

當改變的操作響應文件內容或者結構，或者元素位置時，就會觸發迴流。有以下幾種情況：

• DOM操作（對元素的增刪改、順序變化等）
• 內容變化，包括表單區域內的文字變化
• css屬性的更改或者重新計算
• 增刪樣式表內容
• 修改class屬性
• 瀏覽器視窗變化（滾動或縮放）
• 偽類樣式啟用（：hover等）

瀏覽器優化渲染

瀏覽器本身能夠進行優化，儘可能減少重繪和迴流。
一個position為absolute或fixed的元素更改，只會影響本身及子元素，而static元素則會影響後面所有元素。
JavaScript執行時，瀏覽器會快取所有變化，然後一次性全部繪製。（讀取元素屬性會引起強制迴流）。

我們可以進行的優化：
樣式表放在head標籤中，指令碼放在body結束前。
簡化並優化css選擇器。（選擇器是從右到左匹配）
DOM節點儲存在一個變數中，避免重複獲取。
修改元素樣式時，更改其class屬性更好。