浏览器缓存

        浏览器的缓存是性能优化中最高效的方法看，他可以显著减少网络传输带来的损耗。

        浏览器缓存可以帮助以下两种情况下进行优化：

1. 发起请求：使用缓存不发起的请求
2. 浏览器响应：后端与前端数据是一致的，那么没有必要再将数据传回来

        那么对于缓存，我们有下面几个问题要考虑：

1. 缓存位置
2. 缓存策略
3. 实际场景应用

   1、缓存位置

        有四种缓存的位置，并且有各自的优先级，只有当依次没有命中的时候才会进行网络请求。

1. service worker：他可以让我们自由控制缓存哪些文件、如何匹配缓存、并且持续缓存的。
2. memory cache：内存中的缓存，内存中的数据肯定比磁盘快。但是，缓存持续性会很短，会随着进程的释放而释放，一旦关闭Tab页面，内存只能够的缓存就被释放了。
3. disk cache：硬盘中的缓存，读取速到慢点，但是相对于内存缓存容量和存储时效上较好。所有的缓存中disk cache覆盖面最大，会根据HTTP Header中的字段判断哪些资源需要缓存，或者已经过期，跨站点的情况下，相同地址的资源一旦被硬盘缓存下来，就不会再次去请求数据。                                            
4. push cache：是HTTP/2中的内容，以上三种缓存没有命中，它才会被使用，并且缓存时间也很短暂，只在session中存在。一旦回话结束就会被释放。
5. 网络请求：所有缓存没有命中，就会发起请求来获取资源了

2、缓存策略

        缓存策略分成强缓存和协商缓存两种，并且通过设置HTTP Header来实现的。

1. 强缓存：HTTP Header：Expires、Cache-Control（优先级高于expires）表示缓存期间不需要请求，state code为200。
2.  协商缓存：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。只有当文件名改变才去下载新的代码文件，否则一直缓存。

参考：

前端进阶之旅

做了一份前端面试复习计划，保熟～ - 掘金