初探HTTP缓存

最新推荐文章于 2022-08-21 16:16:07 发布

转载最新推荐文章于 2022-08-21 16:16:07 发布 · 82 阅读

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5cb4919bf265da03b20424c9

本文深入探讨了HTTP缓存机制，包括浏览器如何利用缓存减少HTTP请求，提高页面加载速度。详细介绍了Expires头、Cache-Control Max-Age的使用，以及缓存有效性确认的方法，如Last-Modified与ETag的对比。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

作用

浏览器（和代理）利用缓存减少http数量或者是减少相应文件大小，增加页面加载速度。

缓存方法

expires header

浏览器会将过期时间和相应的url缓存起来，请求同一个资源时查看是否过期，没有过期就直接从缓存里取出，不用发送请求了。过期之后的策略请看最下面的缓存有效性确认

res.setHeader(“Expires”, new Date(Date.now() + 2592000000).toUTCString());
复制代码

优点：没有额外请求 200 OK (from memory cache)

缺点：

因为是一个具体时间，需要服务端和客服端的时间一致
需要监测这个资源，当时间点到了的时候要更新过期时间

Cache-Control Max-Age

使用了偏移时间，应该是把资源创建时间和资源以及偏移时间一起存到缓存里了。每次访问资源的时候，查看资源创建的时间并且加上偏移时间和现在时间进行比较。和Expires一样都是不发送请求了。在自己的电脑上简单测了下，500KB的也可以缓存。同时有Expires 和 Cache-Control 的话后者会覆盖前者

res.setHeader("Cache-Control", "public, max-age=2592000");
复制代码

server cache-control

上面的是server端的

client cache-control

浏览器会将html文件的请求头里带上Cache-Control:max-age=0 表示即使有缓存，也会重新访问下服务器验证下。server可以根据改变日期(参考最下面的缓存有效性确认)可以返回304,这样浏览器就直接用缓存了。

优点：和Expires 一样

缺点： http1.1引入，尽管很少量的浏览器仍然使用1.0。有些插件可以帮助你设置，一种写法同时写Expires 和Cache-Control

缓存有效性确认

过期了会做个一个conditional get request(条件GET请求）。如果过期了，会进行有效性检验，如果返回304 则直接拿缓存里的，否则请求新的返回200响应。有两种方法可以查看缓存的有效性

比较最新修改日期

server: Last-Modified client: If-Modified-Since 浏览器将服务器返回的 Last-Modified 的时间和对应资源存入缓存，再请求的时候将这个时间写入请求头的 If-Modified-Since 发送给服务器，服务器判断是否过期，过期则返回200需要重新下载；否则就返回304，无需返回资源所有内容。

ETag (Entity Tags) 实体标签

类似指纹，可以理解为资源发生变化时，它一定会发生变化。 server: ETag client: If-None-Match 缺点：做服务器集群时，向不同服务器请求的资源时同一个资源时，可能返回的ETag反而不同，没法充分利用缓存，浪费带宽。《高性能网站建设指南》是不建议使用 Etag 或者要特殊配置 ETag 推荐使用 Last-Modified

参考

http - What’s the difference between Cache-Control: max-age=0 and no-cache? - Stack Overflow
《高性能网站建设指南》
developer.mozilla.org/en-US/docs/…

转载于:https://juejin.im/post/5cb4919bf265da03b20424c9