本文是向大家介绍浏览器缓存机制，缓存是解决性能问题的重要手段，使用缓存的好处很多，除了能让浏览器更快地加载网络资源之外，还会带来其他好处，比如节省网络流量和带宽，以及减少服务端的负担。

一.什么是缓存

当我们第一次访问网站的时候，电脑会把网站上的图片和数据下载到电脑上，当我们再次访问该网站的时候，网站就会从电脑中直接加载出来，这就是缓存。

缓存的好处

1. 缓解服务器压力，不用每次都去请求某些数据了。

2.提升性能，打开本地资源肯定会比请求服务器来的快。

3.减少带宽消耗，当我们使用缓存时，只会产生很小的网络消耗，至于为什么打开本地资源也会产生网络消耗，下面会有说明。

Web缓存种类

数据库缓存，CDN缓存，代理服务器缓存，浏览器缓存。

1.数据库缓存：当web应用关系复杂，数据表越来越多时，可以将查询后的数据放到内存中进行缓存，下次再查询时，就直接从缓存中读取，从而提高响应速度。

2.CDN缓存：当我们发送一个web请求的时候，cdn会帮我们计算去哪得到这些内容的最快，所以可以将大家经常访问的内容放到cdn，加快响应速度。

3.代理服务器缓存：和浏览器缓存性质相似，但是代理服务器缓存面向的群体更广，规模更大。一般为大量用户服务，同一个副本会被应用多次，所以在减少响应时间和带宽上很有效果

4.浏览器缓存：每个浏览器都实现了http缓存，我们通过浏览器使用http协议与服务端进行交互的时候，浏览器会根据一套与服务器约定的规则进行缓存工作，当我们在浏览器中点击前进和后退按钮，利用的就是浏览器的缓存机制。

所谓浏览器缓存其实就是指在本地使用的计算机中开辟一个内存区，同时也开辟一个硬盘区作为数据传输的缓冲区，然后用这个缓冲区来暂时保存用户以前访问过的信息。

二.缓存的过程

根据是否需要向服务器重新发起 HTTP 请求，将缓存过程分为两个部分：强缓存和协商缓存。

强缓存：浏览器直接从本地缓存中获取数据，不与服务器进行交互。

协商缓存：浏览器发送请求到服务器，服务器判定是否可使用本地缓存。

两种缓存方式最终使用的都是本地缓存；前者无需与服务器交互，后者需要。

1.强缓存

强制缓存是在浏览器加载资源的时候，先检查缓存时间是否过期，若未过期则直接从缓存中查找请求结果，如果缓存时间过期或不存在该缓存结果，则向服务端发起请求。

设置缓存时间的方法有两种（响应头字段）：

Expires（HTTP/1.0）

Cache-Control（HTTP/1.1）

Expires

HTTP/1.0 中使用响应头部字段 Expires 来设置缓存过期时间。客户端第一次请求时，服务端会在响应头部添加 Expires 字段。当浏览器再次发送请求时，先会对比当前时间和 Expires 对应的时间，如果当前时间早于 Expires 时间，那么直接使用缓存；反之，需要再次发送请求。

expires: Sun, 24 Jul 2022 15:33:14 GMT

上述 Expires 信息告诉浏览器：在 2022.07.24 日之前，可以直接使用该请求的缓存。

问题：

服务端和浏览器的时间可能不同，导致缓存过期时间出现偏差

客户端可以通过修改系统时间来继续使用缓存或提前使缓存失效

为了解决这个问题，HTTP/1.1 提出了 Cache-Control 响应头部字段。

Cache-Control

它的常用值有下面几个：

no-cache：表示使用协商缓存，即每次使用缓存前必须向服务端确认缓存资源是否更新；

no-store：禁止浏览器以及所有中间缓存存储响应内容；

public：公有缓存，表示可以被代理服务器缓存，可以被多个用户共享；

private：私有缓存，不能被代理服务器缓存，不可以被多个用户共享；

max-age：以秒为单位的数值，表示缓存的有效时间；

must-revalidate：当缓存过期时，需要去服务端校验缓存的有效性。

cache-control: max-age=31536000

此 Cache-Control 信息告诉浏览器该缓存为公有缓存，有效期 1 年。

* 强制缓存中，cache-control 的 max-age 优先级高于 Expires

2.协商缓存

协商缓存不指定缓存的有效时间，而是在请求时直接发送资源标识到服务端确认缓存是否需要更新，如果请求响应返回的 HTTP 状态为 304，则表示缓存仍然有效；否则返回状态码 200 、最新的资源和最新的资源标识。

资源标识（在 Response Header 中）有两种：

Last-Modified：资源的最后修改时间

Etag：资源的唯一标识（一个字符串）

Last-Modified 和 If-Modified-Since:

服务端通过响应头部字段 Last-Modified 和请求头部字段 If-Modified-Since 比对双方资源的修改时间，来确定缓存是否需要更新。具体工作流程如下：

浏览器第一次请求资源，服务端在返回资源的响应头中加入 Last-Modified 字段，表示这个资源在服务端上的最近修改时间；

当浏览器再次向服务端请求该资源时，请求头部带上之前服务端返回的 Last-Modified，这个请求头叫 If-Modified-Since；

