浏览器缓存
Http缓存
1.1强缓存
浏览器中的缓存作用分为两种情况，一种是需要发送HTTP请求，一种是不需要发送。
首先是检查强缓存，这个阶段不需要发送HTTP请求。
Expires（HTTP/1） => Cache-Control（HTTP/1.1） 从过期时间变成过期时长
Cache-control: max-age=30 该属性值表示资源会在 30 秒后过期，需要再次请求。Cache-Control 可以在请求头或者响应头中设置，并且可以组合使用多种指令。
1.2协商缓存
强缓存失效之后，浏览器在请求头中携带相应的缓存tag来向服务器发请求，由服务器根据这个tag，来决定是否使用缓存，这就是协商缓存。两种tag： Last-Modified （最后修改时间）和 ETag（文件生成的唯一标识）
Last-Modified 存在一些弊端：
- 如果本地打开缓存文件，即使没有对文件进行修改，但还是会造成 Last-Modified 被修改，服务端不能命中缓存导致发送相同的资源
- 因为 Last-Modified 只能以秒计时，如果在不可感知的时间内修改完成文件，那么服务端会认为资源还是命中了，不会返回正确的资源
Etag / If-None-Match （优先级高） 或者Last-Modified / If-Modified-Since
在精准度上，ETag优于Last-Modified ，在性能上，Last-Modified优于ETag
1.3缓存位置（优先级）
- Service Worker 浏览器在后台独立于网页运行的脚本
让 JS 运行在主线程之外，由于它脱离了浏览器的窗体，因此无法直接访问DOM。虽然如此，但它仍然能帮助我们完成很多有用的功能，比如离线缓存、消息推送和网络代理等功能。其中的离线缓存就是 Service Worker Cache。Service Worker 同时也是 PWA 的重要实现机制，
Memory Cache 内存缓存 最快最短
Disk Cache 磁盘中的缓存 最慢最长
Push Cache 推送缓存
浏览器的本地存储
2.1 Cookie
容量缺陷。 Cookie 的体积上限只有4KB，只能用来存储少量的信息。
性能缺陷。 Cookie 紧跟域名，不管域名下面的某一个地址需不需要这个 Cookie ，请求都会携带上完整的 Cookie，这样随着请求数的增多，其实会造成巨大的性能浪费的，因为请求携带了很多不必要的内容。
安全缺陷。 由于 Cookie 以纯文本的形式在浏览器和服务器中传递，很容易被非法用户截获，然后进行一系列的篡改，在 Cookie 的有效期内重新发送给服务器，这是相当危险的。
2.2 localStorage
容量。localStorage 的容量上限为5M，相比于Cookie的 4K 大大增加。当然这个 5M 是针对一个域名的，因此对于一个域名是持久存储的。
只存在客户端，默认不参与与服务端的通信。这样就很好地避免了 Cookie 带来的性能问题和安全问题。
接口封装。通过localStorage暴露在全局，并通过它的 setItem 和 getItem等方法进行操作，非常方便。
2.3 sessionStorage
sessionStorage和localStorage有一个本质的区别，那就是前者只是会话级别的存储，并不是持久化存储。会话结束，也就是页面关闭，这部分sessionStorage就不复存在了。
其他同上。
2.4 IndexedDB
IndexedDB是运行在浏览器中的非关系型数据库, 本质上是数据库，绝不是和刚才WebStorage的 5M 一个量级，理论上这个容量是没有上限的。
支持事务，存储二进制数据，键值对存储。异步操作。受同源策略限制，即无法访问跨域的数据库。