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

資訊專欄INFORMATION COLUMN

現(xiàn)代瀏覽器性能優(yōu)化-CSS篇

flyer_dev / 1343人閱讀

摘要：當(dāng)瀏覽器發(fā)現(xiàn)時(shí)，就會(huì)下載，解析，然后更新，這時(shí)會(huì)引起一次重繪。這個(gè)過(guò)程中，有兩個(gè)非常嚴(yán)重的問(wèn)題。如果你對(duì)異步加載的方案感興趣，歡迎留言與我討論擴(kuò)展閱讀瀏覽器的工作原理關(guān)于你應(yīng)該知道些什么，和它們?cè)谥械膬?yōu)先級(jí)

我來(lái)填坑了，CSS篇終于寫(xiě)出來(lái)了，如果你沒(méi)看過(guò)前面的JS篇，可以在這里觀看。

眾所周知，CSS的加載會(huì)阻塞瀏覽器渲染或是引起瀏覽器重繪，目前業(yè)界普遍推薦把CSS放到中，防止在CSS還沒(méi)加載完，DOM就已經(jīng)繪制出來(lái)了，造成CSS加載完成后的重繪。那在現(xiàn)代瀏覽器中我們有沒(méi)有辦法提高首屏渲染速度那？

你是不是經(jīng)常在第一次打開(kāi)某個(gè)網(wǎng)站的時(shí)候看到這種情況，本來(lái)的頁(yè)面是這樣的

實(shí)際上剛加載出來(lái)的是這樣的

字體文件沒(méi)加載出來(lái)，或者加載的太慢了

理解CSS解析過(guò)程

以下面這段HTML為例，解釋一遍CSS加載解析的過(guò)程。



  
  


  
Text

瀏覽器自上而下讀取HTML文檔，當(dāng)發(fā)現(xiàn)headStyle.css的時(shí)候，停止Parser HTML，開(kāi)始下載headStyle.css，解析headStyle.css的過(guò)程中發(fā)現(xiàn)字體文件webfont.woff2，開(kāi)始下載webfont.woff2，并繼續(xù)解析css生成CSSStyleSheet。解析完畢后，繼續(xù)Parser HTML，當(dāng)發(fā)現(xiàn)p標(biāo)簽時(shí)，會(huì)將p標(biāo)簽結(jié)合當(dāng)前的CSSStyleSheet展示出來(lái)，此時(shí)用戶屏幕中已經(jīng)有p標(biāo)簽的內(nèi)容了。當(dāng)瀏覽器發(fā)現(xiàn)bodyEndStyle.css時(shí)，就會(huì)下載headStyle.css，解析CSS，然后更新CSSStyleSheet，這時(shí)會(huì)引起一次重繪。當(dāng)字體下載完畢的時(shí)候也會(huì)引起一次重繪。

這個(gè)過(guò)程中，有兩個(gè)非常嚴(yán)重的問(wèn)題。一、如果headStyle.css文件很大，瀏覽器需要解析很多行CSS后才能還有個(gè)字體文件需要下載，其實(shí)此時(shí)已經(jīng)很晚了，字體下載時(shí)間稍長(zhǎng)一點(diǎn)，就會(huì)出現(xiàn)我前面截圖提到的問(wèn)題。二、bodyEndStyle.css中如果存在p標(biāo)簽對(duì)應(yīng)的樣式，那p標(biāo)簽的樣式會(huì)在bodyEndStyle.css解析完成后，改變一次樣式，很影響體驗(yàn)。

如何解決這些問(wèn)題那？其中也會(huì)用到一些JS篇中提到的點(diǎn)，如果沒(méi)看過(guò)，建議先看看。

優(yōu)化核心依舊是減少下載時(shí)間

JS篇中的預(yù)先解析DNS（dns-prefetch）依舊適用，提前解析CSS文件所在域名的DNS。

Preload

因?yàn)镃SS已經(jīng)在head中，我們不需要為css加preload屬性了，但是css中用到的字體文件，一定要在所有css之前proload上。

首頁(yè)CSS內(nèi)聯(lián)，非必要CSS異步加載

首頁(yè)用到的CSS內(nèi)聯(lián)寫(xiě)在中，其余CSS均采用異步加載，可以采用這種自己實(shí)現(xiàn)的加載CSS的方法，在合適的需要時(shí)加載需要的css

function LoadStyle(url) {
  try {
    document.createStyleSheet(url)
  } catch(e) {
    var cssLink = document.createElement("link");
    cssLink.rel = "stylesheet";
    cssLink.type = "text/css";
    cssLink.href = url;
    var head = document.getElementsByTagName("head")[0];
    head.appendChild(cssLink)
  }
}

如果你使用webpack，那就更輕松了，使用import函數(shù)，大致如下

