簡說瀏覽器渲染－－關鍵渲染路徑

瀏覽器的總體渲染過程

構建DOM

當拿到一個html文件，它是如何構建出dom樹的呢？

瀏覽器會根據尖括號識別出標籤，每個標籤都有StartTag和EndTag，其中的文本也會被解析出來

---

這些開始結束Tokens將會以棧的方式，進行規則匹配，構建出Nodes間的層級關係。

屬性也會被解析出來

網絡中的DOM

當你訪問一個網站的時候，你會發現頁面有時不是一會兒被渲染出來的， 當拿到一段html的時候，這段html便開始構建dom,下一段html可能還在網絡中穿梭，dom的這種即便構建的機智，給咱們帶來了很好的用戶體驗

---

構建CSSOM

CSSOM的建立

同html，css文件也會被解析成文檔模型，它有本身的一套規則，另外，他內部還有繼承機制，這裏暫跳過細節

阻塞的CSS

css是否是和html同樣，也是從網絡中獲取一點就解析一點呢？不是的，css中對於同一個元素的同一個樣式，若是選擇器權重相同，後面的樣式會覆蓋前面的樣式，若是是取到一點就解析一點，若是前面的資源加載慢，頁面就會以錯亂的樣式來渲染，因此，css是阻塞的。

構建Render Tree

Render Tree 其實就是DOM 和 CSSOM 的綜合，不過，display爲none的節點不會出如今渲染樹中：

Layout

佈局就是根據Render Tree中的樣式規則，計算出每一塊的實際寬高色值等樣式。
舉個栗子：

Print

將Layout翻譯成像素點

參考：

優達的網站性能優化