服务端再次收到请求，根据 If-Modified-Since 的值，判断相关资源是否有变化，如果没有，则返回 304 Not Modified，浏览器使用资源缓存值；否则返回资源内容，且更新 Last-Modified 响应头内容。

这种方式虽然能判断缓存是否失效，但也存在三个问题：

精度问题：Last-Modified 的时间精度为秒，如果在 1 秒内发生修改，那么缓存判断会失效

准度问题：如果一个文件被修改后又被还原，内容没有发生变化，却仍然需要重新请求

服务器问题：某些服务器不能精确的得到文件的最后修改时间

因此我们需要 ETag

ETag 和 If-None-Match

为了解决精度问题和准度问题，HTTP 提供了另一种依赖于文件哈希值的精确判断缓存的方式：响应头部字段 ETag 和请求头部字段 If-None-Match。具体工作流程如下：

浏览器第一次请求资源，服务端在返响应头中加入 Etag 字段，Etag 字段值为该资源的哈希值；

当浏览器再次跟服务端请求这个资源时，在请求头上加上 If-None-Match，值为之前响应头部字段 ETag 的值；

服务端再次收到请求，将请求头 If-None-Match 字段的值和响应资源的哈希值进行比对，如果两个值相同，则说明资源没有变化，返回 304 Not Modified；否则就正常返回资源内容，无论是否发生变化，都会将计算出的哈希值放入响应头部的 ETag 字段中。

这种缓存比较的方式也会存在一些问题，具体表现在以下两个方面：

计算成本。对于大文件而言，读取完整的文件内容生成哈希值开销较大；只读取文件部分内容，又容易判断出错。

计算误差。不同服务端可能会采用不同的哈希值计算方式。所以同一个资源在两台服务端产生的 Etag 可能是不相同的。对于使用服务器集群来处理请求的网站来说，使用 Etag 的缓存命中率会有所降低。

两者中会优先使用 Etag：

Last-Modified 只能精确到秒级

如果资源被重复生成，而内容不变，Etag 更加精准

3.总结

缓存的优先级：

强制缓存的优先级高于协商缓存:

强制缓存中：cache-control 的 max-age 优先级高于 Expires

协商缓存中：Etag 优先级比 Last-Modified 高。

用户行为：

禁用缓存：

服务器禁用缓存：

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

Cache-Control: no-cache

Cache-Control: no-store

浏览器禁用缓存：

改变 url，加上?xi=xixi

设置请求 header

三.缓存的位置

强缓存我们会把资源放到memory cache 和 disk cache中，那什么资源放在memory cache，什么资源放在disk cache中？

图像和网页等资源主要缓存在disk cache，操作系统缓存文件等资源大部分都会缓存在memory cache中。具体操作浏览器自动分配，看谁的资源利用率不高就分给谁。

可以看到memory cache请求时间都是0ms。

查找浏览器缓存时会按顺序查找: Service Worker-->Memory Cache-->Disk Cache-->Push Cache。

1. Service Worker

是运行在浏览器背后的独立线程，一般可以用来实现缓存功能。使用 Service Worker的话，传输协议必须为 HTTPS。因为 Service Worker 中涉及到请求拦截，所以必须使用 HTTPS 协议来保障安全。Service Worker 的缓存与浏览器其他内建的缓存机制不同，它可以让我们自由控制缓存哪些文件、如何匹配缓存、如何读取缓存，并且缓存是持续性的。

2. Memory Cache

内存中的缓存，主要包含的是当前中页面中已经抓取到的资源，例如页面上已经下载的样式、脚本、图片等。读取内存中的数据肯定比磁盘快，内存缓存虽然读取高效，可是缓存持续性很短，会随着进程的释放而释放。一旦我们关闭 Tab 页面，内存中的缓存也就被释放了。

3. Disk Cache

存储在硬盘中的缓存，读取速度慢点，但是什么都能存储到磁盘中，比之 Memory Cache 胜在容量和存储时效性上。

在所有浏览器缓存中，Disk Cache 覆盖面基本是最大的。它会根据 HTTP Herder 中的字段判断哪些资源需要缓存，哪些资源可以不请求直接使用，哪些资源已经过期需要重新请求。并且即使在跨站点的情况下，相同地址的资源一旦被硬盘缓存下来，就不会再次去请求数据。绝大部分的缓存都来自 Disk Cache。

memory cache 要比 disk cache 快的多。举个例子：从远程 web 服务器直接提取访问文件可能需要500毫秒(半秒)，那么磁盘访问可能需要10-20毫秒，而内存访问只需要100纳秒，更高级的还有 L1缓存访问(最快和最小的 CPU 缓存)只需要0.5纳秒。

prefetch cache(预取缓存)

link标签上带了prefetch，再次加载会出现。

prefetch是预加载的一种方式，被标记为prefetch的资源，将会被浏览器在空闲时间加载。

4. Push Cache

Push Cache（推送缓存）是 HTTP/2 中的内容，当以上三种缓存都没有命中时，它才会被使用。它只在会话（Session）中存在，一旦会话结束就被释放，并且缓存时间也很短暂，在Chrome浏览器中只有5分钟左右，同时它也并非严格执行HTTP头中的缓存指令。