什么是Js强制缓存和协商缓存？ - 牛骑害我留级 - 沸点 - 掘金

什么是Js强制缓存和协商缓存？

当在浏览器中访问网站时，经常会使用到缓存策略来提高性能。下面是一些实际例子，展示了如何使用强制缓存和协商缓存。
强制缓存的例子：
假设你在网页中引用了一个静态的 Logo 图片，且该图片不会频繁更改。你可以通过在服务器端的响应头中设置强制缓存来优化该请求：
// 强制缓存一个月
Cache-Control: public, max-age=2592000

这意味着在用户第一次访问该图片后，浏览器会将其缓存起来，并且在未过期前不再向服务器发送请求。这样可以减少对网络资源的依赖，提高页面加载速度。

协商缓存的例子：
假设你在网页中引用了一个 JavaScript 文件，你希望在文件发生变化时通知浏览器重新获取最新版本。你可以通过在服务器端的响应头中设置协商缓存来实现：
// 设置 Last-Modified 和 ETag
Last-Modified: Mon, 10 Jul 2023 12:00:00 GMT
ETag: "abcd1234"

当浏览器再次发送请求时，会携带上一次请求中的 Last-Modified 和 ETag，服务器会通过对比这些值来判断资源是否发生了变化。如果资源未发生变化，服务器返回 304 Not Modified，浏览器则使用缓存的版本；如果资源发生了变化，服务器会返回新的资源以及更新的响应头。
这两个例子展示了如何使用强制缓存和协商缓存来优化网页加载性能。通过合理配置缓存策略，可以有效减少网络请求，提高用户体验。

展开

前端开发圈

等人赞过