Cache-Control、ETag和过时的Expires

前记

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的到期时间,那么就会请求不到资源。

    原文作者:梁广铭
    原文地址: https://segmentfault.com/a/1190000016171065
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