浏览器缓存机制

Posted on
| Words count in article: 953

从缓存位置及缓存机制来探讨浏览器的缓存

缓存位置

缓存位置分为四种，它们之间存在优先级，通常来说在一次查找缓存且都没有命中时，才会发起网络请求

  • Sevice Worker
  • Memory Cache
  • Disk Cache
  • Push Cache
  • 网络请求
  1. Service Worker
    它是运行在浏览器背后的独立线程，使用 Service Worker 传输协议必须使用HTTPS，因为它涉及到请求拦截。Service Worker的缓存不同于浏览器内建的其他缓存机制，它可以让我们自由控制缓存哪些文件、如何匹配缓存、如何读取缓存，并且缓存是持续性的。
  2. Memory Cache
    它是内存中的缓存，读取内存中的数据肯定比磁盘快。虽然读取高效，但缓存持续性短，会随着进程的释放而释放。一旦关闭Tab，内存中的缓存就被释放。

虽说内存缓存很高效，但不能将所有数据都存放在内存中。因为计算机的内存一定比硬盘容量小得多，操作系统需要精打细算内存的使用，所以可供我们使用的并不多。但浏览器会把哪些文件丢进内存呢？- 对于大文件来说，大概率是不存储在内存中的，反之优先；- 当系统内存使用率高的话，文件会优先存进硬盘；

  1. Disk Cache
    Disk Cache就是存储在硬盘上的缓存，虽读取速度慢，但是什么都能存，相比Memory Cache胜在容量和存储时效性上。

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

  1. Push Cache
    当以上三种缓存都没有，命中时，才会被使用，而且缓存时间很短，只在会话（Session）中存在，一旦会话结束就被释放

    缓存策略

    浏览器缓存策略通常分为强缓存和协商缓存，并且缓存都是通过设置HTTP Header实现的

    强缓存

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

  2. Expires

    1
    Expires: Wed, 22 Oct 2018 08:41:00 GMT  // 表示资源会在 Wed, 22 Oct 2018 08:41:00 GMT 后过期，但由于 Expires 受限于本地时间，如果修改了本地时间，可能会导致缓存失效

  3. Cache-Control

    1
    Cache-control: max-age=30  // 表示资源会在30秒后过期，需要再次请求。Cache-Control可以在请求头或响应头中设置

协商缓存

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

  1. Last-Modified
    Last-Modified 表示本地文件最后修改日期，If-Modified-Since 会将 Last-Modified 的值发送给服务器，询问服务器在该日期后资源是否有更新，有更新的话就会将新的资源发送回来，否则返回 304 状态码
  2. ETag
    If-None-Match 会将当前 ETag 发送给服务器，询问该资源 ETag 是否变动，有变动的话就将新的资源发送回来。并且 ETag 优先级比 Last-Modified 高。
0%