一文搞定浏览器缓存

82 阅读1分钟

96a198be3c72786411c64963e5922fc1e229e154.jpg

这里的浏览器缓存跟我们常用的(cookie、localStorage、sessionStorage)本地缓存不是同一个东西,而是指的是http缓存

浏览器缓存策略分为强制缓存协商缓存,两者的主要区别在于是否需要向服务器发送请求验证缓存标识是否有效

强制缓存

假设这里服务器设置使用强制缓存策略,响应头中携带Cache-Control:max-age=3600(即缓存有效时间为3600s)Expires

  1. 首次访问资源1 强制缓存-首次访问资源1.png

  2. 次访问资源1从缓存中获取 强制缓存-再次访问资源1从缓存中获取.png

  3. 次访问资源1从服务器获取 强制缓存-再次访问资源1从服务器中获取.png

缺点:依赖于浏览器时间,与服务器端时间可能不一致

协商缓存

协商缓存主要依赖的响应头包括last-modifiedETag

  1. 首次访问资源1 协商缓存-首次访问资源1.png

  2. 再次访问资源1从缓存中获取 协商缓存-再次访问资源1从缓存中获取.png

  3. 再次访问资源1从服务器获取 协商缓存-再次访问资源1从服务器中获取.png

Last-Modified缺点:

  • 只要编辑了,不管内容是否真的改变,都会以最后修改的时间作为依据,当成新资源返回
  • 时间精确度只能到秒,如果在一秒内的修改是检查不到更新的,仍会返回旧的缓存

ETag 的出现就是为了解决last-modified的上述问题。ETag会基于资源的内容编码生成一串唯一的标识字符串, 只要内容不同, 就会生成不同的ETag。

http缓存的应用场景

为html文件、图片、js和css文件等静态资源设置缓存