2.9 HTTP Cache

1. What Is HTTP Cache?

• Browser-side caching.

2. Why Is HTTP Cache Needed?

• HTTP is stateless. The advantage is good scalability; the disadvantage is that repeatedly sending the same data reduces network performance.

3. HTTP Cache Categories

3.1. State Cache

• Does not go through the server; directly determines the state of the target network based on cached information.

3.1.1. 301/302

• Disadvantage: redirecting to HTTPS through 301/302 may cause a downgrade man-in-the-middle attack.

3.1.2. HSTS

3.2. Strong Cache

• Does not send a request to the server, so performance is good but consistency is somewhat worse.
• It can take effect when entering an address in the browser, following page links, opening a new window, going forward, and going back, but should automatically become invalid when the user manually refreshes the page.

3.2.1. Expires

• Header provided by HTTP/1.0:

  Expires: Wed, 8 Apr 2020 07:28:00 GMT

• Disadvantages:
  • Limited by the client’s local time.
  • No semantic for “do not cache”.

3.2.2. Cache-Control

• Header provided by HTTP/1.1:

  Cache-Control: max-age=600

• If Expires and Cache-Control conflict, Cache-Control takes precedence.

3.3. Negotiated Cache

• A request needs to be sent to the server, so consistency is better but performance is somewhat lower.
• It takes effect when entering an address in the browser, following page links, opening a new window, going forward, going back, and also when the user manually refreshes the page (F5). It becomes invalid only when the user force-refreshes (Ctrl+F5) or explicitly disables caching (for example, in DevTools). In that case, the client request automatically contains Cache-Control: no-cache.

3.3.1. Last-Modified and If-Modified-Since

• Tell the client the last modification time of the resource:

  HTTP/1.1 304 Not Modified
  Cache-Control: public, max-age=600
  Last-Modified: Wed, 8 Apr 2020 15:31:30 GMT

• Disadvantage:
  • Last modification time is precise only to the second.

3.3.2. ETag and If-None-Match

• Used to tell the client the unique identifier of the resource:

  HTTP/1.1 304 Not Modified
  Cache-Control: public, max-age=600
  ETag: "28c3f612-ceb0-4ddc-ae35-791ca840c5fa"

• Disadvantage:
  • Lower performance because the server needs to hash the resource each time.

4. When Negotiated Cache and Strong Cache Exist Together

1. When strong cache is available, return the resource directly from the strong cache without checking for changes.
2. When strong cache expires or is disabled (no-cache / must-revalidate), negotiated cache can still work normally.

• 

5. References

• 你应该知道的浏览器缓存知识 - 韩小平的博客
• 八一八浏览器缓存 // Grey Times
• 浏览器缓存，状态码200与304 - 简书
• 如何优雅的谈论HTTP／1.0／1.1／2.0 - 简书
• 客户端缓存 | 凤凰架构
• 缓存（二）——浏览器缓存机制：强缓存、协商缓存 · Issue #41 · amandakelake/blog