作用
浏览器(和代理)利用缓存减少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