非同步載入css資源

加開頁面首屏顯示速度使我們前端一直在追求的目標，而css資源在這些優化中同樣也是不可或缺的。
一個網站可能有一部分css資源是必須的，他需要在頁面渲染完之前就被載入完，並和html一起解析，這個暫時無法做手腳，但是我們可以把一些非關鍵的css進行非同步化，也就是非同步載入。
市面上有很多工具可以達到這個效果，比如loadCSS

這次要說的這個非同步載入方式，其實也是loadCSS中所用到的，程式碼如下：

<link rel="stylesheet" href="/path/to/my.css" media="print" onload="this.media='all'">
 

程式碼很簡單，聰明的你，一眼就能看懂：

初始化為針對print型別，當載入完畢後，將media設定為全平臺應用

但是這個怎麼和非同步取得關係的呢？

是因為瀏覽器會根據media判斷當前資源是否應用，然後再決定優先順序，由於我們採用的是稀有的print型別，所以瀏覽器識別後，會把當前以不影響頁面渲染的方式載入：非同步

可能會有人說起preload、preconnection、prefetch這類rel，但是由於瀏覽器支援度不一，所以線上需要更多的操作去彌補他們的相容性。

並且他們是有區別的，preload會導致瀏覽器載入該資源的優先順序變為最高，loadCSS則會改為low。

(完)

一些常用的操作

• disable cache： 模擬使用者第一次訪問
• replay xhr： 重複傳送xhr，用於除錯介面
• 右鍵 => clear browser cache: 手動清除快取(也有清除cookies的選項)
• offline: 可以快速除錯pwa
• network pane支援排序，左鍵點選tab或者右鍵更多選項選擇
• initiator：檢視當前資源的發起來源和其依賴資源。可以使用按住shift去檢視資源，綠色代表發起來源，紅色代表依賴資源。

• DOMContentLoaded & load：獲取頁面解析完畢時間和資源載入完畢時間
  

  藍色代表DOMContentLoaded，紅色代表load

  公式：loadTime = window.performance.timing.domContentLoadedEventEnd- window.performance.timing.navigationStart;

• 資源總大小和資源總數

常用功能欄位解釋

• network pan的tab欄位解釋：
  

  1. waterfall: 每個請求活動期間的視覺化分解圖示

  2. initiator：觸發當前請求的來源，下面有幾種常見的觸發方式

     • parser：通過谷歌的html解析得到的資源，進而發起請求
     • redirect：http重定向
     • script：由於執行js，而引入的資源。
     • other：一些其他的處理和動作，比如我們訪問一個地址，這個地址本身對應的域名資源，就是other。這屬於常見的兩種之一。一是輸入地址訪問，二是點選跳轉。

• 通過waterfall我們可以知道我們的頁面資源和請求是否是合理的。一個良好的網站的waterfall應該類似於下面這樣：

• waterfall的時間分解各階段解釋：

  1. queueing： 瀏覽器把當前請求放入佇列的時間。
  2. stalled：當前請求在佇列中，但是沒有執行的擱置時間。
  3. request sent： 請求傳送消耗時間。
  4. waiting(TTFB)：瀏覽器接收到服務端返回的首個位元組的時間。TTFB的意思是首位元組時間(Time to First Byte)
  5. content Download：瀏覽器接受返回內容所花費時間
  6. queued at：理解為準備插入佇列時機
  7. started at：任務開始時機

  公式1: started at = queued at + queueing
  公式1: 當前請求花費總時間 ≈ queueing + stalled + request sent + waiting + content download

閱讀文獻

原文連結
瀏覽器優先順序
loadCSS
loadCSS git