Light hero background

瀏覽器的預設快取時效 Cache Freshness

September 29, 2024

一般在講瀏覽器 Cache 時常見的控制手段有 cache-control / etag / last-modified ,我們會透過這些設定來告知瀏覽器這個資源是否『新鮮』,而我們也可以針對不新鮮的資源作相對應的處理。

那麼,瀏覽器預設是怎麼判斷一個資源新不新鮮呢?(有興趣的話,這個英文名詞叫做 cache freshness),RFC 7324 4.2.2 有這樣子的定義

If the response has a Last-Modified header field (Section 2.2 of [RFC7232]), caches are encouraged to use a heuristic expiration value that is no more than some fraction of the interval since that time. A typical setting of this fraction might be 10%.

如果 response header 裡面有 Last-Modified 資訊,那麼建議新鮮度會以修改時間到現在的 10% 為建議時間。也就是說如果今天你拿了一個十小時前修改的檔案,那麼這檔案的新鮮度就是一小時。如果是十年前修改的檔案,新鮮度就是一年。

但 RFC 也有寫到這個新鮮度邏輯演算法只是個建議 (encouraged),實際瀏覽器實作呢?

  • Chrome / Safari: 遵照 RFC 建議的 10%
  • Firefox 也是 10% 但是有個上限為一週

延伸要注意的就是,如果今天你有一個十年前修改的檔案,想要確保使用者端都會更新,那就需要用一些其他方式來驅使使用者更新檔案。

也就是說,如果你有一個檔案在十年前被修改過,但希望更新檔案,這些瀏覽器可能會將檔案視為「新鮮」資源長達一年,導致使用者要一年之後才能更新。為了解決這個問題,開發者通常會採取一些方式來強制更新,例如在資源 URL 後加入版本號或雜湊值(例如:style.css?v=12345),或者設定明確的快取控制,例如 Cache-Control: no-cachemax-age。這些方法可以確保更新能夠即時生效,避免依賴瀏覽器的預設行為,確保更新頻率符合需求。