做一个网站APP价格,win7网站后台无法编辑,免费设计logo图标生成器,获奖网站设计前言
目前浏览器的缓存类型众多#xff0c;HTTP Cache、Disk Cache、Memory Cache、ServiceWorker Cache、Push Cache 等等#xff0c;这些缓存是如何产生的#xff1f;命中优先级是怎么样#xff1f;又该如何去使用它们#xff1f;
Disk Cache、Memory Cache
Disk Cac…前言
目前浏览器的缓存类型众多HTTP Cache、Disk Cache、Memory Cache、ServiceWorker Cache、Push Cache 等等这些缓存是如何产生的命中优先级是怎么样又该如何去使用它们
Disk Cache、Memory Cache
Disk Cache、Memory Cache 属于强缓存将缓存的响应写到内存或硬盘中也属于 HTTP 缓存的产物。
强缓存是如何产生的
强缓存的产生依赖于请求响应中的 cache-control 和 expires 的 headers 字段。这两个字段都是用来设置缓存数据的有效时间。
expires 是 HTTP 1.0 的产物表示的是缓存的到期时间是一个绝对时间。cache-control 是 HTTP 1.1 的产物表示的是缓存的最大可用时长是一个相对时间。
cache-control 字段的值也需要搭配相应的字段来使用常用字段
max-age缓存的时长和 expires 的作用类似单位是秒。no-cache忽略强缓存真接走协商缓存。no-store忽略强缓存和协商缓存直接从服务器获取响应。public所有的数据都可以被任意地方缓存例如可以缓存到 CDN 和代理服务器上。private默认值所有内容只有客户端才可以缓存。
两个字段同时存在时cache-control 优先级最高。
内存缓存和硬盘缓存如何存储的
当请求响应符合强缓存时浏览器会根据 header 头中的字段类型进行缓存处理。通常
内存缓存会存放 脚本、base64数据和字体等。硬盘缓存会存放 样式文件、图片或比较大的文件等。
此行为属于浏览器行为服务器不可控。
区别
区别Disk Cache- 长期存在浏览器关闭时同样存在。- 存储文件空间更大。Memory Cache- 短期存在生命周期为会话级的回话结束 缓存清除。 - 访问速度更快。- 优先级更高。HTTP Cache
这里主要说的是返回状态码为 304 的这种协商缓存。 当强缓存失效后浏览器就会携带缓存标志向服务器发送请求。这里主要用到的 header 头
Etag / If-None-MatchLast-Modified / If-Modified-Since
当收到请求的响应时会携带
Etag是服务器基于某种规则对资源生成的一个标志类似于文件 hash。Last-Modified是服务器返回文件最后修改的时间。
当发送请求的时候浏览器会携带
If-None-Match对应的就是 Etag 的值。If-Modified-Since对应的就是 Last-Modified 的值。
服务器根据这两个值进行匹配如果相等说明文件没有变化返回 304浏览器直接从缓存里面取当不相等时服务器发送最新的内容状态码为 200。 ServiceWorker Cache
ServiceWorker Cache 属于新的 PWA Cache Storage API它有力度更细的程序可操作缓存的能力。 它的命中条件依赖于 fetch所以它的命中顺序如下 是否从 serviceworker Cache 里面取缓存完全依赖于 serviceworker 的脚本控制取决于用户自定义。 浏览器上对应操作
强缓存serviceworker 缓存协商缓存缓存 headers 变动刷新按钮 或 cmd r有效有效有效无变动cmd shift r无效无效无效请求中无 If-None-Match/If-Modified-SinceCache-Control 值为 no-cache。DevTools Network面板开启Disable cache无效无效无效同上但无缓存的能力更强
