浏览器的缓存是性能优化中最高效的方法看，他可以显著减少网络传输带来的损耗。
浏览器缓存可以帮助以下两种情况下进行优化：
- 发起请求：使用缓存不发起的请求
- 浏览器响应：后端与前端数据是一致的，那么没有必要再将数据传回来
那么对于缓存，我们有下面几个问题要考虑：
- 缓存位置
- 缓存策略
- 实际场景应用
1、缓存位置
有四种缓存的位置，并且有各自的优先级，只有当依次没有命中的时候才会进行网络请求。
- service worker：他可以让我们自由控制缓存哪些文件、如何匹配缓存、并且持续缓存的。
- memory cache：内存中的缓存，内存中的数据肯定比磁盘快。但是，缓存持续性会很短，会随着进程的释放而释放，一旦关闭Tab页面，内存只能够的缓存就被释放了。
- disk cache：硬盘中的缓存，读取速到慢点，但是相对于内存缓存容量和存储时效上较好。所有的缓存中disk cache覆盖面最大，会根据HTTP Header中的字段判断哪些资源需要缓存，或者已经过期，跨站点的情况下，相同地址的资源一旦被硬盘缓存下来，就不会再次去请求数据。
- push cache：是HTTP/2中的内容，以上三种缓存没有命中，它才会被使用，并且缓存时间也很短暂，只在session中存在。一旦回话结束就会被释放。
- 网络请求：所有缓存没有命中，就会发起请求来获取资源了
2、缓存策略
缓存策略分成强缓存和协商缓存两种，并且通过设置HTTP Header来实现的。
- 强缓存：HTTP Header：Expires、Cache-Control（优先级高于expires）表示缓存期间不需要请求，state code为200。
- 协商缓存：HTTP Header：Last-Modified、Etag（优先级高于Last-Modified）如果资源没有做改变，那么服务端就会返回304状态码，并且更新浏览器缓存有效期。
下面是cache-control的一些常见的指令：
3、实际场景应用缓存策略
- 频繁变动的资源：Cache-Control：no-cache
指先要和服务器确认是否有资源更新。也就是没有强缓存，而是会有协商缓存。
然后配合协商缓存的Last-Modified、Etag（优先级高于Last-Modified）来验证是否有效。
- 代码文件 ：HTML以外的代码文件，HTML文件一般不缓存或者缓存时间短。
一般来说。现在都会使用工具来打包代码，那么对于文件进行哈希处理，只有当代码修改后才会生成新的文件名。因此我们可以设置缓存时间为一年有效期Cache-Control: max-age=31536000。只有当文件名改变才去下载新的代码文件，否则一直缓存。
参考：
前端进阶之旅
