現代瀏覽器性能優化-CSS篇

CoffeX 發布于2019-08-29 14:09 / 2300人閱讀

摘要：當瀏覽器發現時，就會下載，解析，然后更新，這時會引起一次重繪。這個過程中，有兩個非常嚴重的問題。如果你對異步加載的方案感興趣，歡迎留言與我討論擴展閱讀瀏覽器的工作原理關于你應該知道些什么，和它們在之中的優先級

我來填坑了，CSS篇終于寫出來了，如果你沒看過前面的JS篇，可以在這里觀看。

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

你是不是經常在第一次打開某個網站的時候看到這種情況，本來的頁面是這樣的

實際上剛加載出來的是這樣的

字體文件沒加載出來，或者加載的太慢了

理解CSS解析過程

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

Text

瀏覽器自上而下讀取HTML文檔，當發現headStyle.css的時候，停止Parser HTML，開始下載headStyle.css，解析headStyle.css的過程中發現字體文件webfont.woff2，開始下載webfont.woff2，并繼續解析css生成CSSStyleSheet。解析完畢后，繼續Parser HTML，當發現p標簽時，會將p標簽結合當前的CSSStyleSheet展示出來，此時用戶屏幕中已經有p標簽的內容了。當瀏覽器發現bodyEndStyle.css時，就會下載headStyle.css，解析CSS，然后更新CSSStyleSheet，這時會引起一次重繪。當字體下載完畢的時候也會引起一次重繪。

這個過程中，有兩個非常嚴重的問題。一、如果headStyle.css文件很大，瀏覽器需要解析很多行CSS后才能還有個字體文件需要下載，其實此時已經很晚了，字體下載時間稍長一點，就會出現我前面截圖提到的問題。二、bodyEndStyle.css中如果存在p標簽對應的樣式，那p標簽的樣式會在bodyEndStyle.css解析完成后，改變一次樣式，很影響體驗。

如何解決這些問題那？其中也會用到一些JS篇中提到的點，如果沒看過，建議先看看。

優化核心依舊是減少下載時間

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

Preload

因為CSS已經在head中，我們不需要為css加preload屬性了，但是css中用到的字體文件，一定要在所有css之前proload上。

首頁CSS內聯，非必要CSS異步加載

首頁用到的CSS內聯寫在中，其余CSS均采用異步加載，可以采用這種自己實現的加載CSS的方法，在合適的需要時加載需要的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函數，大致如下

// 在a.js模塊中直接引入css
import "style.css"

// 在需要a.js模塊的地方
improt("path-of-a.js").then(module => {})

webpack打包后，其實是把style.css打包進了a.js，在異步加載a.js的時候，會將style.css中的代碼插入haed標簽中。

終極完美結構




  
  Faster

在JS篇)中，我已經解釋過這套結構中JS的執行順序了，本篇只是加入了CSS和字體。至此，我心中終極完美的頁面HTML結構就是這樣了。

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

擴展閱讀

瀏覽器的工作原理

關于Preload, 你應該知道些什么？

Preload，Prefetch 和它們在 Chrome 之中的優先級

GPU云服務器云服務器 css優化性能優化優化系統性能網站性能優化

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

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

現代瀏覽器性能優化-CSS篇

摘要：當瀏覽器發現時，就會下載，解析，然后更新，這時會引起一次重繪。這個過程中，有兩個非常嚴重的問題。如果你對異步加載的方案感興趣，歡迎留言與我討論擴展閱讀瀏覽器的工作原理關于你應該知道些什么，和它們在之中的優先級我來填坑了，CSS篇終于寫出來了，如果你沒看過前面的JS篇，可以在這里觀看。眾所周知，CSS的加載會阻塞瀏覽器渲染或是引起瀏覽器重繪，目前業界普遍推薦把CSS放到中，防止在CS...

flyer_dev 2019-08-01 18:19 評論0 收藏0
現代瀏覽器性能優化-CSS篇

摘要：當瀏覽器發現時，就會下載，解析，然后更新，這時會引起一次重繪。這個過程中，有兩個非常嚴重的問題。如果你對異步加載的方案感興趣，歡迎留言與我討論擴展閱讀瀏覽器的工作原理關于你應該知道些什么，和它們在之中的優先級我來填坑了，CSS篇終于寫出來了，如果你沒看過前面的JS篇，可以在這里觀看。眾所周知，CSS的加載會阻塞瀏覽器渲染或是引起瀏覽器重繪，目前業界普遍推薦把CSS放到中，防止在CS...

scq000 2019-08-21 18:30 評論0 收藏0
王下邀月熊_Chevalier的前端每周清單系列文章索引

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

2501207950 2019-08-22 14:53 評論0 收藏0
前端每周清單半年盤點之 CSS 篇

摘要：前端每周清單專注前端領域內容，以對外文資料的搜集為主，幫助開發者了解一周前端熱點分為新聞熱點開發教程工程實踐深度閱讀開源項目巔峰人生等欄目。它能夠為我們提供類似于預處理器命名空間等多方面的輔助。前端每周清單專注前端領域內容，以對外文資料的搜集為主，幫助開發者了解一周前端熱點；分為新聞熱點、開發教程、工程實踐、深度閱讀、開源項目、巔峰人生等欄目。歡迎關注【前端之巔】微信公眾號（ID：f...

RaoMeng 2019-08-29 13:21 評論0 收藏0