瀏覽器的緩存機制

Question

幫助我瞭解是什麼原因導致：

而且通過這一點，我的意思是我的資產的100％的緩存，但仍有接受的內容之間的〜200ms的延遲的事實從腳本和DOMContentLoaded事件觸發。這是Linux上的Chrome，提供的頁面大約有100行div和東西，沒有什麼重要的。

Answer 1

您所觀察的這200ms「延遲」不是由網絡引起的，而是通過處理內容引起的。

獲取HTML和CSS之間以及CSS文件之間的延遲是解析HTML所需的時間。當JavaScript混合使用時，HTML解析器將暫停，直到該腳本被加載並且被評估並執行爲止。

通過打開時間軸選項卡，單擊左上角的按鈕/圓圈（「記錄」）並重新加載頁面，可以獲得有關影響加載時間的詳細信息。以下是一個顯示腳本執行時間和資源獲取時間之間關係的示例。這些屏幕截圖在沒有任何擴展名的瀏覽器配置文件中記錄，如果您已經安裝了任何擴展程序，那麼時間可能會增加。

網絡標籤：

時間軸標籤：

瞭解更多關於性能和剖析：

• https://developer.chrome.com/devtools/docs/network
• https://developers.google.com/web/fundamentals/performance/critical-rendering-path/