谈⼀谈浏览器的缓存机制

简单来说，它就是通过保留已接收到的网页资源副本，在资源有效期内再次请求时，直接使用缓存的副本，而不是每次都向服务器发起请求。这样一来，就能提高网页的加载速度，减少网络带宽的消耗啦。

缓存机制主要分为两种：强缓存和协商缓存。强缓存就是浏览器在请求资源时，会先检查本地缓存是否存在该资源的副本，并且这个副本是否过期。如果资源副本未过期，浏览器就直接使用本地缓存，不会向服务器发送请求。而协商缓存则是当资源的副本过期或者浏览器的缓存被清除时，浏览器会向服务器发送请求，询问服务器该资源是否有所变动，如果服务器告知没有变动，浏览器就继续使用缓存的资源。

举个例子来说明一下：比如你经常访问一个网站，这个网站的logo图片是很少变动的。第一次访问时，浏览器会下载这个logo图片并保存到本地缓存中。下次你再访问这个网站时，浏览器会先检查本地缓存中的logo图片是否过期。如果没过期，就直接使用缓存中的图片，这样就不需要再次从服务器下载，从而加快了网页的加载速度。

web 资源的缓存策略⼀般由服务器来指定，可以分为两种，分别是强缓存策略和协商缓存策略。

使⽤强缓存策略时，如果缓存资源有效，则直接使⽤缓存资源，不必再向服务器发起请求。强缓存策略可以通过两种⽅式来设置，分别是 http 头信息中的 Expires 属性和 CacheControl 属性。

服务器通过在响应头中添加 Expires 属性，来指定资源的过期时间。在过期时间以内，该资源可以被缓存使⽤，不必再向服务器发送请求。这个时间是⼀个绝对时间，它是服务器的时间，因此可能存在这样的问题，就是客户端的时间和服务器端的时间不⼀致，或者⽤户可以对客户端时间进⾏修改的情况，这样就可能会影响缓存命中的结果。

Expires 是 http1.0 中的⽅式，因为它的⼀些缺点，在 http 1.1 中提出了⼀个新的头部属性就是 Cache-Control 属性，它提供了对资源的缓存的更精确的控制。它有很多不同的值，常⽤的⽐如我们可以通过设置 max-age 来指定资源能够被缓存的时间的⼤⼩，这是⼀个相对的时间，它会根据这个时间的⼤⼩和资源第⼀次请求时的时间来计算出资源过期的时间，因此相对于 Expires来说，这种⽅式更加有效⼀些。

常⽤的还有⽐如 private ，⽤来规定资源只能被客户端缓存，不能够代理服务器所缓存。还有如 no-store ，⽤来指定资源不能够被缓存，no-cache 代表该资源能够被缓存，但是⽴即失效，每次都需要向服务器发起请求。

⼀般来说只需要设置其中⼀种⽅式就可以实现强缓存策略，当两种⽅式⼀起使⽤时，Cache-Control 的优先级要⾼于 Expires 。

使⽤协商缓存策略时，会先向服务器发送⼀个请求，如果资源没有发⽣修改，则返回⼀个 304 状态，让浏览器使⽤本地的缓存副本。如果资源发⽣了修改，则返回修改后的资源。协商缓存也可以通过两种⽅式来设置，分别是 http 头信息中的 Etag 和 Last-Modified 属性。

服务器通过在响应头中添加 Last-Modified 属性来指出资源最后⼀次修改的时间，当浏览器下⼀次发起请求时，会在请求头中添加⼀个 If-Modified-Since 的属性，属性值为上⼀次资源返回时的 Last-Modified 的值。当请求发送到服务器后服务器会通过这个属性来和资源的最后⼀次的修改时间来进⾏⽐较，以此来判断资源是否做了修改。如果资源没有修改，那么返回 304 状态，让客户端使⽤本地的缓存。如果资源已经被修改了，则返回修改后的资源。使⽤这种⽅法有⼀个缺点，就是 Last-Modified 标注的最后修改时间只能精确到秒级，如果某些⽂件在1秒钟以内，被修改多次的话，那么⽂件已将改变了但是 Last-Modified 却没有改变，这样会造成缓存命中的不准确。

因为 Last-Modified 的这种可能发⽣的不准确性，http 中提供了另外⼀种⽅式，那就是 Etag 属性。服务器在返回资源的时候，在头信息中添加了 Etag 属性，这个属性是资源⽣成的唯⼀标识符，当资源发⽣改变的时候，这个值也会发⽣改变。在下⼀次资源请求时，浏览器会在请求头中添加⼀个 If-None-Match 属性，这个属性的值就是上次返回的资源的Etag 的值。服务接收到请求后会根据这个值来和资源当前的 Etag 的值来进⾏⽐较，以此来判断资源是否发⽣改变，是否需要返回资源。通过这种⽅式，⽐ Last-Modified 的⽅式更加精确。

当 Last-Modified 和 Etag 属性同时出现的时候，Etag 的优先级更⾼。使⽤协商缓存的时候，服务器需要考虑负载平衡的问题，因此多个服务器上资源的 Last-Modified 应该保持⼀致，因为每个服务器上 Etag 的值都不⼀样，因此在考虑负载平衡时，最好不要设置 Etag 属性。

强缓存策略和协商缓存策略在缓存命中时都会直接使⽤本地的缓存副本，区别只在于协商缓存会向服务器发送⼀次请求。它们缓存不命中时，都会向服务器发送请求来获取资源。在实际的缓存机制中，强缓存策略和协商缓存策略是⼀起合作使⽤的。浏览器⾸先会根据请求的信息判断，强缓存是否命中，如果命中则直接使⽤资源。如果不命中则根据头信息向服务器发起请求，使⽤协商缓存，如果协商缓存命中的话，则服务器不返回资源，浏览器直接使⽤本地资源的副本，如果协商缓存不命中，则浏览器返回最新的资源给浏览器。