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

「这是我参与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% 作为缓存时间

总结

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