浙江联科网站建设,网站首页幻灯片代码,代发qq群发广告推广,免费做一建或二建题目的网站#x1f90d; 前端开发工程师、技术日更博主、已过CET6 #x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 #x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 #x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E… 前端开发工程师、技术日更博主、已过CET6 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》 文章目录 摘要引言正文1️⃣ Cache-Control2️⃣ Expires3️⃣ Last-Modified4️⃣ Etag 总结参考资料 摘要
本文将介绍HTTP缓存的重要性、缓存策略以及常见的缓存头信息如Cache-Control、Expires、Last-Modified和Etag帮助您了解如何利用缓存提高网站性能和用户体验。
引言 在现代Web开发中性能优化是提升用户体验的关键。HTTP缓存是一种优化网站性能的技术它允许浏览器缓存静态资源减少重复请求从而提高加载速度和运行效率。接下来让我们一起来探索HTTP缓存策略的奥秘。
正文
1️⃣ Cache-Control
Cache-Control是HTTP缓存控制的首选头部信息它允许服务器和客户端指定缓存策略。Cache-Control可以设置缓存的最大过期时间、是否允许缓存、是否需要重新验证等。常见的Cache-Control值包括public、private、no-cache、max-age等。
Cache-Control 是 HTTP 响应标头之一用于控制缓存的行为。以下是一些使用 Cache-Control 的案例 设置缓存过期时间 在响应中设置 Cache-Control 标头可以指定缓存过期时间。例如以下代码设置缓存过期时间为 30 分钟 res.setHeader(Cache-Control, max-age1800);设置缓存私有性 通过设置 Cache-Control 标头可以控制缓存是否只对发送方有效或者可以被任何缓存代理缓存。例如以下代码设置缓存为私有缓存 res.setHeader(Cache-Control, private, max-age1800);设置缓存公共性 与设置缓存私有性相反以下代码设置缓存为公共缓存可以被任何缓存代理缓存 res.setHeader(Cache-Control, public, max-age1800);设置缓存协商 通过设置 Cache-Control 标头可以控制缓存协商的行为。例如以下代码设置缓存协商为“开” res.setHeader(Cache-Control, must-revalidate);或者以下代码设置缓存协商为“关” res.setHeader(Cache-Control, no-cache);设置多个缓存指令 可以在一个 Cache-Control 标头中设置多个缓存指令。例如以下代码设置缓存过期时间为 30 分钟并设置缓存为私有缓存 res.setHeader(Cache-Control, private, max-age1800);通过使用 Cache-Control 标头可以有效地控制缓存的行为从而提高网站性能和减少服务器负载。
2️⃣ Expires
Expires是HTTP缓存的早期头部信息它指定了资源的过期时间。当资源过期后浏览器会重新请求服务器获取最新版本。Expires的值是一个绝对时间戳表示资源到指定时间点为止都是有效的。
Expires 是 HTTP 响应标头之一用于指定缓存过期的日期和时间。以下是一些使用 Expires 的案例 设置缓存过期时间 在响应中设置 Expires 标头可以指定缓存过期时间。例如以下代码设置缓存过期时间为 2022 年 1 月 1 日的 00:00:00 res.setHeader(Expires, Wed, 01 Jan 2022 00:00:00 GMT);设置相对缓存过期时间 除了设置绝对的过期时间Expires 标头也可以设置相对时间。例如以下代码设置缓存过期时间为 30 分钟 res.setHeader(Expires, 1800 seconds);使用 Expires 标头可以有效地控制缓存的行为告诉客户端缓存应该在哪个时间点之后进行更新。这样可以减少网络请求提高网站性能。
但是由于服务器和客户端之间的时间同步问题以及代理服务器可能修改或删除 Expires 标头Expires 标头已经逐渐被 Cache-Control 标头取代作为缓存控制的推荐方法。
3️⃣ Last-Modified
Last-Modified是HTTP缓存的另一个头部信息它指定了资源的最后修改时间。当浏览器请求资源时会携带Last-Modified的值服务器会根据这个值判断资源是否已经更新。如果资源未更新服务器会返回304 Not Modified状态码浏览器使用缓存资源。
Last-Modified 是 HTTP 响应标头之一用于指定资源最后一次修改的日期和时间。以下是一些使用 Last-Modified 的案例 设置 Last-Modified 标头 在响应中设置 Last-Modified 标头可以告知客户端资源最后一次修改的时间。例如以下代码设置 Last-Modified 标头为 2022 年 1 月 1 日的 00:00:00 res.setHeader(Last-Modified, Wed, 01 Jan 2022 00:00:00 GMT);获取 Last-Modified 标头 在请求中可以通过 req.headers[last-modified] 获取 Last-Modified 标头的值。例如以下代码获取 Last-Modified 标头并将其存储在 lastModified 变量中 const lastModified req.headers[last-modified];使用 Last-Modified 标头可以实现缓存控制通过比较服务器端和客户端资源最后一次修改的时间可以决定是否需要重新获取资源。但是由于服务器和客户端之间的时间同步问题Last-Modified 标头已经逐渐被 ETag 标头取代作为缓存控制的推荐方法。
4️⃣ Etag
Etag是HTTP缓存的另一种头部信息它是一个唯一标识资源的哈希值。当浏览器请求资源时会携带Etag的值服务器会根据这个值判断资源是否已经更新。如果资源未更新服务器会返回304 Not Modified状态码浏览器使用缓存资源。
ETag 是 HTTP 响应标头之一用于提供资源的一致性校验。以下是一些使用 ETag 的案例 设置 ETag 标头 在响应中设置 ETag 标头可以提供资源的唯一标识符。例如以下代码设置 ETag 标头为一个字符串 res.setHeader(ETag, 1234567890abcdef);获取 ETag 标头 在请求中可以通过 req.headers[etag] 获取 ETag 标头的值。例如以下代码获取 ETag 标头并将其存储在 etag 变量中 const etag req.headers[etag];使用 ETag 标头可以实现缓存控制通过比较服务器端和客户端资源的一致性可以决定是否需要重新获取资源。ETag 标头比 Last-Modified 标头更可靠因为其不会受到服务器和客户端之间的时间同步问题影响。
以下是一个简单的缓存控制示例使用 ETag 和 If-None-Match 标头
const express require(express);
const app express();app.get(/resource, (req, res) {const etag 1234567890abcdef;if (req.headers[if-none-match] etag) {res.status(304).end(); // Not Modified} else {res.setHeader(etag, etag);res.send(This is the resource.);}
});app.listen(3000, () {console.log(Server is running on port 3000);
});在上述示例中如果客户端发送的 If-None-Match 标头与服务器端设置的 ETag 标头相匹配那么服务器将返回 304 Not Modified 状态码表示资源未修改客户端可以继续使用缓存的资源。如果不匹配服务器将返回新的 ETag 标头和资源内容。
总结 HTTP缓存是一种优化网站性能的重要技术它允许浏览器缓存静态资源减少重复请求从而提高加载速度和运行效率。通过了解Cache-Control、Expires、Last-Modified和Etag等缓存头信息我们可以更好地利用缓存提高网站性能和用户体验。
参考资料
HTTP缓存控制指南HTTP缓存策略解析HTTP缓存头部信息详解
