浏览器复习-缓存

2021-05-16 08:10:352024-04-01 11:55:56

对于一个数据请求来说，可以分为发起网络请求、后端处理、浏览器响应三个步骤。浏览器缓存可以帮助我们在第一步和第三步中优化性能。直接使用缓存而不发起请求或发起了请求但后端存储的数据与浏览器缓存中的一致那就没必要将数据传输回来，直接读取缓存中的数据节省网络传输开销

缓存的意义在于减少请求，更多地使用本地的资源，给用户更好的体验的同时，也能减轻服务器压力。所以最佳实践就是尽可能命中强缓存，同时能在版本更新的时候让客户端的缓存失效

缓存位置

memory cache

memory cache就是内存中的缓存，读取数据的速度比较快。虽然内存缓存高效，但是缓存持续性很短，会随着进程的释放而释放，一旦我们关闭页面，内存中的数据也就被释放了。（刷新页面不会丢失）

disk cache

存储在硬盘中的缓存，读取速度较内存慢，但存储量大，存储时间长。较memory cache胜在容量和时效性上

在所有浏览器缓存中，disk cache覆盖面基本是最大的。它会根据 http header中的某些字段判断哪些资源需要被缓存，哪些资源可以直接从缓存取而不用发送请求去获取。即使在跨站点的情况下，相同地址的资源一旦被硬盘缓存下来就不会再去请求数据

push cache

http/2中的内容，仅在会话(session)中存在

缓存策略

通常浏览器缓存策略分为两种：强缓存和协商缓存，并且缓存策略都是通过设置http header来实现的

  1. 浏览器每次发起请求，都会先在浏览器中查找该请求的结果及缓存标识
  2. 浏览器每次拿到返回的结果请求都会将该结果和缓存标识存入浏览器缓存中

发起请求及缓存处理流程：

  1. 浏览器在加载资源时，现根据这个资源的一些http header字段判断它是否命中强缓存，强缓存如果命中，浏览器会直接从自己的缓存中读取资源不会发送请求到服务器
  2. 当强缓存没有命中的时候，浏览器会发送一个请求到服务器，服务器根据http header中的一些字段判断这个资源是否命中协商缓存，如果协商缓存命中，服务器会以304响应这个请求，不会返回该资源，告诉浏览器可以从缓存中读取；如果没命中则返回该资源

浏览器缓存策略

强缓存

强缓存可以通过设置两种http header来实现：Expires和Cache-Control

  • Expires

Expires: Web, 22 Oct 2021 08:41:00 GMT

Expires是http/1的产物，表示资源会在Web, 22 Oct 2021 08:41:00 GMT后过期，需要再次请求。Expires受限于本地时间，如果修改了本地时间可能会造成缓存失效

  • Cache-Control

Cache-Control: public, max-age=31536000

Cache-Control出现在http/1.1，优先级高于Expires。该属性表示资源会在31536000秒后失效需要再次请求

Cache-Control可以在请求或响应头中设置，并且可以组合使用多种指令

cache-control

协商缓存

协商缓存可以通过设置两种http header实现：Last-Modified和ETag

  • Last-Modified和If-Modified-Since

Last-Modified会随着访问资源时返回，表示该资源在浏览器上最后修改时间。浏览器再次请求资源时，If-Modified-Since会将Last-Modified的值携带上，询问服务器在该日期后资源是否有更新，有的话就会将新的资源送回来，否则返回304，即命中缓存

和Expires一样，本地打开缓存文件一样会导致缓存失效。此外，Last-Modified以秒计时，如果以更细粒度的时间内修改文件，服务器还是认为文件没有更新告诉浏览器可以使用缓存中的文件

  • ETag和If-None-Match

ETag类似文件指纹，也会随着请求资源时返回(浏览器生成)。浏览器再次请求资源时，If-None-Match会将ETag的值携带上，询问该资源的ETag是否有过变动，有变动的话就将最新的资源返回，否则返回304，即命中缓存

ETag的优先级高于Last-Modified

  • no-cache 和 no-store

no-cache 要求在使用缓存响应前进行验证。客户端可以存储资源，但每次都必须向服务器进行新鲜度校验。 如果资源仍然有效（状态码为 200），则客户端可以使用缓存；否则，需要从服务器获取新的资源（状态码为 304）。适用于需要强制服务器端新鲜度校验的情况，例如 index.html 或不带哈希的现代构建环境下的静态资源。

no-store 完全禁止在客户端存储响应数据。每次请求都必须从原始服务器重新获取数据，不允许任何形式的缓存存储。适用于防止无意中释放或保留敏感信息的场景，例如备份磁带上的数据。

强缓存和协商缓存的异同

强缓存和协商缓存的共同点是如果命中都是从缓存中读取资源数据；区别是协商缓存总是会发送一个请求而强缓存不会