缓存
定义
缓存从总体定义上来看可以区分为 http 缓存和浏览器缓存
缓存类型
应用缓存 Service Worker
推送缓存 Push Cache
内存缓存(from memory cache)：内存缓存具有两个特点，
分别是速度快和时间限制。浏览器会在 js 和图片等文件解析执行后直接存入内存缓存中，
那么当刷新页面时只需直接从内存缓存中读取(from memory cache)；硬盘缓存(from disk cache)：硬盘缓存则是直接将缓存写入硬盘文件中，
读取缓存需要对该缓存存放的硬盘文件进行 I/O 操作，
然后重新解析该缓存内容，读取复杂，速度比内存缓存慢。
而 css 文件则会存入硬盘文件中，
所以每次渲染页面都需要从硬盘读取缓存(from disk cache)。浏览器缓存存在磁盘还是内存主要决定因素是内存空闲情况，如果内存使用率很低就优先放入内存，反之则放入磁盘。
以上缓存都没命中就会进行网络请求
缓存整体工作流程
http 缓存
主要依存于服务器的设置 分为强缓存和弱缓存
Web 缓存位于内容源 Web 服务器和客户端之间，当用户访问一个 URL 时，Web 缓存服务器会去后端 Web 源服务器取回要输出的内容，然后，当下一个请求到来时，如果访问的是相同的 URL，Web 缓存服务器直接输出内容给客户端，而不是向源服务器再次发送请求。Web 缓存降低了内容源 Web 服务器、数据库的负载，减少了网络延迟，提高了用户访问的响应速度，增强了用户体验
强缓存
Cache-Control
public：所有内容都将被缓存（客户端和代理服务器都可缓存）
private：所有内容只有客户端可以缓存，Cache-Control的默认取值
no-cache：客户端默认不进行强缓存，但是是否使用缓存则需要经过协商缓存来验证决定
no-store：所有内容都不会被缓存，即不使用强制缓存，也不使用协商缓存
max-age=xxx (xxx is number：缓存内容将在xxx秒后失效
expires
Expires是HTTP/1.0控制网页缓存的字段，优先级低于Cache-control;
其值为服务器返回该请求结果缓存的到期时间，
即再次发起该请求时，
如果客户端的时间小于Expires的值时，直接使用缓存结果
原因在于Expires控制缓存的原理是使用客户端的时间与服务端返回的时间做对比，
那么如果客户端与服务端的时间因为某些原因
（例如时区不同；客户端和服务端有一方的时间不准确）发生误差，
那么强制缓存则会直接失效，这样的话强制缓存的存在则毫无意义。
Pragma
由于 Pragma 在 HTTP 响应中的行为没有确切规范，
所以不能可靠替代 HTTP/1.1 中通用首部 Cache-Control，
尽管在请求中，假如 Cache-Control 不存在的话，
它的行为与 Cache-Control: no-cache 一致。
建议只在需要兼容 HTTP/1.0 客户端的场合下应用 Pragma 首部。
情况
1.标识不存在
2.标识存在 但是已经失效
3.标识存在 并且没有失效 (命中强缓存)
弱缓存(协商缓存)
协商缓存就是强制缓存失效后，浏览器携带缓存标识向服务器发起请求，
由服务器根据缓存标识决定是否使用缓存的过程
状态码为灰色的请求则代表使用了强制缓存.
Last-Modified / If-Modified-Since
Etag / If-None-Match，
Etag / If-None-Match的优先级比Last-Modified / If-Modified-Since高.
Last-Modified: 服务器返回的该资源最后修改的时间
If-Modified-Since: 客户端再次发起该请求时，
携带上次请求返回的Last-Modified值，
通过此字段值告诉服务器该资源上次请求返回的最后被修改时间。
Etag: 服务器响应请求时，返回当前资源文件的一个唯一标识(由服务器生成);
If-None-Match: 客户端再次发起该请求时，
携带上次请求返回的Etag的值
通过此字段值告诉服务器该资源上次请求返回的Etag标识。
浏览器缓存
Cookie:主要用于用户信息的存储，Cookie的内容可以自动在请求的时候被传递给服务器。
Cookie的值
value: 键值对的形式保存用户数据
http-only: 不能通过js手段获取cookie 减少xss攻击
secure: 仅在https协议下进行使用
same-site: 规定浏览器不能再跨域时携带cookie 减少csrf攻击
LocalStorage的数据将一直保存在浏览器内，直到用户清除浏览器缓存数据为止。
SessionStorage的其他属性同LocalStorage，只不过它的生命周期同标签页的生命周期，当标签页被关闭时，SessionStorage也会被清除。
| 容量 | 作用及时间 | |
|---|---|---|
| cookie | 4k | 请求时传递 |
| LocalStorage | 5M | 永久存在 |
| SessionStorage | 5M | 和标签页一致 |
| 容量 | 状态 | |
|---|---|---|
| webSql | 50M | 废弃 |
| IndexedDB | 50M | 正常 |
应用缓存
应用缓存主要是通过manifest文件来注册被缓存的静态资源，
已经被废弃，因为他的设计有些不合理的地方，他在缓存静态文件的同时，
也会默认缓存html文件。这导致页面的更新只能通过manifest文件中的版本号来决定。
所以，应用缓存只适合那种常年不变化的静态网站。如此的不方便，也是被废弃的重要原因。
PWA也运用了该文件，不同于manifest简单的将文件通过是否缓存进行分类，
PWA用manifest构建了自己的APP骨架，并运用Servie Worker来控制缓存，
这也是今天的主角。
CDN 缓存
CDN ： content-distribute-network，内容分发网络
CDN是一组分布在多个不同地区的服务器
将数据缓存在距离用户地理位置最近的CDN服务器上，
使用户以最快的速度获取 (因为相比服务器，CDN离我们更近)，
加快了用户的访问速度，也减少了网络拥堵的情况，也减轻了源服务器的压力。
可以说是强缓存和协商缓存中间的缓存机制
1 .用户在浏览器输入url
2 .浏览器向DNS服务器发起域名解析
3 .因为我们接入了CDN，所以DNS服务器会将域名的解析权交给CND专用的DNS服务器
4 .CND专用的DNS服务器将CDN的负载均衡设备IP返回给用户
5 .用户根据ip地址访问CDN的负载均衡设备IP
6 .CDN的负载均衡设备 为用户挑选一台最合适的CDN缓存服务器，把这台CDN缓存服务器的ip发给用户
7 .用户根据ip地址访问这台CDN缓存服务器
8 .这台CDN缓存服务器响应用户的请求，如果有资源，就把资源返回给用户；如果没有资源，就向它的上一级CDN缓存服务器发送请求，直到追溯到网站的源服务器，将内容拉取到本地
往返缓存
往返缓存又称为BFCache，
是浏览器在前进后退按钮上为了提升历史页面的渲染速度的一种策略。
该策略具体表现为，当用户前往新页面时，
将当前页面的浏览器DOM状态保存到bfcache中；
当用户点击后退按钮的时候，将页面直接从bfcache中加载，节省了网络请求的时间。
推送缓存
缓存
浏览器缓存
http 缓存
强缓存 弱缓存
内存缓存: 读取速度快 时效短 html js 文件放置处
硬盘缓存: 读取相对慢 css 样式文件一般放置处
expire 过期时间 服务器返回 http1.0 产物
parame 兼容 1.0 的 相当于 cache-control: no-cache;
cache-control : 优先级大于 expire 由于根据 expire 的时间判断不一定正确;
pubilc : 客户端和代理都可以缓存
private: 默认 仅客户端可以缓存
no-cache: 关闭强缓存 是否协商根据服务端返回字段判断;
no-store: 不采用缓存;
max-age: 强缓存的相对过期时间;
弱缓存:
etag: 服务器返回的唯一的资源标识符号;
etag 是否改变由由服务器中 ETag 的生成算法决定
比如 nginx 中的 etag 由 last_modified 与 content_length 组成，
而 last_modified 又由 mtime 组成
当编辑文件却未更改文件内容时，mtime 也会改变，此时 etag 改变，但是文件内容没有更改。
if-none-match: 客户端携带上次收到的 etag 给服务器用于判断资源是否过期
优先级大于后续
if-modified: 服务器返回的资源最后一次修改的时间;
if-modified-since: 客户端携带上次 if-modified 的时间给服务器进行比较;
如果协商通过则返回 304;否则请求
CDN 缓存: CDN 是分布在用户附近的资源集群
合理使用 CDN 能够优化用户请求资源的速度 减轻服务器的压力
客户端请求—–> DNS 解析器 (使用了 CDN 的情况下) ——> CDN 专用 DNS 服务器
——>携带着 CDN 负载均衡服务器的 ip 返回给客户端 ——> 客户端拿到 ip 去请求 CDN 负载均衡服务器
——> CDN 负载均衡服务器返回能让客户端快速访问资源的 CDN 服务器 ip —–> 拿着最终的 CDNip 去请求服务器
浏览器缓存:
小容量:
cookie 4k 每次请求都会发送给服务器
localStorage: 本地储存 50M 持续时间最长
sessionStorage: 叶面积储存 50M 标签页关闭即摧毁
大容量
indexDB: 50M
往返缓存 由于浏览器前进后退的缓存
value
http-only
secure: 仅仅在 https 协议中启用
same-site: 不能跨域携带