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

zhaochunqi 發布于2019-08-20 15:06 / 1972人閱讀

摘要：瀏覽器的整體渲染過程構建當拿到一個文件，它是如何構建出樹的呢瀏覽器會根據尖括號識別出標簽，每一個標簽都有和，其中的文本也會被解析出來這些開始結束將會以棧的方式，進行規則匹配，構建出間的層級關系。

瀏覽器的整體渲染過程 構建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翻譯成像素點

參考：

優達的網站性能優化

云服務器 GPU云服務器 jsp 瀏覽器渲染云渲染平臺視頻渲染代渲染 3d渲染

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/82001.html

簡說優化關鍵渲染路徑

摘要：當解析被阻止時，這里，和會同時下載，所以關鍵路徑長度仍為如何縮短關鍵呈現路徑長度瀏覽器會有并行加載資源數的限制，如果網頁很大，會需要來回多次獲取資源。所以要根據情況合理控制文件資源大小參考優達的網站性能優化回顧關鍵渲染路徑 showImg(https://segmentfault.com/img/bVKDWG?w=319&h=599); 簡說瀏覽器渲染－－關鍵渲染路徑渲染性能優化...

ShevaKuilin 2019-08-29 12:14 評論0 收藏0
簡說優化關鍵渲染路徑

摘要：當解析被阻止時，這里，和會同時下載，所以關鍵路徑長度仍為如何縮短關鍵呈現路徑長度瀏覽器會有并行加載資源數的限制，如果網頁很大，會需要來回多次獲取資源。所以要根據情況合理控制文件資源大小參考優達的網站性能優化回顧關鍵渲染路徑 showImg(https://segmentfault.com/img/bVKDWG?w=319&h=599); 簡說瀏覽器渲染－－關鍵渲染路徑渲染性能優化...

fjcgreat 2019-08-20 15:08 評論0 收藏0
簡說優化關鍵渲染路徑

摘要：當解析被阻止時，這里，和會同時下載，所以關鍵路徑長度仍為如何縮短關鍵呈現路徑長度瀏覽器會有并行加載資源數的限制，如果網頁很大，會需要來回多次獲取資源。所以要根據情況合理控制文件資源大小參考優達的網站性能優化回顧關鍵渲染路徑 showImg(https://segmentfault.com/img/bVKDWG?w=319&h=599); 簡說瀏覽器渲染－－關鍵渲染路徑渲染性能優化...

BenCHou 2019-08-01 16:31 評論0 收藏0
簡說瀏覽器渲染－－關鍵渲染路徑

摘要：瀏覽器的整體渲染過程構建當拿到一個文件，它是如何構建出樹的呢瀏覽器會根據尖括號識別出標簽，每一個標簽都有和，其中的文本也會被解析出來這些開始結束將會以棧的方式，進行規則匹配，構建出間的層級關系。瀏覽器的整體渲染過程 showImg(https://segmentfault.com/img/bVKDWG?w=319&h=599); 構建DOM 當拿到一個html文件，它是如何構建出do...

fancyLuo 2019-08-29 12:13 評論0 收藏0
簡說瀏覽器渲染－－關鍵渲染路徑

摘要：瀏覽器的整體渲染過程構建當拿到一個文件，它是如何構建出樹的呢瀏覽器會根據尖括號識別出標簽，每一個標簽都有和，其中的文本也會被解析出來這些開始結束將會以棧的方式，進行規則匹配，構建出間的層級關系。瀏覽器的整體渲染過程 showImg(https://segmentfault.com/img/bVKDWG?w=319&h=599); 構建DOM 當拿到一個html文件，它是如何構建出do...

xcold 2019-08-01 16:30 評論0 收藏0