J. 缓存机制

EasyFE
170 阅读5分钟

缓存可以说是性能优化中简单高效的一种优化方式了，它可以显著减少网络传输所带来的损耗。

对于一个数据请求来说，可以分为发起网络请求、后端处理、浏览器响应三个步骤。浏览器缓存可以帮助我们在第一和第三步骤中优化性能。比如说直接使用缓存而不发起请求，或者发起了请求但后端存储的数据和前端一致，那么就没有必要再将数据回传回来，这样就减少了响应数据。 image.png

浏览器缓存机制

主要从下面三部分来分析：

  1. 缓存位置；
  2. 缓存策略；
  3. 缓存应用场景；

缓存位置

从缓存位置来区分，总共有4种，并且各有优先级，当依次查找缓存且没有命中缓存的时候才回去请求网络。

  1. Service Worker

Service Worker 的缓存与浏览器其他内建的缓存机制不同，它可以让我们自由控制缓存哪些文件、如何匹配缓存、如何读取缓存，并 且缓存是持续性的.

  1. Memory Cache

Memory Cache 也就是内存中的缓存，读取内存中的数据肯定比磁盘快。但是内存缓存虽然读取高效，可是缓存持续性很短，会随着 进程的释放而释放。 一旦我们关闭 Tab 页面，内存中的缓存也就被释放了。

  1. Disk Cache

Disk Cache 也就是存储在硬盘中的缓存，读取速度慢点，但是什么都能存储到磁盘中，比之 Memory Cache 胜在容量和存储时效 性上。在所有浏览器缓存中，Disk Cache 覆盖面基本是最大的。它会根据 HTTP Herder 中的字段判断哪些资源需要缓存，哪些资 源可以不请求直接使用，哪些资源已经过期需要重新请求。并且即使在跨站点的情况下，相同地址的资源一旦被硬盘缓存下来，就不 会再次去请求数据.

  1. Push Cache

Push Cache 是 HTTP/2 中的内容，当以上三种缓存都没有命中时，它才会被使用。并且缓存时间也很短暂，只在会话(Session) 中存在，一旦会话结束就被释放。Push Cache 中的缓存只能被使用一次

  1. 网络请求（网关缓存等）

缓存策略

  • 强缓存和协商缓存，并且缓存策略都是通过设置 HTTP Header 来实现的;
  • 强缓存命中失败才会命中协商缓存;

缓存优先级：

no-store（资源是否可复用） -> no-cache(缓存新鲜度校验) -> must-revalidate -> private&public确认

s-max-age > max-age > expires > if-none-match > if-modified-since

强缓存： 强缓存可以通过设置两种 HTTP Header 实现:Expires 和 Cache-Control 。强缓存表示在缓存期间不需要请求，state code 为 200。

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

Cache-control: max-age=30，出现于 HTTP/1.1，优先级高于 Expires 。该属性值表示资源会在 30 秒后过期，需要再次请求。【request header】对应的返回报文（通用头）中的 Date 字段。

协商缓存： 如果缓存过期了，就需要发起请求验证资源是否有更新，协商缓存可以通过设置两种 HTTP Header 实现:Last-Modified 和 ETag，当浏览器发起请求验证资源时，如果资源没有做改变，那么服务端就会返回 304 状态码，并且更新浏览器缓存有效期。

协商缓存中，ETag存在性能问题，只能作为Last-Modified的补充项。

Last-Modified 表示本地文件最后修改日期，If-Modified-Since 会将 Last-Modified 的值发送给服务器，询问服务器在该日期后资源是否有更新，有更新的话就会将新的资源发送回来，否则返回 304 状态码。【实体header】

Last-Modified 存在一些弊端:
1 如果本地 打开 缓存文件，即使没有对文件进行修改，但还是会造成 Last-Modified 被修改，服务端不能命中缓存导致发送相同的资源
2 因为 Last-Modified 只能以秒计时，如果在不可感知的时间内(ms)修改完成文件，那么服务端会认为资源还是命中了，不会返回正确的资源

ETag 类似于文件指纹，If-None-Match 会将当前 ETag 发送给服务器，询问该资源 ETag 是否变动，有变动的话就将新的资源发送回来。并且 ETag 优先级比 Last-Modified 高。【response header】

ETag 存在一些弊端:
性能问题。

image.png

代理服务器缓存模型

image.png

客户端缓存模型

image.png

实际场景应用缓存策略

特别适合频繁变动的资源

对于频繁变动的资源，首先需要使用 Cache-Control: no-cache(资源缓存，但是立即过期) 使浏览器每次都请求服 务器，然后配合 ETag 或者 Last-Modified 来验证资源是否有效。这样的做法虽然不能节省请求数量，但是能显著 减少响应数据大小。

效果： 减少请求次数，显著减少网络传输所带来的损耗，提升性能。

拓展：

Service Worker：

运行在浏览器背后的独立线程，一般可以用来实现缓存功能。使用 Service Worker 的话，传输协议必须为 HTTPS。因为 Service Worker 中涉及到请求拦截，所以必须使用 HTTPS 协议来保障安全。

Service Worker 实现缓存功能一般分为三个步骤:首先需要先注册 Service Worker，然后监听到 install 事件以后就 可以缓存需要的文件，那么在下次用户访问的时候就可以通过拦截请求的方式查询是否存在缓存，存在缓存的话就 可以直接读取缓存文件，否则就去请求数据。

avatar
文章
阅读
粉丝