HTTP cache strategy All In One

browser caches: Memory Cache, HTTP/2 Server Push, Service Workers

HTTP 缓存的工作原理

1. 浏览器发出的所有 HTTP 请求首先会转至浏览器缓存，用于检查是否存在可满足请求的有效缓存响应。
   如果存在匹配，则从缓存中读取响应，从而消除网络延迟和传输产生的数据成本。

2. HTTP 缓存的行为由请求标头和响应标头的一起控制。
   在理想情况下，您可以控制 Web 应用的代码（确定请求标头）和 Web 服务器的配置（确定响应标头）。

Cache-Control 流程图

https://web.dev/http-cache/

浏览器缓存优先级

从上到下，优先级依次递减

1. Memory Cache (preload / 重复请求的资源) 存储在内存中，临时的缓存, 通过 URL 进行资源匹配
2. Service Workers 存储在磁盘中，持久的缓存
3. HTTP Cache / Disk Cache (prefetch / Cache-Control) 存储在磁盘中，持久的缓存
4. HTTP/2 Server Push 临时的缓存, 通过 URL 和 请求头进行资源匹配

即使设置了 max-age=0 / Cache-Control: no-cache 请求头, 对与具有更高优先级的 Memory Cache 也没有效果；
除非设置的是 Cache-Control: no-store 请求头, 浏览器不会缓存该资源；

当资源匹配后，会经过判断是否要把资源存储到 HTTP cache 和 Service Workers 中
当资源被渲染后，内存缓存一份已经渲染资源的引用

浏览器缓存策略

1. 强缓存 Cache-Control
2. 协商缓存 ETag / Last-Modified

Cache-Control:
max-age,
no-cache,
no-store,
public,
private,
...

expires

ETag
Last-Modified

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/ETag

W: case-sensitive / 区分大小写

ETag: W/""
ETag: ""

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Last-Modified

Last-Modified: ,    :: GMT

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control

Response Directives

Cache-Control: max-age=604800

Cache-Control: s-maxage=604800

Cache-Control: no-cache

Cache-Control: max-age=604800, must-revalidate

Cache-Control: no-store

Cache-Control: private

Cache-Control: public

Cache-Control: public, max-age=604800

Cache-Control: must-understand, no-store

Cache-Control: public, max-age=604800, immutable

Cache-Control: max-age=604800, stale-while-revalidate=86400

Cache-Control: max-age=604800, stale-if-error=86400

Request Directives

Cache-Control: no-cache

Cache-Control: no-store

Cache-Control: max-age=3600

Cache-Control: max-age=0

Cache-Control: max-stale=3600

Cache-Control: min-fresh=600

# conflicted (理论上，如果指令发生冲突，则应遵守最严格的指令。)
Cache-Control: private, no-cache, no-store, max-age=0, must-revalidate

# equivalent to
Cache-Control: no-store

https://developer.mozilla.org/en-US/docs/Web/HTTP/Caching#freshness

demo

prefetch / preload / dns-prefetch / preconnect / subresource / prerender / url ???

https://css-tricks.com/prefetching-preloading-prebrowsing/

https://cdn.xgqfrms.xyz

https://cdn.xgqfrms.xyz/http-cache/index.html

URL & SearchParams

function getApiUrl() {
  const url = new URL('https://en.wikipedia.org/w/api.php');
  url.searchParams.set('action', 'query');
  url.searchParams.set('format', 'json');
  url.searchParams.set('generator', 'geosearch');
  url.searchParams.set('ggscoord', `${latitude}|${longitude}`);
  url.searchParams.set('ggslimit', 5);
  url.searchParams.set('ggsradius', 10000);
  url.searchParams.set('origin', '*');
  url.searchParams.set('pilimit', 50);
  url.searchParams.set('piprop', 'thumbnail');
  url.searchParams.set('pithumbsize', 144);
  url.searchParams.set('prop', 'pageimages|pageterms');
  url.searchParams.set('wbptterms', 'description');
  return url;
}

请试用 HTTP Cache codelab，在 Express 中了解 Cache-Control 和 ETag 的实践经验。

https://web.dev/codelab-http-cache/

https://web.dev/http-cache/

refs

https://www.cnblogs.com/xgqfrms/tag/强缓存/

?xgqfrms 2012-2020

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有??xgqfrms, 禁止转载 ???，侵权必究??！