浏览器缓存机制
注意此知识点属于性能优化领域
缓存可以说是性能优化中简单高效的一种优化方式了，它可以显著减少网络传输所带来的损耗。
对于一个数据请求来说，可以分为发起网络请求、后端处理、浏览器响应步骤。浏览器缓存可以帮助我们在第一和第三步骤中优化性能。比如说直接使用缓存而不发起请求，或者发起了请求但是后端存储的数据和前端一致，那么久没有必要再将数据回传回来，这样就减少了响应数据。
接下来可以从几个部分来探讨浏览器缓存机制：
- 缓存位置
- 缓存策略
- 实际场景应用缓存策略
缓存位置
从缓存位置上来说可以分为四种，并且各自有优先级，当依次查找缓存且都没有找到的时候，才会去请求网络；
- Service Worker
- Memory Cache
- Disk Cache
- Push Cache
- 网络请求
Service Worker
Service Worker 的缓存与浏览器其他内建的缓存机制不同，它可以让我们自由控制缓存哪些文件、如何匹配缓存、如何读取缓存，并且缓存是持续性的。
当Service Worker没有找到缓存的时候，我们需要去调用fetch函数获取数据。也就是说，如果我们在Service Worker中没有找到缓存的话，会根据缓存查找优先级去查找数据。但是我们不管是从Memory Cache中还是从网络请求当中获取数据，浏览器都会显示我们是从 Service Worker当中获取的内容。
Memory Cache
Memory Cache 也就是内存中的缓存，读取内存中的数据肯定比磁盘快。但是内存缓存虽然读取高效，可是缓存持续性很短，会随着进程的释放而释放。 一旦我们关闭 Tab 页面，内存中的缓存也就被释放了。
当我们访问过页面以后，再次刷新页面，可以发现很多数据都来自于内存缓存。
那么既然内存缓存这么高效，我们是不是能让数据都存放在内存中呢？
答案肯定是不可能的。首先计算机中的内存一定比硬盘容量小得多，操作系统需要精打细算内存的使用，所以能让我们使用的内存必然不多。内存中其实可以存储大部分的文件，比如说 JSS、HTML、CSS、图片等等。但是浏览器会把哪些文件丢进内存这个过程就很玄学了，我查阅了很多资料都没有一个定论。
- 对于大文件来说，大概率是不存储在内存当中的，反之则优先。
- 当前系统内存使用率很高的话，文件优先存进硬盘。
Disk Cache
Disk Cache 也就是存储在硬盘中的缓存，读取速度慢点，但是什么都能存储到磁盘中，比之 Memory Cache 胜在容量和存储时效性上。
在所有浏览器缓存中，Disk Cache 覆盖面基本是最大的。它会根据 HTTP Herder 中的字段判断哪些资源需要缓存，哪些资源可以不请求直接使用，哪些资源已经过期需要重新请求。并且即使在跨站点的情况下，相同地址的资源一旦被硬盘缓存下来，就不会再次去请求数据。
Push Cache
Push Cache 是 HTTP/2 中的内容，当以上三种缓存都没有找到时，它才会被使用。并且缓存时间也很短暂，只在会话（Session）中存在，一旦会话结束就被释放。
Push Cache 在国内能够查到的资料很少，也是因为 HTTP/2 在国内不够普及，但是 HTTP/2 将会是日后的一个趋势。这里推荐阅读 HTTP/2 push is tougher than I thought
这篇文章，但是内容是英文的，下面书写下文章中的几个结论，有能力的朋友还是推荐自己阅读
- 所有资源都能被推送，但是Edge 和 Safari 浏览器的兼容性不是很好。
- 可以推送 no-cache 和 no-store的资源。
- 一旦连接被关闭，Push Cache就被释放。
- 多个页面可以使用相同的HTTP/2连接，也就是说能使用同样的缓存。
- Push Cache中的缓存只能被使用一次。
- 浏览器可以拒绝接受意见存在的资源推送。
- 你也可以给其他域名推送资源。
网络请求
如果上述的缓存都没找到的话，那么就只能发请求来获取资源了。
实际场景应用
单纯的了解理论而不付诸于时间是没有意义的，接下来我们来通过几个场景学习下如何运用这些理论。
频繁变动的资源
对于频繁变动的资源，首先需要使用 Cache-Control :no-cache 使浏览器每次都请求服务器，然后配合Etag 或者 Last-Modified 来验证资源是否是有效。这样的做法虽然不能节省请求数量，但是能显著减少响应数据大小。
代码文件
这里指除了HTML外的代码文件，因为HTML文件一般不缓存或者缓存时间很短。
一般来说，现在都会使用工具来打包文件，那么我们就可以对文件进行哈希处理，只有当代码修改时才会生成新的文件名。这里，我们就可以给代码文件设置缓存有效期一年 Cache-Control：max-age=31536000,这样只有当HTML文件中引入的文件名发生了改变才会去请求最新的代码文件，否则就是一直使用缓存。
本文内容基本来自掘金小册 面试之道。