实战录 | 云端卫士前端缓存之Http Cache实践

《实战录》导语

云端卫士的新栏目《实战录》将会定期分享一些我们的工程师伙伴们在产品研发的过程中总结的实践经验，希望对于热爱技术且关注安全领域的受众有所裨益。本期分享人为云端卫士前端工程师马若涵，将带来前端缓存之Http Cache简介。PS.偷偷告诉你，本期分享人是个萌妹子哦~

Http Cache是一种约定，它是由http header决定的，一个是浏览器请求信息，另一个是服务器响应信息。主要包括Pragma: no-cache、Cache-Control、 Expires、 Last-Modified、If-Modified-Since。其中Pragma: no-cache由HTTP/1.0规定，Cache-Control由HTTP/1.1规定。

从图中我们可以看到Http Cache主要分三步：

第一次请求：浏览器通过http的header报头，附带Expires，Cache-Control，Last-Modified/Etag向服务器请求，此时服务器记录第一次请求的Last-Modified/Etag再次请求：

当浏览器再次请求的时候，附带Expires，Cache-Control，If-Modified-Since/Etag向服务器请求；

服务器根据第一次记录的Last-Modified/Etag和再次请求的If-Modified-Since/Etag做对比，判断是否需要更新，然后响应请求。

相关参数说明：

Cache-Control的主要参数 Cache-Control: private/public Public 响应会被缓存，并且在多用户间共享。 Private 响应只能够作为私有的缓存，不能再用户间共享。

Cache-Control: no-cache：不进行缓存

Cache-Control: max-age=x：缓存时间 以秒为单位

Cache-Control: must-revalidate：如果页面是过期的 则去服务器进行获取。

Expires：显示的设置页面过期时间

Last-Modified：请求对象最后一次的修改时间 用来判断缓存是否过期 通常由服务器上文件的时间信息产生。

If-Modified-Since ：客户端发送请求附带的信息 指浏览器缓存请求对象的最后修改日期 用来和服务器端的Last-Modified做比较。

Etag：ETag是一个可以 与Web资源关联的记号（token），和Last-Modified功能才不多，也是一个标识符，一般和Last-Modified一起使用，加强服务器判断的准确度。

没有指定缓存头信息的静态资源由浏览器自行选择处理方式，一般是LM-Factor算法。

（LM是date和last-modified的时间差，date是当前资源返回的时间。）

主流的 HTTP Cache 方式是对HTML等页面文件采用cache-control:no-cache的方式缓存；js、css、图片等静态资源文件放到CDN上，使用cache-control:max-age XX 的方式做长cache。