成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

BenCHou / 1924人閱讀

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

回顧 關(guān)鍵渲染路徑

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

渲染性能優(yōu)化需要關(guān)注的關(guān)鍵點(diǎn)

減少資源請求的字節(jié)數(shù)

減少關(guān)鍵資源的數(shù)量

縮短關(guān)鍵呈現(xiàn)路徑的長度

減少資源請求的字節(jié)數(shù)

三個主要的方法：

代碼瘦身，如：去注釋

壓縮

緩存

減少關(guān)鍵資源的數(shù)量 什么是關(guān)鍵資源？

會阻塞頁面渲染的資源，這些資源會應(yīng)用在關(guān)鍵呈現(xiàn)路徑中。


html是第一個關(guān)鍵資源，style.css會應(yīng)用于CSSOM的構(gòu)建，是第二個關(guān)鍵資源，app.js會阻塞DOM的構(gòu)建，也屬于關(guān)鍵資源


這里，因?yàn)閖s是異步的，不會阻塞關(guān)鍵呈現(xiàn)路徑，不屬于關(guān)鍵資源，所以共有2個關(guān)鍵資源

如何減少關(guān)鍵資源的數(shù)量

css會阻塞呈現(xiàn)，并且會阻止之行js,如果CSSOM不構(gòu)建，就無法構(gòu)建Render Tree.

其實(shí)內(nèi)聯(lián)樣式對渲染性能很友好，但是為了樣式的重用，和讀寫分離，往往不予采用，場景適合，能用內(nèi)聯(lián)便用內(nèi)聯(lián)。

把媒介查詢放在html的媒體元素中，可以根據(jù)情況加載樣式資源，避免了不必要的資源的加載。比如：小屏只加載小屏資源，橫屏資源 @media all and (orientation : landscape) { h2{color:red;}/橫屏?xí)r字體紅色/｝，可以為更需要的資源騰出空間...

js會阻塞DOM的構(gòu)建，
我們一半會推遲js，或者使用異步j(luò)s.

縮短關(guān)鍵呈現(xiàn)路徑的長度 什么是鍵呈現(xiàn)路徑長度？

關(guān)鍵呈現(xiàn)路徑長度就是取資源的次數(shù)

這里關(guān)鍵路徑長度和關(guān)鍵資源數(shù)一致，都為2.


瀏覽器有很智能的欲加載器，他會在接收到文檔后偷瞄文檔中需要哪些資源，如果發(fā)現(xiàn)了要加載的資源，當(dāng)解析被阻塞時(shí)，他就會盡可能多地去加載這些資源。當(dāng)解析被阻止時(shí)，這里，css和js會同時(shí)下載，所以關(guān)鍵路徑長度仍為2

如何縮短關(guān)鍵呈現(xiàn)路徑長度？

瀏覽器會有并行加載資源數(shù)的限制，如果網(wǎng)頁很大，會需要來回多次獲取資源。
所以要根據(jù)情況合理控制文件資源大小

參考

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

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/50578.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

  • 簡說瀏覽器渲染－－關(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...

    fancyLuo 評論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條評論

BenCHou

男|高級講師

TA的文章

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