CSS和網絡性能

CSS和網絡性能

CSS對於呈現頁面相當重要 - 在找到、下載和解析全部CSS以前，瀏覽器不會開始呈現 - 所以咱們必須儘量快地將其放到用戶的設備上。關鍵路徑上的任何延遲都會影響咱們的「開始渲染」，並讓用戶看到空白屏幕。

什麼是大問題？

從廣義上講，這就是CSS對性能相當重要的緣由：

1. 瀏覽器在構建渲染樹以前沒法渲染頁面;
2. 渲染樹是DOM和CSS組合結果;
3. DOM是HTML加上須要對其進行操做的JavaScript; DOM是HTML加上須要對其進行操做的JavaScript;
4. CSS是針對DOM應用的全部CSS規則; CSS是針對DOM應用的全部CSS規則;
5. 使用async和defer 屬性很容易使JavaScript無阻塞;使用async和defer 屬性很容易使JavaScript無阻塞;
6. 使CSS異步變得困可貴多;使CSS異步變得困可貴多;
7. 因此要注意的一個好的經驗法則是，頁面只會像最慢的樣式表同樣快速地呈現。

考慮到這一點，咱們須要儘快構建DOM和CSS。在大多數狀況下，構建DOM相對較快：第一個HTML響應是 DOM。可是，因爲CSS幾乎老是HTML的子資源，所以構建CSS一般須要更長的時間。 在這篇文章中，咱們主要來看看如何證實CSS在網絡上是一個重要的瓶頸（自己和其餘資源），以及咱們如何減輕它，從而縮短關鍵路徑並縮短開始渲染的時間。

使用關鍵CSS

若是你有能力，減小Start Render時間的最有效方法之一是使用Critical CSS模式：識別Start Render所需的全部樣式（一般是首頁上全部內容所需的樣式），將它們內聯到文檔的< style >標記中< head >，並從關鍵路徑異步加載剩餘的樣式表。 雖然這種策略是有效的，但並不簡單：高度動態的網站很難從中提取樣式; 這個過程須要自動化; 咱們必須對全部的內容作出假設; 抓住邊緣狀況很難; 工具仍處於相對初期階段。若是正在使用大型或遺留代碼庫，事情變得更加困難......

拆分媒體類型

所以，若是實現關鍵CSS很是棘手 - 它多是另外一種選擇，咱們將主要的CSS文件拆分爲其各自的媒體查詢。這樣作的實際結果是瀏覽器會......

• 以很是高的優先級下載當前上下文所需的任何CSS（中等，屏幕大小，分辨率，方向等），阻止關鍵路徑;
• 以很是低的優先級下載當前上下文不須要的任何CSS，徹底脫離關鍵路徑。

基本上，瀏覽器有效地延遲了不須要渲染當前視圖的任何CSS。

<link rel="stylesheet" href="all.css" />
複製代碼

若是咱們將全部CSS捆綁到一個文件中，這就是網絡對待它的方式：

請注意，單個CSS文件具備最高優先級。 若是咱們能夠將單個全渲染阻塞文件拆分爲各自的媒體查詢：

<link rel="stylesheet" href="all.css" media="all" />
<link rel="stylesheet" href="small.css" media="(min-width: 20em)" />
<link rel="stylesheet" href="medium.css" media="(min-width: 64em)" />
<link rel="stylesheet" href="large.css" media="(min-width: 90em)" />
<link rel="stylesheet" href="extra-large.css" media="(min-width: 120em)" />
<link rel="stylesheet" href="print.css" media="print" />
複製代碼

而後咱們看到網絡以不一樣方式處理文件：

不須要渲染當前上下文的CSS文件被賦予最低優先級。 瀏覽器仍將下載全部CSS文件，但它只會阻止渲染完成當前上下文所需的文件。

避免@import在CSS文件中

咱們能夠作的下一件事就是幫助Start Render更加簡單。避免@import在CSS文件中使用。 @import，憑藉它的工做原理，它很慢。對於Start Render性能來講真的很是糟糕。這是由於咱們正在關鍵路徑上積極建立更多往返：

1. 下載HTML;
2. HTML請求CSS;
3. CSS請求更多CSS;
4. 構建渲染樹。

給出如下HTML：

<link rel="stylesheet" href="all.css" />
複製代碼

all.css是：

@import url(imported.css);
複製代碼

咱們最終獲得了這樣的瀑布：

明確缺少關鍵路徑上的並行化。 經過簡單地將其展平爲兩個< link rel="stylesheet" />零和零 @import：

<link rel="stylesheet" href="all.css" />
<link rel="stylesheet" href="imported.css" />
複製代碼

咱們獲得一個更健康的瀑布：

開始並行化咱們的關鍵路徑CSS。 若是你沒法訪問包含@import （意味着你沒法刪除）的CSS文件，你能夠放心地將其保留在CSS中，但也可使用< link rel="stylesheet" /> HTML中的相應內容對其進行補充。這意味着瀏覽器將從HTML啓動導入的CSS下載，並將跳過@import：你將不會得到任何雙重下載。