缓存前端最低成本的网络优化

深入理解浏览器的缓存机制

缓存是输入一个url之后的第一步，如果存在缓存，就不用再去发起网络请求，后端处理，浏览器响应。
发起网络请求，浏览器响应这两个步骤可以有效减少。
缓存分为两中类型：
1.直接使用缓存而不发起请求，
2.发起请求但后端存储的数据和前端一致。

1.缓存位置

• Service Worker
• Memory Cache
• Disk Cache
• Push Cache

2.强缓存（依据超出某个时间来判断是否缓存，而不关心服务端文件是否更新）
不会向服务器发送请求，直接从缓存中读取资源，返回200，size显示 from disk cache 或from memory cache,强缓存可以通过设置两种HTTP Header 实现:Expires 和 cache-Control
expires: wed，22 Oct 2018 08:41:00 GMT

Cache-Control 在HTTP1.1中，Cache-Control:max-age = 300,
no-cache:是否缓存需要经过协商缓存来验证决定
no-store:所有内容都不会被缓存，不使用强制和协商缓存

3.协商缓存（强制缓存失效之后，浏览器携带标示符向服务端发起请求）

• 协商缓存生效,返回304和 not modified
• 协商缓存失效，返回200和请求结果

Last-modified 和 if-modified-since 判断两个时间的，返回 304 Not Modified
弊端：

• 本地打开缓存文件。没有修改，也会造成last-modified被修改
• last-modified 只能以秒计时，如果时间非常短，不会更新。

ETag 和 If-None-match 判断文件唯一表识符，304 空响应

对比：

• Etag 确保精确度，负载均衡的服务器，last-modified也可能不一致
• 性能上 last-modified > Etag
• 优先级 Etag > last-modified

刷新对浏览器缓存的影响

• 打开网页，查找disk cache 中是否匹配
• 普通刷新(F5),memory cache 是可用的，会被优先使用，其次是disk cache
• 强制刷新(ctrl+F5）浏览器不适用缓存，cache-control:no-chahe 和 pragma:no-cache,服务器直接返回200 和最新内容。