本文共 2327 字，大约阅读时间需要 7 分钟。

强缓存

强缓存阶段不需要发送HTTP请求。

在HTTP/1.0时，使用的是Expires，而HTTP/1.1使用的是Cache-Control。

Expires

Expires即过期时间，存在于服务端返回的响应头中，告诉浏览器在这个过期时间之前可以直接从缓存里面获取数据，无需再次请求，如果过期了就得向服务端发请求。 缺点是服务器的时间和浏览器的时间可能并不一致，那服务器返回的这个过期时间可能就是不准确的。

Cache-Control

它是采用过期时长来控制缓存，对应的字段是max-age。 它可以组合非常多的指令，完成更多场景的缓存判断, 一些关键的属性如下:  public: 客户端和代理服务器都可以缓存。因为一个请求可能要经过不同的代理服务器最后才到达目标服务器，那么结果就是不仅仅浏览器可以缓存数据，中间的任何代理节点都可以进行缓存。 private： 这种情况就是只有浏览器能缓存了，中间的代理服务器不能缓存。 no-cache: 跳过当前的强缓存，发送HTTP请求，即直接进入协商缓存阶段。 no-store：非常粗暴，不进行任何形式的缓存。 s-maxage：这和max-age长得比较像，但是区别在于s-maxage是针对代理服务器的缓存时间。

注意：当Expires和Cache-Control同时存在的时候，Cache-Control会优先考虑。

当资源缓存时间超时了，也就是强缓存失效了，会进入到协商缓存了。

协商缓存

强缓存失效之后，浏览器在请求头中携带相应的缓存tag来向服务器发请求，由服务器根据这个tag，来决定是否使用缓存，这就是协商缓存。

这样的缓存tag分为两种: Last-Modified 和 ETag。这两者各有优劣。

Last-Modified

（1）即最后修改时间。在浏览器第一次给服务器发送请求后，服务器会在响应头中加上这个字段。 （2）浏览器接收到后，如果再次请求，会在请求头中携带If-Modified-Since字段，这个字段的值也就是服务器传来的最后修改时间。 （3）服务器拿到请求头中的If-Modified-Since的字段后，其实会和这个服务器中该资源的最后修改时间对比: （4）如果请求头中的这个值小于最后修改时间，说明是时候更新了。返回新的资源，跟常规的HTTP请求响应的流程一样。 （5）否则返回304，告诉浏览器直接用缓存。

ETag

（1）ETag 是服务器根据当前文件的内容，给文件生成的唯一标识，只要里面的内容有改动，这个值就会变。服务器通过响应头把这个值给浏览器。 （2）浏览器接收到ETag的值，会在下次请求时，将这个值作为If-None-Match这个字段的内容，并放到请求头中，然后发给服务器。 （3）服务器接收到If-None-Match后，会跟服务器上该资源的ETag进行比对: （4）如果两者不一样，说明要更新了。返回新的资源，跟常规的HTTP请求响应的流程一样。 （5）否则返回304，告诉浏览器直接用缓存。

两者对比：

在精准度上，ETag优于Last-Modified。优于 ETag 是按照内容给资源上标识，因此能准确感知资源的变化。而 Last-Modified 就不一样了，它在一些特殊的情况并不能准确感知资源变化，主要有两种情况: （1）编辑了资源文件，但是文件内容并没有更改，这样也会造成缓存失效。 （2）Last-Modified 能够感知的单位时间是秒，如果文件在 1 秒内改变了多次，那么这时候的 Last-Modified 并没有体现出修改了。 在性能上，Last-Modified优于ETag，也很简单理解，Last-Modified仅仅只是记录一个时间点，而 Etag需要根据文件的具体内容生成哈希值。

另外，如果两种方式都支持的话，服务器会优先考虑ETag。

总结

浏览器的缓存机制: 首先通过 Cache-Control 验证强缓存是否可用 如果强缓存可用，直接使用 否则进入协商缓存，即发送 HTTP 请求，服务器通过请求头中的If-Modified-Since或者If-None-Match字段检查资源是否更新 若资源更新，返回资源和200状态码 否则，返回304，告诉浏览器直接从缓存获取资源

缓存位置

浏览器中的缓存位置一共有四种，按优先级从高到低排列分别是： Service Worker Memory Cache Disk Cache Push Cache

Service Worker

Service Worker 借鉴了 Web Worker的 思路，即让 JS 运行在主线程之外，由于它脱离了浏览器的窗体，因此无法直接访问DOM。主要用于完成离线缓存、消息推送和网络代理等功能。其中的离线缓存就是 Service Worker Cache。

Memory Cache 和 Disk Cache

Memory Cache指的是内存缓存，从效率上讲它是最快的。但是从存活时间来讲又是最短的，当渲染进程结束后，内存缓存也就不存在了。 Disk Cache就是存储在磁盘中的缓存，从存取效率上讲是比内存缓存慢的，但是他的优势在于存储容量和存储时长。稍微有些计算机基础的应该很好理解，就不展开了。

浏览器如何决定将资源放进内存还是硬盘呢？主要策略如下：

比较大的JS、CSS文件会直接被丢进磁盘，反之丢进内存 内存使用率比较高的时候，文件优先进入磁盘

Push Cache

即推送缓存，这是浏览器缓存的最后一道防线。它是 HTTP/2 中的内容，虽然现在应用的并不广泛，但随着 HTTP/2 的推广，它的应用越来越广泛。

转载地址：https://blog.csdn.net/yyychocolate/article/details/108053060 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！