HTTP cache strategy All In One
HTTP cache strategy All In One
browser caches: Memory Cache, HTTP/2 Server Push, Service Workers
HTTP 缓存的工作原理
-
浏览器发出的所有 HTTP 请求首先会转至浏览器缓存,用于检查是否存在可满足请求的有效缓存响应。
如果存在匹配,则从缓存中读取响应,从而消除网络延迟和传输产生的数据成本。 -
HTTP 缓存的行为由请求标头和响应标头的一起控制。
在理想情况下,您可以控制 Web 应用的代码(确定请求标头)和 Web 服务器的配置(确定响应标头)。
Cache-Control 流程图
浏览器缓存优先级
从上到下,优先级依次递减
- Memory Cache (preload / 重复请求的资源) 存储在内存中,临时的缓存, 通过 URL 进行资源匹配
- Service Workers 存储在磁盘中,持久的缓存
- HTTP Cache / Disk Cache (prefetch / Cache-Control) 存储在磁盘中,持久的缓存
- HTTP/2 Server Push 临时的缓存, 通过 URL 和 请求头进行资源匹配
即使设置了 max-age=0 / Cache-Control: no-cache 请求头, 对与具有更高优先级的 Memory Cache 也没有效果;
除非设置的是 Cache-Control: no-store 请求头, 浏览器不会缓存该资源;
当资源匹配后,会经过判断是否要把资源存储到 HTTP cache 和 Service Workers 中
当资源被渲染后,内存缓存一份已经渲染资源的引用
浏览器缓存策略
- 强缓存 Cache-Control / Expires (
Cache-Control
优先级高) - 协商缓存 ETag / Last-Modified (
ETag
优先级高)
Cache-Control:
max-age,
no-cache,
no-store,
public,
private,
...
ETag / If-None-Match
Last-Modified / If-Modified-Since
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/ETag
W: case-sensitive / 区分大小写
ETag: W/"<etag_value>"
ETag: "<etag_value>"
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Last-Modified
Last-Modified: <day-name>, <day> <month> <year> <hour>:<minute>:<second> 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/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/
强缓存 & 协商缓存
强缓存:
Cache-Control
Expires
协商缓存:
ETag / If-None-Match
Last-Modified / If-Modified-Since
refs
https://www.cnblogs.com/xgqfrms/p/12918954.html
https://www.cnblogs.com/xgqfrms/tag/强缓存/
(🐞 反爬虫测试!打击盗版⚠️)如果你看到这个信息, 说明这是一篇剽窃的文章,请访问 https://www.cnblogs.com/xgqfrms/ 查看原创文章!
©xgqfrms 2012-2021
www.cnblogs.com/xgqfrms 发布文章使用:只允许注册用户才可以访问!
原创文章,版权所有©️xgqfrms, 禁止转载 🈲️,侵权必究⚠️!
本文首发于博客园,作者:xgqfrms,原文链接:https://www.cnblogs.com/xgqfrms/p/16023937.html
未经授权禁止转载,违者必究!