浏览器强缓存和协商缓存详解

浏览器缓存

浏览器缓存分为强缓存和协商缓存

—	强缓存	协商缓存
共同点	如果命中缓存服务器都不会返回资源	同
不同点	不发送请求到服务器	发送请求，通过请求进行Http再验证

刷新

• ctrl+F5：强制刷新 ，将跳过强缓存和协商缓存；
• F5：只跳过墙缓存，但是会检查协商缓存。

强缓存

• Expires：值为绝对时间的GMT格式的时间字符串，代表缓存资源的过期时间；
• Cache-Control：max-age 强缓存利用它判断强缓存的最大生命周期，单位为秒。

协商缓存

• Last-Modified：资源最后更新时间，随着response返回；
• If-Modified-Since：通过比较两个时间来判断资源在两次请求期间是否有过修改，如果无修改则命中协商缓存；
• ETag：服务器为不同的资源进行哈希运算所生成的字符串，只要文件内容存在差异，对应的ETag标签值就会不同，是资源内容的唯一标识，也称为指纹，会随服务器response返回，用来对比文件内容是否有变化；
• If-None-Match：服务器通过比较这个字段值与当前资源的ETag是否一致来判断，文件在两次请求之间是否有过修改，如果无修改，则命中协商缓存。

缓存决策

在使用缓存技术优化性能体验的过程中，我们既希望缓存能在客户端尽可能久的保存，而又希望它在资源发生变化时进行及时更新。着是两个互斥的优化需求。使用枪支缓存并定义足够长的时间就鞥让缓存在客户端长期保持，但是由于强制缓存的优先级高于协商缓存，所以很难进行及时更新；若使用协商缓存，虽然能够保证及时更新，但是频繁与服务器进行协商验证的响应速度肯定不及使用枪支缓存的快。如何兼顾两者的优势呢？

• HTML文件属于包含其他文件的主要文件，为保证其内容发生修改时候能及时更新，应当将其设置为协商缓存，即为cache-control: no-cache
• IMG文件，因为网站对图片信息的修改基本上都是更换修改，同时考虑到图片的大小和数量可能对客户端缓存造成不小的开销，所以可以选择强制缓存，且过期时间不适宜太长，设置为cache-control: max-age=86400
• style.css样式文件，可能存在内容的不定期修改，又想使用枪支缓存来提高效率，总和考虑可以在样式文件增加文件指纹或者版本号，比如style.51ad84f7.css,这样党文件发生修改后不同的文件便会有不同的文件指纹，需要请求的文件名称不同了，必然会对资源发起重新请求。同时考虑到网络中浏览器与CDN等中间代理的缓存，其过期时间可以适当延长到一年，即cache-control: max-age=31536000
• JavaScript脚本，类似于样式表文件的设置，采取文件指纹和较长的过期时间，如果javascript中含有用户的私人信息而不想让中间代理缓存，则可为cache-control添加`private``属性值。
  综上，从这个混存策略我们可以看出，对不同的资源进行组合使用强制缓存和协商缓存以及文件指纹或者版本号。

缓存决策注意事项

1. 拆分源码，分包加载
   对大型的前端应用迭代开发来说，其代码通常很大，如果发生修改的部分集中在几个重要的模块中，那么进行全量的代码更新会显得冗余，因此我们可以考虑在代码构建中，按照模块拆分将其打包成镀铬单独的文件。这样在每次修改后的更新提取时，仅需拉取修改的模块代码包，从而降低了需要下载的内容大小。
2. 预估资源的缓存时效
   根据不同资源的不同需求特点，规划相应的缓存更新时效，为强势缓存制定合适的max-age取值，为协商缓存提供验证更新的ETag指纹或者版本标签。
3. 控制中间代理的缓存
   可以考虑让中间代理也进行缓存。
4. 避免网址的冗余
   缓存是根据请求的URL 进行的，不同的资源会有不同的URL，所以不要给相同的资源设置不同的URL。
5. 规划缓存的层次结构
   参考缓存决策介绍的示例，不仅仅是请求的资源类型，文件资源的层次结构也会对定制的缓存策略又一定的影响，所以应该综合考虑。