浏览器缓存策略(强缓存和协商缓存)

·  阅读 904
浏览器缓存策略(强缓存和协商缓存)

「这是我参与11月更文挑战的第4天,活动详情查看:2021最后一次更文挑战

引言

继上一篇web前端性能优化,浏览器优化模块中提到的浏览器缓存策略

浏览器为什么要使用缓存,因为设置缓存后,就能将第一次访问到的资源存在本地,当第二次再去访问时就可以直接访问本地的资源,也就不用去服务器上拉取

缓存位置

首先说一说浏览缓存位置,一般分为以下几种:

  • Service Worker:运行在浏览器背后的独立线程,它可以自由控制缓存哪些文件、如何匹配缓存、如何读取缓存,并且缓存是持续性的
  • Memory Cache:基于内存的缓存,读取高效速度快,但是一旦关闭网页,内存就释放了。
  • Disk Cache:基于磁盘的缓存,容量大,读取慢
  • Push Cache:推送缓存,http2中的内容,缓存在会话session中的

缓存策略

览器缓存策略分为两种:强缓存协商缓存,并且缓存策略都是通过设置 HTTP Header 来实现的

  • 强缓存
    不会向服务器发送请求,直接从缓存中读取资源,强缓存可以通过设置两种 HTTP Header 实现:Expires 和 Cache-Control

    • Expires
      缓存过期时间,用来指定资源到期的时间,是服务器端具体的时间点
      Expires 是 HTTP/1 的产物,受限于本地时间,如果修改了本地时间,可能会造成缓存失效
    • Cache-Control:
      HTTP/1.1 的产物,比如当设置Cache-Control:max-age=300,单位是s,代表5分钟内再次请求就会走强缓存

    对比:Cache-Control优先级高于Expires

  • 协商缓存
    协商缓存就是强制缓存失效后,浏览器携带缓存标识向服务器发起请求,由服务器根据缓存标识决定是否使用缓存的过程
    协商缓存可以通过设置两种 HTTP Header 实现:Last-Modified 和 ETag

    • Last-Modified:
      http1.0
      原理:浏览器第一次访问资源时,服务器会在response头里添加Last-Modified时间点,这个时间点是服务器最后修改文件的时间点,然后浏览器第二次访问资源时,检测到缓存文件里有Last-Modified,就会在请求头里加If-Modified-Since,值为Last-Modified的值,服务器收到头里有If-Modified-Since,就会拿这个值和请求文件的最后修改时间作对比,如果没有变化,就返回304,如果小于了最后修改时间,说明文件有更新,就会返回新的资源,状态码为200
    • ETag:
      http1.1
      原理:与Last-Modified类似,只是Last-Modified返回的是最后修改的时间点,而ETag是每次访问服务器都会返回一个新的token,第二次请求时,该值埋在请求头里的If-None-Match发送给服务器,服务器在比较新旧的token是否一致,一致则返回304通知浏览器使用本地缓存,不一致则返回新的资源,新的ETag,状态码为200

    对比:ETag更精确,性能上Last-Modified好点

  • 如果什么缓存策略都不设置
    这种情况,浏览器会采用一个启发式的算法,通常会取响应头中的 Date 减去 Last-Modified 值的 10% 作为缓存时间

总结

虽然浏览器缓存是由服务端设置的,但作为前端同学我们也必须了解
扩展知识体系,面试即可得心应手!欢迎点赞关注!

分类:
前端
分类:
前端
收藏成功!
已添加到「」, 点击更改