（十三）强缓存和协商缓存的区别

一、浏览器的缓存策略

浏览器的缓存策略是指浏览器在加载页面时如何使用和管理缓存机制。可以提高网页加载速度，减轻服务器负载，并提供更好的用户体验。常用的缓存策略有两种：一种是发送请求（协商缓存），一种是不需要发送请求（强缓存）。

强缓存：

当浏览器第一次发送请求后，服务器会返回缓存标识，在http1.0使用expires，http/1.1时是cache-control。当浏览器需要使用资源的时候，会去查看文件缓存标识是否过期，如果没有过期就从缓存中获取资源。

expires：规定一个缓存失效时间，过了这个时间，浏览器就需要重新发送请求获取资源。缺陷：浏览器和服务器的时间可能存在误差。

cache-control：规定一个，max-age（有效时长），即服务器返回后资源可以使用，max-age时长。

cache-control值包括：

• public：表示响应可以被任何对象（包括浏览器和CDN等）缓存
• private：只能被浏览器缓存，不能被CDN等其他对象缓存
• no-cache：浏览器使用缓存前必须向服务器发送请求验证
• no-store：表示不缓存任何响应内容。

  expires和cache-control同时存在浏览器优先使用cache-control。

  缓存过期策略：

  通过设置响应头中的Expires或Cache-Control字段，可以指定资源的过期时间。当资源过期时，浏览器会重新发送请求到服务器获取最新资源。

  协商缓存：

  当强缓存失效时，浏览器会发送一个请求到服务器，服务器会根据请求头中携带tag（last-modified。和Etag）与服务器上资源的资源的相关字段进行比较。如果资源未发生变化，则服务器返回304状态码，告诉浏览器可以使用本地缓存。

  缓存位置：

  • memory cache：内存缓存是所有缓存运行速度最快的，到那时内存小，保存时间短。
  • disk cache：磁盘缓存，内存较大，效率比内存缓存低。
  • service worker cache：运行于浏览器背后，独立于网页，有自己的生命周期。可操作性高，开发人员可以控制缓存内容，例如控制仅缓存离线内容或者全部缓存。在离线情况还可以去读取缓存的资源。
  • disk cache：http2的内容，需要浏览器和服务器都支持，可以提前与缓存。缓存即将可能用到的数据，服务器不再等待浏览器请求，可以主动通过http2发送数据，极大地提高了网页运行速度性能。

    强缓存和协商缓存的区别：

    1. 数据来源与交互方式

    强缓存：

    在缓存的有效期内在 本地缓存 拿数据，即浏览器与服务器之间不会有交互。

    协商缓存：

    每次请求都会与浏览器进行交互。浏览器会向服务器发送请求，询问资源是否有更新，服务器根据请求中的某些标识（ETag或Last-Modified）来判断资源是否发生变化，并做出响应。

    2. 响应状态码：

    强缓存：

    如果命中强缓存，浏览器会直接读取本地缓存，而不会向服务器发请求。强缓存状态码为200（OK）

    协商缓存：

    如果资源未发生变化，服务器会返回304（Not MOdidied）状态码，表示浏览器可以根据使用本地缓存的数据。如果有更新，则会返回新的数据。

    3. 缓存验证机制

    强缓存：

    通过 Expires和Cache-Control这两个HTTP请求头信息实现，指定缓存的有效期。在有效期内，浏览器不会向服务器发请求

    协商缓存：

    通过ETag和Last-Modified这两个请求头实现。ETag是一个资源的唯一标识，Last-Modified表示资源最后的修改时间。浏览器在请求时会带上这两个信息，服务器会根据这些信息来判断资源是否发生了变化。

    4. 刷新策略

    f5刷新网页时，跳过强缓存，进行协商缓存

    ctrl+f5刷新页面时会跳过强缓存和协商缓存，直接向服务器请求

    总结

    缓存类型	获取资源形式	状态码	发送请求到服务器
    强缓存	从本地缓存	200(from cache)	否，直接从缓存取
    协商缓存	从缓存取	304(Not Modified)	否，通过服务器来告知缓存是否可用

    参考：

    https://blog.csdn.net/qq_63140280/article/details/131396490?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522171263296216800184140665%2522%252C%2522scm%2522%253A%252220140713.130102334…%2522%257D&request_id=171263296216800184140665&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2allsobaiduend~default-2-131396490-null-null.142v100pc_search_result_base1&utm_term=%E6%B5%8F%E8%A7%88%E5%99%A8%E7%BC%93%E5%AD%98%E7%AD%96%E7%95%A5&spm=1018.2226.3001.4187

    https://blog.csdn.net/weixin_45822171/article/details/136850590

    https://blog.csdn.net/m0_48076809/article/details/119304747