2015-10-21 124 views
30

我正在提供旨在被瀏覽器無限期緩存的靜態內容。 Chrome按預期緩存它,但仍花時間「下載」它。我正在使用Chrome 46.0.2490.71。爲什麼Chrome花費時間從緩存中「下載」內容?

Chrome Network Tab

正如你所看到的,內容從緩存提供,但仍然需要68ms的內容下載。這會導致svg圖像在每頁頁面加載時閃爍,即使文件被緩存。

這裏是在隱身模式下頁面加載相關時間表信息:

Chrome Timeline Tab

的「總時間」和「活動時間」爲每個事件的領域是零。用本地提供的文件複製這個文件(但仍然從緩存中)「接收數據」事件只能看到一次。

一些有趣的點要注意:

  • 服務從我的本地機器相同的文件,用相同的編碼,不會產生相同的下載延遲。
  • 切換到隱身模式(無擴展名)會將下載延遲減半,但不會消除它。
  • 刷新頁面更快,因爲從服務器接收304響應所需的時間似乎比從緩存中僅僅加載304響應要快。
  • 關閉開發工具似乎對延遲沒有任何影響。
  • IE 11,Edge和Firefox 41不顯示任何延遲。

有什麼可能的原因?

+0

你加載了什麼擴展名?大多數擴展程序在隱身模式下不起作用... – malix

+0

這可能是由您安裝的擴展程序引起的。很多時候,他們會造成這樣的奇怪錯誤,因爲他們可以在代碼/瀏覽器中訪問很多東西......我從來沒有遇到過這種情況,並且我始終使用devtools來衡量我的網站的性能,所以我沒有認爲這是一個鉻錯誤。只要嘗試禁用它們,並讓它們一個接一個。 – gillyb

+1

說實話,我不認爲67ms從磁盤加載142kb是不現實的。 –

回答

9

所以這與緩存在Chrome中的工作方式有關。我沒有Chrome代碼庫的個人經驗,但我對它的理論知之甚少。 (我還發現了更多的好奇,這裏Chrome瀏覽器的緩存實現的引用:chromium disk cache

供參考,這是我的裝載Chrome瀏覽器在網絡面板中打開和網絡限制選項設置您的實際堆棧溢出問題的屏幕截圖到「離線」。請注意,此列表中的每個條目都來自緩存!

Imgur screencap

您還會注意到,鉻花時間「下載」的所有文件。爲什麼是這樣?那麼,Chrome的緩存是一個數據庫,並且該數據庫也被壓縮以節省空間。當您從緩存中檢索文檔時,該檢索的價格不爲零。 Chrome必須在緩存數據庫中查找該項目,然後將該條目充入內存,以便Chrome可以使用該項目。我不知道關於Network chrome-dev-tools面板如何顯示時間的確切細節,但我猜想從磁盤獲取該文件,解壓縮該文件,然後解析並處理結果就是您所看到的內容體現在「下載時間」。

我不能評論爲什麼其他瀏覽器不會有這樣的延遲,因爲我沒有太多的經驗。這可能是因爲他們要麼使用從緩存(可能)獲取內容的更有效的方法,要麼可能是他們始終將緩存保存在內存中(不太可能),或者他們跳過一些完整性檢查Chrome正在緩存數據(可能)

+1

有沒有一種方法可以優先考慮緩存中的內存和磁盤的內容? – Skylervich

0

當我通過標題(「Content-Length:xxx」)它加載像100%更快!

相關問題