阅读 62

浏览器的缓存

浏览器的缓存机制

  • 强缓存
  • 协商缓存
  • 缓存位置
http报文
强缓存
  • 浏览器中的缓存作用分为两种情况,一种需要发送http请求,一种不需要发送http请求
  1. Expires 即过期时间,存在服务端返回的响应头中,告诉浏览器在这个过期时间之前可以直接从缓存里面获取数据,无需再次请求,(因为服务器和浏览器里面的时间可能不同步,所以在http1.1版本中被抛弃了)
  2. Cache-Control

在http1.1中,采用了一个非常关键的字段:Cache-Control;它与Expires本质的区别是没有过期时间,而是采用过期时长来控制缓存

Cache-Control:max-age=3600
复制代码

代表这个响应返回在3600秒,也就是一个小时之内可以直接使用缓存

  • public: 客户端和代理服务器都可以缓存。因为一个请求可能要经过不同的代理服务器最后才到达目标服务器,那么结果就是不仅仅浏览器可以缓存数据,中间的任何代理节点都可以进行缓存。
  • private: 这种情况就是只有浏览器能缓存了,中间的代理服务器不能缓存。
  • no-cache: 跳过当前的强缓存,发送HTTP请求,即直接进入协商缓存阶段。
  • no-store: 不进行任何形式的缓存
  • s-maxage: 是针对代理服务器的缓存时间
  1. Expires和Cache-Control都存在,优先考虑Cache-Control,如果强缓存失效,进入协商缓存

强制缓存.png

协商缓存
  • 协商缓存就是强缓存失效后,浏览器携带缓存标识向服务器发起请求,由服务器根据缓存标识决定是否使用缓存的过程
  • 服务端判断客户端资源,是否和服务端资源一样
  • 协商缓存生效返回304,协商返回失效,返回200和请求结果
  • 相关字段:
  1. Last-Modified是服务器响应请求时,返回该资源文件在服务器最后被修改的时间。在浏览器第一次给服务器发送请求后,服务器会在响应头中加上这个字段
  2. 浏览器接收到后,如果再次请求,会在请求头中携带If-Modified-Since字段,这个字段的值也就是服务器传来的最后修改时间。
  3. 服务器拿到请求头中的If-Modified的字段,会和服务器中该资源的最后修改时间对比
    • 如果请求头中这个值小于最后修改时间,说明需要更新,返回新的资源,和http请求响应的流程是一样的
    • 否则返回304,告诉浏览器直接用缓存

Last-Modified.png

  • ETag
  1. ETag 是服务器根据当前文件的内容,给文件生成的唯一标识,只要里面的内容有改动

,这个值就会发生改变,服务器通过响应头把这个值给浏览器。 2. 浏览器接收到ETag的值,会在下次请求时,将这个值作为If-None-Match这个字段的内容,并放到请求头中,然后发给服务器。 3. 服务器接收到If-None-Match后,会跟服务器上该资源的ETag进行比对 - 如果两者不一样。说明要更新了,返回新的资源,跟常规的http请求是一样的 - 否则返回304,告诉浏览器直接用缓存 对比 1. 在精准度上,ETag优于Last-Modified。优于 ETag 是按照内容给资源上标识,因此能准确感知资源的变化。而 Last-Modified 就不一样了,它在一些特殊的情况并不能准确感知资源变化,主要有两种情况: - 编辑了资源文件,但是文件内容并没有更改,这样也会造成缓存失效。 - Last-Modified 能够感知的单位时间是秒,如果文件在 1 秒内改变了多次,那么这时候的 Last-Modified 并没有体现出修改了。 1. 在性能上,Last-Modified优于ETag,也很简单理解,Last-Modified仅仅只是记录一个时间点,而 Etag需要根据文件的具体内容生成哈希值。 2. 如果资源不变被重复生成,而内容不变,则Etag更精准 如果两方式都支持的话,优先选择ETag Etag.png

缓存位置
  • 浏览器的缓存位置一共有四种,按优先级从高到低排列分别是:
    1. Service Work
    2. Memory Cache
    3. Disk Cache
    4. Push Cache
  • Service Work
    1. Service Worker 借鉴了Web Worker的思路,即让JS运行在主线程之外,由于它脱离了浏览器的窗体,因此无法直接访问DOM。但是,它仍然能帮助我们完成很多事情,比如离线缓存、消息推送和网络代理等功能。
    2. 离线缓存就是Service Worker Cache
  • Memory Cache 和 Disk Cache
    1. Memory Cache指的是内存缓存,从效率上讲,它是最快的。但是从存活时间来讲又是最短的,当渲染进程结束后,内存缓存也就不存在了。
    2. Disk Cache就是存储在磁盘中的缓存,从存取效率上讲是比内存缓存满的,但是他的优势在于存储容量的存储时长。
    3. 两者的比较 比较大的JS、CSS文件会直接被丢进磁盘,反之丢进内存 内存使用率比较高的时候,文件优先进入磁盘
  • Push Cache
    1. 即推送缓存,这是浏览器缓存的最后一道防线,它属于http2。
缓存机制的总结
  • 首先通过Cache-Control验证强缓存是否可用
    1. 如果强缓存可用,直接使用
    2. 否则进入协商缓存,即发生HTTP请求,服务器通过请求头中的If-Modified-Since或者If-None-Match字段检查资源是否更新 若资源更新,返回资源和200状态码 否者,返回304,告诉浏览器直接冲存换获取资源

缓存.png

三种刷新操作
  1. 正常操作:地址栏输入url,跳转链接,前进后退等(强制缓存有效,协商缓存有效)
  2. 手动刷新:F5,点击刷新按钮,右击刷新按钮(强制缓存失效,协商缓存失效)
  3. 强制刷新:Ctrl+F5(强制缓存失效,协商缓存失效)
文章分类
前端
文章标签