浏览器缓存机制（性能优化）

缓存--------性能优化中简单高效的方式-------显著减少网络传输中带来的损耗

一个数据请求：分为 ①网络请求                 ②后端处理                  ③浏览器响应

浏览器缓存机制可以优化第一步和第三步------

eg：  直接使用缓存不发请求   或  发起请求但后端数据和前端一致，没必要将数据传回（减少响应数据）

缓存位置：各自有优先级，依次查找没命中时，发起网路请求

1.Service Worker      2.Memory Cache     3.Disk Cache         4 .Push Cache      5.网络请求

缓存策略：设置HTTP Header实现

强缓存

通过设置两种 HTTP Header 实现：Expires 和 Cache-Control 。

强缓存表示在缓存期间不需要请求，state code 为 200。

Expires: Wed, 22 Oct 2018 08:41:00 GMT    

表示在缓存在该时间后过期，需要再次请求 。 Expires受限于本地时间，修改本地时间，缓存失效

Cache-control: max-age=30

优先级高于 Expires 。该属性值表示资源会在 30 秒后过期，需要再次请求。

Cache-Control 可以在请求头或者响应头中设置，并且可以组合使用多种指令

协商缓存

设置两种 HTTP Header 实现：Last-Modified 和 ETag 。

当浏览器发起请求验证资源时，如果资源没有做改变，那么服务端就会返回 304 状态码，并且更新浏览器缓存有效期。

Last-Modified 表示本地文件最后修改日期，If-Modified-Since 会将 Last-Modified 的值发送给服务器，询问服务器在该日期后资源是否有更新，有更新的话就会将新的资源发送回来，否则返回 304 状态码。但是 Last-Modified 存在一些弊端：                                                  如果本地打开缓存文件，即使没有对文件进行修改，但还是会造成 Last-Modified 被修改，服务端不能命中缓存导致发送相同的资源                                                        因为 Last-Modified 只能以秒计时，如果在不可感知的时间内修改完成文件，那么服务端会认为资源还是命中了，不会返回正确的资源                                                                   因为以上这些弊端，所以在 HTTP / 1.1 出现了 ETag 。

ETag 类似于文件指纹，If-None-Match 会将当前 ETag 发送给服务器，询问该资源 ETag 是否变动，有变动的话就将新的资源发送回来。并且 ETag 优先级比 Last-Modified 高。                                                                                                                                     以上就是缓存策略的所有内容了，看到这里，不知道你是否存在这样一个疑问。如果什么缓存策略都没设置，那么浏览器会怎么处理？                                                             对于这种情况，浏览器会采用一个启发式的算法，通常会取响应头中的 Date 减去 Last-Modified 值的 10% 作为缓存时间。 

实际场景应用缓存策略

频繁变动的资源

使用 Cache-Control: no-cache 使浏览器每次都请求服务器，然后配合 ETag 或者 Last-Modified 来验证资源是否有效。这样的做法虽然不能节省请求数量，但是能显著减少响应数据大小。

代码文件：除了HTMl代码文件（因为HTMl文件一般不缓存或缓存时间短）

使用工具来打包代码------对文件名进行哈希处理，只有当代码修改后才会生成新的文件名

我们就可以给代码文件设置缓存有效期一年 Cache-Control: max-age=31536000，这样只有当 HTML 文件中引入的文件名发生了改变才会去下载最新的代码文件，否则就一直使用缓存。