瀏覽器渲染過程
阿新 • • 發佈：2018-12-26
瀏覽器的渲染分為五個步驟：
- 處理HTML標記並構建DOM樹
- 處理CSS標記並構建 CSSOM樹(CSS Object Model)
- 將CSSOM和DOM合併成一個渲染樹
- 根據渲染樹來佈局，以計算每個節點的幾何資訊
- 將各個節點繪製到螢幕上
這五個步驟不一定一次性順序完成。如果DOM或者CSSOM被修改，以上過程需要重複執行，這樣才能計算出哪些畫素需要在螢幕上進行重新渲染。實際頁面中，CSS與JavaScript往往會多次修改DOM和CSSOM。
阻塞渲染：
現代瀏覽器總是並行載入資源。比如，當HTML解析器被指令碼阻塞時，解析器雖然會停止構建DOM，但仍會識別該指令碼後的資源，並進行預載入。
- 預設情況下，CSS被視為阻塞渲染的資源，這意味著瀏覽器將不會渲染任何已處理的內容，直至CSSOM構建完畢。
- JavaScript不僅可以讀取和修改DOM屬性，還可以讀取和修改CSSOM屬性。
也就是說，存在阻塞的CSS資源時，瀏覽器會延遲JavaScript的執行和DOM構建。另外：
- 當瀏覽器遇到一個script標籤時，DOM構建將暫停，直至指令碼執行完成。
- JavaScript可以查詢和修改DOM與CSSOM。
- CSSOM構建時，JavaScript執行將暫停，直至CSSOM就緒。
所以，script標籤的位置很重要。實際使用中可以遵循下面的原則：
- CSS優先：引入順序上，CSS資源優先於JavaScript資源。
- JavaScript應儘量減少影響DOM的構建。