前端技术基础：浏览器缓存

Posted 2021-03-09 blogofmotherlyn

浏览器缓存介绍

我们知道，浏览器可以通过http请求获得的资源，根据服务端的设置作一定的缓存处理，以加快下一次再使用同类资源时调出的速度，这便是浏览器缓存。

浏览器缓存分类

浏览器缓存分为以下两类：强缓存和协商缓存（也叫弱缓存）

强缓存

强缓存的命中意为完全不向服务端再次请求该资源，直接从缓存中读取。强缓存对应http头中的Expires与Cache-Control两个字段。

1. Expires
   Expires，是http1.0规范的字段，它顾名思义，表示该缓存的失效时间。由于它是一个标准时间，如若服务器的系统时间与客户端的系统时间差距过大时，Expires将会在未知的情况下使缓存过期，因此在http1.1出现后，主要以Cache-Control来确定缓存是否有效。
2. Cache-Control
   Cache-Control是http1.1规范的字段。服务端在配置过程中，Cache-Control所控制的缓存失效时间优先级高于Expires。在这个字段内，我们可以定义多条属性（因此它不只确定缓存的有效期）：
   • max-age：相对时间（单位为秒）
   • no-cache：使用协商缓存，不使用强缓存
   • no-store：完全不缓存该内容
   • public：可被中间代理服务器或者终端浏览器等所有的用户缓存
   • private：只能被终端浏览器的用户缓存

协商缓存

协商缓存命中意为向服务端发送请求获取某资源时，服务端认定该资源在客户端的缓存是最新的，返回304状态码通知客户端浏览器直接使用缓存内容。协商缓存对应的http头部字段为两个组合：第一次请求的响应头中有（Last-Modified/ETag），则后续请求头中带上（If-Modified-Since/If-None-Match）。

1. Last-Modified/If-Modified-Since
   当第一次请求被响应时，浏览器收到了Last-Modified字段（一个标准时间）时，浏览器再后续请求头上带着If-Modified-Since字段，当服务端检测到从上次到现在该资源都未发生变化时，不返回该资源，而返回304状态码，告诉浏览器可以直接从缓存获取资源。
2. ETag/If-None-Match（优先级相比上者更高）
   ETag（一种校验码）表示唯一的一种资源，如果该资源发生变化，那么它的ETag也会发生变化。浏览器会在后续请求头中带上If-None-Match。此时，无论服务端中该资源是否发生变化，服务端都会返回一个ETag（因为某些资源可能是周期性修改的，也可能重复修改后内容不变，此时ETag会重新生成，但服务端不希望浏览器重新GET这个资源）。