瀏覽器相關知識

瀏覽器緩存機制

1. HTTP 緩存

使用 Last-Modified 存在的弊端：

我們編輯了文件，但文件的內容沒有改變。服務端並不清楚我們是否真正改變了文件，它仍然通過最後編輯時間進行判斷。因此這個資源在再次被請求時，會被當做新資源，進而引發一次完整的響應——不該重新請求的時候，也會重新請求。
當我們修改文件的速度過快時（比如花了 100ms 完成了改動），由於 If-Modified-Since 只能檢查到以秒為最小計量單位的時間差，所以它是感知不到這個改動的——該重新請求的時候，反而沒有重新請求了。

2. 內存緩存

MemoryCache，是指存在內存中的緩存。從優先級上來說，它是瀏覽器最先嘗試去命中的一種緩存。從效率上來說，它是響應速度最快的一種緩存。

內存緩存是快的，也是“短命”的。它和渲染進程“生死相依”，當進程結束後，也就是 tab 關閉以後，內存裡的數據也將不復存在。

3. 服務工作者緩存

必須以 https 協議為前提。

Service Worker 是一種獨立於主線程之外的 Javascript 線程。它脫離於瀏覽器窗體，因此無法直接訪問 DOM。這樣獨立的個性使得 Service Worker 的“個人行為”無法干擾頁面的性能，這個“幕後工作者”可以幫我們實現離線緩存、消息推送和網絡代理等功能。我們藉助 Service worker 實現的離線緩存就稱為 Service Worker Cache。

Service Worker 的生命週期包括 install、active、working 三個階段。一旦 Service Worker 被 install，它將始終存在，只會在 active 與 working 之間切換，除非我們主動終止它。這是它可以用來實現離線存儲的重要先決條件。

4. 推送緩存(HTTP/2 開始有的新特性)

Push Cache 是指 HTTP/2 在 server push 階段存在的緩存

Push Cache 是緩存的最後一道防線。瀏覽器只有在 Memory Cache、HTTP Cache 和 Service Worker Cache 均未命中的情況下才會去詢問 Push Cache。
Push Cache 是一種存在於會話階段的緩存，當 session 終止時，緩存也隨之釋放。
不同的頁面只要共享了同一個 HTTP/2 連接，那麼它們就可以共享同一個 Push Cache。

從瀏覽器打開到頁面渲染完成所發生的事

瀏覽器解析
查詢緩存
查詢 DNS
建立 TCP Connection
伺服器處理請求
伺服器回應
客戶端收到頁面
解析 HTML
構建渲染樹
開始顯示內容(白屏時間)
首屏內容加載完成(首屏時間)
用戶可交互(DOMContentLoaded)
加載完成(load)

//DNS解析時間： domainLookupEnd - domainLookupStart
//TCP握手時間：connectEnd - connectStart
//白屏時間： responseStart - navigationStart
//DOM渲染完成時間： domContentLoadedEventEnd - navigationStart
//頁面加載時間： loadEventEnd - navigationStart
window.performance.toJSON();