// 在a.js模塊中直接引入css
import "style.css"
// 在需要a.js模塊的地方
improt("path-of-a.js").then(module => {})

webpack打包后，其實(shí)是把style.css打包進(jìn)了a.js，在異步加載a.js的時(shí)候，會(huì)將style.css中的代碼插入haed標(biāo)簽中。

終極完美結(jié)構(gòu) 



  
  Faster

在JS篇)中，我已經(jīng)解釋過(guò)這套結(jié)構(gòu)中JS的執(zhí)行順序了，本篇只是加入了CSS和字體。至此，我心中終極完美的頁(yè)面HTML結(jié)構(gòu)就是這樣了。

如果你對(duì)異步加載CSS的方案感興趣，歡迎留言與我討論！

擴(kuò)展閱讀

瀏覽器的工作原理

關(guān)于Preload, 你應(yīng)該知道些什么？

Preload，Prefetch 和它們?cè)?Chrome 之中的優(yōu)先級(jí)

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/51657.html

相關(guān)文章

  • 現(xiàn)代瀏覽器性能優(yōu)化-CSS篇

    摘要：當(dāng)瀏覽器發(fā)現(xiàn)時(shí)，就會(huì)下載，解析，然后更新，這時(shí)會(huì)引起一次重繪。這個(gè)過(guò)程中，有兩個(gè)非常嚴(yán)重的問(wèn)題。如果你對(duì)異步加載的方案感興趣，歡迎留言與我討論擴(kuò)展閱讀瀏覽器的工作原理關(guān)于你應(yīng)該知道些什么，和它們?cè)谥械膬?yōu)先級(jí) 我來(lái)填坑了，CSS篇終于寫(xiě)出來(lái)了，如果你沒(méi)看過(guò)前面的JS篇，可以在這里觀看。 眾所周知，CSS的加載會(huì)阻塞瀏覽器渲染或是引起瀏覽器重繪，目前業(yè)界普遍推薦把CSS放到中，防止在CS...

    CoffeX 評(píng)論0 收藏0

  • 現(xiàn)代瀏覽器性能優(yōu)化-CSS篇

    摘要：當(dāng)瀏覽器發(fā)現(xiàn)時(shí)，就會(huì)下載，解析，然后更新，這時(shí)會(huì)引起一次重繪。這個(gè)過(guò)程中，有兩個(gè)非常嚴(yán)重的問(wèn)題。如果你對(duì)異步加載的方案感興趣，歡迎留言與我討論擴(kuò)展閱讀瀏覽器的工作原理關(guān)于你應(yīng)該知道些什么，和它們?cè)谥械膬?yōu)先級(jí) 我來(lái)填坑了，CSS篇終于寫(xiě)出來(lái)了，如果你沒(méi)看過(guò)前面的JS篇，可以在這里觀看。 眾所周知，CSS的加載會(huì)阻塞瀏覽器渲染或是引起瀏覽器重繪，目前業(yè)界普遍推薦把CSS放到中，防止在CS...

    scq000 評(píng)論0 收藏0

  • 王下邀月熊_Chevalier的前端每周清單系列文章索引

    摘要：感謝王下邀月熊分享的前端每周清單，為方便大家閱讀，特整理一份索引。王下邀月熊大大也于年月日整理了自己的前端每周清單系列，并以年月為單位進(jìn)行分類，具體內(nèi)容看這里前端每周清單年度總結(jié)與盤(pán)點(diǎn)。 感謝 王下邀月熊_Chevalier 分享的前端每周清單，為方便大家閱讀，特整理一份索引。 王下邀月熊大大也于 2018 年 3 月 31 日整理了自己的前端每周清單系列，并以年/月為單位進(jìn)行分類，具...

    2501207950 評(píng)論0 收藏0

  • 前端每周清單半年盤(pán)點(diǎn)之 CSS 篇

    摘要：前端每周清單專注前端領(lǐng)域內(nèi)容，以對(duì)外文資料的搜集為主，幫助開(kāi)發(fā)者了解一周前端熱點(diǎn)分為新聞熱點(diǎn)開(kāi)發(fā)教程工程實(shí)踐深度閱讀開(kāi)源項(xiàng)目巔峰人生等欄目。它能夠?yàn)槲覀兲峁╊愃朴陬A(yù)處理器命名空間等多方面的輔助。 前端每周清單專注前端領(lǐng)域內(nèi)容，以對(duì)外文資料的搜集為主，幫助開(kāi)發(fā)者了解一周前端熱點(diǎn)；分為新聞熱點(diǎn)、開(kāi)發(fā)教程、工程實(shí)踐、深度閱讀、開(kāi)源項(xiàng)目、巔峰人生等欄目。歡迎關(guān)注【前端之巔】微信公眾號(hào)（ID：f...

    RaoMeng 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<