初探HTTP缓存👀

524 阅读3分钟

作用

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

缓存方法

expires header

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

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

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

缺点:

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

Cache-Control Max-Age

使用了偏移时间,应该是把资源创建时间和资源以及偏移时间一起存到缓存里了。每次访问资源的时候,查看资源创建的时间并且加上偏移时间和现在时间进行比较。和Expires一样都是不发送请求了。 在自己的电脑上简单测了下,500KB的也可以缓存。 同时有ExpiresCache-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。 有些插件可以帮助你设置,一种写法同时写ExpiresCache-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

参考

  1. http - What’s the difference between Cache-Control: max-age=0 and no-cache? - Stack Overflow

  2. 《高性能网站建设指南》

  3. developer.mozilla.org/en-US/docs/…