最近在學習前端的性能優化，有必要了解一下頁面的渲染流程，以便對症下藥，找出性能的瓶頸所在。以下是我看到的一些東西，分享給大家。
參考：Understanding the renderer
頁面的渲染有以下特點：•單線程事件輪詢
•定義明確、連續、操作有序（HTML5）
•分詞和構建DOM樹
•請求資源並預加載
•構建渲染樹並繪製頁面
具體來說：當我們從網絡上得到HTML的相應字節時，DOM樹就開始構建了。由瀏覽器更新UI的線程負責。當遇到以下情況時，DOM樹的構建會被阻塞：
•HTML的響應流被阻塞在了網絡中
•有未加載完的腳本
•遇到了script節點，但是此時還有未加載完的樣式文件
渲染樹構建自DOM樹，並且會被樣式文件阻塞。
由於是基於單線程的事件輪詢，即使沒有腳本和样式的阻塞，當這些腳本或樣式被解析、執行並且應用的時候，也會阻塞頁面的渲染。
一些不會阻塞頁面渲染的情況：•定義的defer屬性和async屬性的
•沒有匹配的媒體類型的樣式文件
•沒有通過解析器插入script節點或樣式節點
下面，通過一個例子來說明一下（完整的代碼） ：複製代碼