前记
HTTP缓存是web性能优化的一个常识,目的是当你第二次请求时,将JS、CSS、的请求速度加快,但是html却不能设置Cache-Control
,这是为什么,可以想一想
Cache-Control
如何用
response.setHeader('Cache-Control','max-age=315360000')
响应设置响应头,max-age
是设置缓存停留时间,单位为秒,从你接收到那个响应开始计时,一般是设置10年或者1年
功能
设置Cache-Control
可以在一段时间内不访问服务器,直接用本地内存或者硬盘中获取响应,因此极大的加快了访问速度,关键在于不会发送HTTP请求。
更新资源
当缓存那么久,那如果缓存资源更新了怎么办
- 可以添加查询参数,如
?v=...
这样就可以更新缓存了 - 还有就是可以在入口html文件处把url变一下,和以前的都不一样,也可以更新缓存
- 还有就是在文件名前面生成一串字符,变更文件名,也可以更新缓存
ETag
说到ETag
就不得不提md5摘要算法,这个算法可以计算一个文件,然后生成一串字符,相同文件内容生成的字符串是一样的,如果内容不相同生成的字符串就会不一样,并且内容差别越小,字符串差别越大
如何用
response.setHeader('ETag', fileMd5)
fileMd5
就是md5生成的字符串
功能
设置了ETag
后,以后每次访问服务器都要设置头If-None-Match
来带上那串字符串,资源未变更,服务器就会返回304,和Cache-Control
不同就是,ETag还是会请求,不过资源不变的话,响应体是空的。
更新资源
这就非常简单了,当服务器更换了一个资源,那生成的字符串就会不一样,当If-None-Match
带着原来的字符串来比较时,发现字符串不一样,那就会下载新的资源
过时的Expires
Expires
也是一个响应头,功能和Cache-Control
差不多,但是现在逐渐被淘汰了,并且如果在Cache-Control
响应头设置了 “max-age” 或者 “s-max-age” 指令,那么Expires
头会被忽略。
究其原因是因为Expires
也是设置时间来做期限,但是它设置的是到期时间,并且要是GMT格式的时间,最致命的是它的到期时间是依据系统时间来看的,如果系统时间错误超过了Expires
的到期时间,那么就会请求不到资源。