国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

簡說瀏覽器渲染－－關(guān)鍵渲染路徑

fancyLuo / 3115人閱讀

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

瀏覽器的整體渲染過程 構(gòu)建DOM 當(dāng)拿到一個html文件，它是如何構(gòu)建出dom樹的呢？

瀏覽器會根據(jù)尖括號識別出標(biāo)簽，每一個標(biāo)簽都有StartTag和EndTag，其中的文本也會被解析出來

這些開始結(jié)束Tokens將會以棧的方式，進(jìn)行規(guī)則匹配，構(gòu)建出Nodes間的層級關(guān)系。

屬性也會被解析出來

網(wǎng)絡(luò)中的DOM

當(dāng)你訪問一個網(wǎng)站的時(shí)候，你會發(fā)現(xiàn)頁面有時(shí)不是一下子被渲染出來的， 當(dāng)拿到一段html的時(shí)候，這段html便開始構(gòu)建dom,下一段html可能還在網(wǎng)絡(luò)中穿梭，dom的這種即使構(gòu)建的機(jī)智，給我們帶來了很好的用戶體驗(yàn)

構(gòu)建CSSOM CSSOM的創(chuàng)建

同html，css文件也會被解析成文檔模型，它有自己的一套規(guī)則，另外，他內(nèi)部還有繼承機(jī)制，這里暫跳過細(xì)節(jié)

阻塞的CSS

css是不是和html一樣，也是從網(wǎng)絡(luò)中獲取一點(diǎn)就解析一點(diǎn)呢？不是的，css中對于同一個元素的同一個樣式，如果選擇器權(quán)重相同，后面的樣式會覆蓋前面的樣式，如果是取到一點(diǎn)就解析一點(diǎn)，如果前面的資源加載慢，頁面就會以錯亂的樣式來渲染，所以，css是阻塞的。

構(gòu)建Render Tree

Render Tree 其實(shí)就是DOM 和 CSSOM 的綜合，不過，display為none的節(jié)點(diǎn)不會出現(xiàn)在渲染樹中：

Layout

布局就是根據(jù)Render Tree中的樣式規(guī)則，計(jì)算出每一塊的實(shí)際寬高色值等樣式。
舉個栗子：

Print

將Layout翻譯成像素點(diǎn)

參考：

優(yōu)達(dá)的網(wǎng)站性能優(yōu)化

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/111750.html

相關(guān)文章

  • 簡說 優(yōu)化關(guān)鍵渲染路徑

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

    ShevaKuilin 評論0 收藏0

  • 簡說 優(yōu)化關(guān)鍵渲染路徑

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

    fjcgreat 評論0 收藏0

  • 簡說 優(yōu)化關(guān)鍵渲染路徑

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

    BenCHou 評論0 收藏0

  • 簡說瀏覽器渲染－－關(guān)鍵渲染路徑

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

    zhaochunqi 評論0 收藏0

  • 簡說瀏覽器渲染－－關(guān)鍵渲染路徑

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

    xcold 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<