WHAT - 浏览器缓存机制系列（二）强缓存、协商缓存和启发式缓存

目录一、介绍二、强缓存三、协商缓存三、html js 缓存策略四、启发式缓存启发式缓存什么时候发生浏览器的推算规则如果没有 Last-ModifiedDevTools 里怎么看出是启发式缓存启发式缓存的风险1. 浏览器行为不一致2. 更新不可控3. CDN 行为不同总结今天主要介绍 HTTP请求缓存中的强缓存和协商缓存。一、介绍浏览器每次发起请求时，会先在浏览器缓存中查找请求的缓存结果和缓存标识。当浏览器第一次向服务器发起请求后，浏览器缓存肯定是没有对应缓存的，所以向服务器发起请求，服务器响应该请求，并返回请求结果和缓存规则，浏览器拿到响应后，将请求结果和缓存标识存入浏览器缓存。浏览器在后续加载对应资源时会根据第一次请求资源时返回的缓存标识来确定缓存规则。二、强缓存根据是否超出某个时间来决定是否从缓存获取数据，不关心服务器文件是否已经更新。在 chrome 控制台的 Network 选项中可以看到有的请求 Size 显示from disk cache或from memory cache，这就是设置了强缓存的结果。要想实现强缓存可以通过设置 HTTP Header 中的Expires和Cache-Control：ExpiresExpires字段是一个HTTP响应头，它指定了资源的到期时间，以GMT格式的日期/时间表示。浏览器会将该时间与客户端的本地时间进行比较，以确定资源是否过期。如果资源的到期时间早于当前时间，浏览器将从服务器重新获取该资源。示例：Expires: Thu, 01 Dec 2022 16:00:00 GMT在上面的示例中，资源的到期时间被设置为2022年12月1日下午4点（GMT时间）。但是，Expires存在一些问题：（1）时区问题： Expires头使用的是 GMT 格林尼治标准时间，可能导致时区差异而产生问题。（2）精度问题： Expires头只能指定到秒级别的精度，而现代浏览器和服务器通常需要提供更高精度的缓存控制。（3）与 Cache-Control 冲突：如果同时使用了Cache-Control和Expires头，Cache-Control的优先级更高。因此，现代Web开发更倾向于使用Cache-Control头来控制缓存，因为它更灵活、精确，并且不容易出现时区等问题。在实际开发中，你可以只使用Cache-Control头来设置缓存策略，而不使用Expires头。接下来我们这就介绍Cache-Control。Cache-Control：public|private|no-store|no-cache|max-age在 HTTP/1.1 中，Cache-Control 是最重要的规则。Cache-Control 是一种更为灵活的方式来设置缓存策略。它可以指定资源的到期时