返回

强缓存与协商缓存详解,node实践助你搞懂缓存机制

前端

浏览器缓存是什么?

浏览器缓存是浏览器在本地磁盘上存储用户最近请求过的文档,当用户再次访问同一页面时,浏览器会直接从缓存中加载文档,而不是向服务器发送请求。

这可以显著提高网页加载速度,尤其是在用户访问过的网站上。同时,浏览器缓存还可以节省服务器的开销,因为服务器不必为重复的请求而处理和发送数据。

强缓存和协商缓存

HTTP 缓存分为强缓存和协商缓存。

强缓存

强缓存是指浏览器在本地存储文档副本,并在一定有效期内不向服务器发送请求。

强缓存的有效期由服务器端的 Cache-Control 和 Expires 首部字段控制。Cache-Control 是一个更细粒度的控制指令,而 Expires 是一个更简单的过期时间指令。

如果 Cache-Control 和 Expires 都存在,那么 Cache-Control 的优先级更高。

协商缓存

协商缓存是指浏览器在本地存储文档副本,但在每次请求时都会向服务器发送请求,以检查文档是否已被修改。

协商缓存的有效期由服务器端的 Last-Modified 和 ETag 首部字段控制。Last-Modified 表示文档的最后修改时间,ETag 表示文档的唯一标识符。

如果文档已被修改,那么服务器会返回一个新的文档副本给浏览器。否则,服务器会返回一个 304 Not Modified 状态码,浏览器将继续使用本地缓存的文档。

如何在 node.js 中使用缓存控制

在 node.js 中,您可以使用 res.setHeader() 方法来设置 HTTP 缓存控制首部。

以下是使用 res.setHeader() 方法设置 Cache-Control 和 Expires 首部字段的示例:

res.setHeader('Cache-Control', 'public, max-age=3600');
res.setHeader('Expires', new Date(Date.now() + 3600 * 1000).toUTCString());

这将设置一个强缓存,有效期为 1 小时。

以下是使用 res.setHeader() 方法设置 Last-Modified 和 ETag 首部字段的示例:

res.setHeader('Last-Modified', new Date().toUTCString());
res.setHeader('ETag', '123456789');

这将设置一个协商缓存,浏览器将在每次请求时向服务器发送请求,以检查文档是否已被修改。

小结

浏览器缓存是性能优化非常重要的一个方案。合理地使用缓存可以提高用户体验,还能节省服务器的开销。掌握好缓存的原理和并合理地使用无论对前端还是运维都是相当重要的。

希望这篇文章能帮助您理解 HTTP 缓存的概念、强缓存和协商缓存的具体工作方式,并学会在 node.js 中使用缓存控制。