異步加載css 和 谷歌瀏覽器各實用小工具介紹

異步加載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 github