前端缓存策略：强缓存与协商缓存
🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》
文章目录
- 摘要：
- 引言：
- 正文：
- 一、强缓存（Expires和Cache-Control） 🌟
- 二、协商缓存（Last-Modified和Etag） 🚀
- 三、配置方法 📦
- 总结：
- 参考资料：
摘要：
本文将介绍前端缓存策略中的强缓存和协商缓存，包括它们的原理、应用场景和配置方法。掌握这两种缓存策略可以帮助开发者优化网页性能，提高用户体验。
引言：
在Web开发中，缓存策略是优化网页性能的重要手段。强缓存和协商缓存是前端缓存策略中的两种主要方式。本文将介绍这两种缓存策略的原理、应用场景和配置方法，帮助开发者更好地理解和应用它们。
正文：
一、强缓存（Expires和Cache-Control） 🌟
强缓存是通过HTTP头部中的Expires和Cache-Control字段来实现的。这些字段告诉浏览器如何缓存资源，并在指定时间内不需要向服务器发送请求。
- Expires：Expires头部指定资源到期时间，一旦超过这个时间，浏览器会重新向服务器发送请求。
- Cache-Control：Cache-Control头部提供了更灵活的控制方式，可以设置缓存的最大年龄、是否允许缓存等。
强缓存是指浏览器在请求资源时，直接从本地缓存中获取数据，而不是从服务器获取。强缓存可以通过设置HTTP响应头中的Expires和Cache-Control字段来实现。
- Expires
Expires字段用于指定缓存过期的时间，即缓存的有效期。当浏览器再次请求该资源时，如果缓存未过期，浏览器会直接从本地缓存中获取数据，而不是向服务器发送请求。Expires字段的值是一个HTTP日期，表示缓存过期的时间。
例如，以下响应头表示该资源的有效期为1小时：
Expires: Wed, 21 Oct 2021 08:00:00 GMT - Cache-Control
Cache-Control字段用于指定缓存的行为。它可以通过设置不同的指令来控制缓存的生命周期、缓存可被代理缓存、强制缓存等。
例如，以下响应头表示该资源可以被缓存，缓存有效期为1小时，并且只能被缓存1次：
Cache-Control: max-age=3600, must-revalidate 此外，Cache-Control字段还可以设置其他指令，如public、private、no-cache、no-store等，以满足不同的缓存需求。
总之，强缓存是通过设置Expires和Cache-Control字段来实现的，可以有效地提高网页的加载速度，减少服务器的负载。
二、协商缓存（Last-Modified和Etag） 🚀
协商缓存是通过HTTP头部中的Last-Modified和Etag字段来实现的。这些字段告诉浏览器如何与服务器协商缓存资源。
- Last-Modified：Last-Modified头部指定资源最后修改的时间，浏览器会根据这个时间与服务器协商缓存。
- Etag：Etag头部提供一个资源的唯一标识符，浏览器会根据这个标识符与服务器协商缓存。
协商缓存是指浏览器在请求资源时，先向服务器发送请求，服务器根据请求头中的缓存信息来判断是否可以使用缓存。如果可以使用缓存，服务器会将缓存数据返回给浏览器，而不是重新生成数据。协商缓存可以通过设置HTTP响应头中的Last-Modified和Etag字段来实现。
- Last-Modified
Last-Modified字段用于指定资源最后修改的时间。当浏览器再次请求该资源时，会在请求头中携带Last-Modified字段的值。服务器会根据请求头中的Last-Modified值来判断资源是否发生了变化。如果资源未发生变化，服务器会返回304 Not Modified的响应，告诉浏览器可以使用缓存。
例如，以下响应头表示资源最后修改时间为2021年10月21日：
Last-Modified: Wed, 21 Oct 2021 08:00:00 GMT - Etag
Etag字段用于指定资源的唯一标识。当浏览器再次请求该资源时，会在请求头中携带Etag字段的值。服务器会根据请求头中的Etag值来判断资源是否发生了变化。如果资源未发生变化，服务器会返回304 Not Modified的响应，告诉浏览器可以使用缓存。
例如，以下响应头表示资源的Etag值为“123456”：
Etag: "123456" 总之，协商缓存是通过设置Last-Modified和Etag字段来实现的，可以有效地避免重复请求，提高网页的加载速度。
三、配置方法 📦
在Web服务器上配置强缓存和协商缓存，可以提高网页性能。以下是一些配置方法：
- 在Apache服务器上，可以通过
Expires指令和Cache-Control指令来设置强缓存。 - 在Nginx服务器上，可以通过
expires指令和add_header指令来设置强缓存。 - 在Node.js服务器上，可以通过中间件或框架（如Express）来设置强缓存和协商缓存。
总结：
本文介绍了前端缓存策略中的强缓存和协商缓存，包括它们的原理、应用场景和配置方法。掌握这两种缓存策略可以帮助开发者优化网页性能，提高用户体验。
参考资料：
- MDN Web Docs: HTTP Caching
- Expires and Cache-Control
- Last-Modified and Etag