[front-end] 浏览器文件缓存优化策略

本文针对的是浏览器级对文件缓存对一些优化对总结

HTTP缓存

---

http缓存指的是缓存http请求的数据，一次http请求包含几个主要步骤

http缓存主要在第3和第4步进行，根据协议不同，会采用强缓存和协商缓存（弱缓存）两种

强缓存

强缓存指缓存在本地，不会再向服务端请求的文件缓存方式
强缓存采用的是 Cache-Control 与 Expires 两个字段
Expires：HTTP 1.0 http-date 过期时间 指定了文件过期的绝对时间，意即，当前时间小于过期时间时，采用本地缓存
Cache-Control: HTTP 1.1 Cache-Control有多个属性，具体参考，其中主要的是max-age，指定了文件过期的相对时间，意即，当前时间小于生成时间加上max-age时，采用本地缓存
Expires与Cache-Control共同使用时，Cache-Control的优先级更高

设置了强缓存的文件status会变为200，然后从memory cache或disk cache中直接读取

需要考虑的是，强缓存应当用在那些采用了hash（或者说，每次上线文件名不一样）的文件，否则会造成在过期时间内无法清楚缓存

协商缓存（弱缓存）

协商缓存指本地强缓存失效情况下，再向服务器验证的缓存机制
协商缓存采用的是 Etag 与 Last-Modified 两个字段
ETag: 用于唯一的标识一个资源，与If-Match与If-None-Match协同使用
If-Match: 有满足的ETag，才会返回（或上传）资源
If-None-Match: 没有满足的ETag，才会返回（或上传）资源

Last-Modified: 用于标识资源上次修改的时间
If-Modified-Since: 只有在指定时间后有修改，才会返回（或修改）资源
If-Unmodified-Since: 只有在指定时间后没有修改，才会返回（或修改）资源

同时使用的时候，Last-Modified的优先级低于ETag
如果缓存成功，协商缓存的数据请求会是304（get）

对于名称不变但是内容可能会变化的资源，采用协商缓存比较好

参考

1. 前端性能优化之缓存技术