浏览器缓存

一、强缓存

http1.0:expires
http1.1:cache-control
expires和cache-control都在服务端返回的响应头中查看
expires
expires设置了具体得时间，在这个时间前都只需要从缓存中请求，但是由于服务器时间和浏览器存在时间不一致的可能性，所以服务器的时间可能是不准确的
cache-control
由于expires服务器传递时间不确定性，在http1.1就有了cache-control。cache-control与expires不同点就在于cache-contral没有设置具体的时间反而用max-age设置一个时长，在这个时长内会从缓存中获取数据。cache-control还有其他的参数：
private:只在浏览器中缓存，也就是在代理服务器中不会缓存
no-cache:跳过强缓存，请求http
no-store:不进行任何缓存
s-maxsge:针对代理服务器缓存设置缓存时长

expires和cache-control同时存在时，后者优先级高

二、协商缓存

强缓存失效后，向服务器发送请求还有另外一种情况那就是协商缓存。
协商缓存分两种：last-modified和Etag
last-modified
浏览器在第一次请求服务器的时候，服务器会给浏览器响应头加上last_modified(最后修改时间)字段，当强缓存失效，浏览器请求服务器时会在请求头加上if-modified-since字段，这个字段就是服务器传来的最后修改时间。服务器收到请求会用这个时间跟对应资源最后修改时间作对比，如果if-modified-since时间小于资源最后修改时间，服务器会根据常规http返回数据。如果if-modified-since时间大于资源最后修改时间，返回304，告诉浏览器自己去缓存中获取资源.
Etag
服务器会在当前资源上加上Etag标记，一旦资源改变Etag就会改变。浏览器请求服务器的时候，服务器会通过响应头把这个标记传给浏览器。当浏览器再次请求服务器的时候会用If-None-Match字段把服务器传递的标记传回给服务器。服务器获取到请求会用If-None-Match标记跟资源上的Etag标记做对比，如果不同按照正常http返回新的数据，如果相同，返回304，让浏览器自己去缓存中获取

Etag与last-modified对比
从精准度上来说Etag要比last-modified更好。因为：①last-modified时间精确到秒，如果资源刚好1秒内做了修改，last-modified就不能察觉到；②编辑了资源文件，但里面内容并没有修改，last-modified也会作出错误的判断
从性能上来说last-modified比Etag要好，因为Etag根据内容上下文生成hash值，而last-modified只需要记录文件修改的时间

三、缓存位置

上面提到的资源缓存在什么地方？
存放位置有四种(优先级排列)分别是在Service Worker、Memory Cache(内存缓存)、Disk Cache、Push Cache；
Service Worker
Service Worker 借鉴了 Web Worker的 思路，即让 JS 运行在主线程之外，由于它脱离了浏览器的窗体，因此无法直接访问DOM。虽然如此，但它仍然能帮助我们完成很多有用的功能，比如离线缓存、消息推送和网络代理等功能。其中的离线缓存就是 Service Worker Cache。
Service Worker 同时也是 PWA 的重要实现机制
service worker 是独立于当前页面的一段运行在浏览器后台进程里的脚本。
service worker不需要用户打开 web 页面，也不需要其他交互，异步地运行在一个完全独立的上下文环境，不会对主线程造成阻塞。基于service worker可以实现消息推送，静默更新以及地理围栏等服务。
service worker提供一种渐进增强的特性，使用特性检测来渐渐增强，不会在老旧的不支持 service workers 的浏览器中产生影响。可以通过service workers解决让应用程序能够离线工作，让存储数据在离线时使用的问题。

注意事项：
1.service worker运行在它们自己的完全独立异步的全局上下文中，也就是说它们有自己的容器。
2.service worker没有直接操作DOM的权限，但是可以通过postMessage方法来与Web页面通信，让页面操作DOM。
3.service worker是一个可编程的网络代理，允许开发者控制页面上处理的网络请求。
4.浏览器可能随时回收service worker，在不被使用的时候，它会自己终止，而当它再次被用到的时候，会被重新激活。
5.service worker的生命周期是由事件驱动的而不是通过Client。
https://www.jianshu.com/p/62338c038c42
Memory Cache 和 Disk Cache
Memory Cache指的是内存缓存，从效率上讲它是最快的。但是从存活时间来讲又是最短的，当渲染进程结束后，内存缓存也就不存在了。
Disk Cache就是存储在磁盘中的缓存，从存取效率上讲是比内存缓存慢的，但是他的优势在于存储容量和存储时长
比较大的JS、CSS文件会直接被丢进磁盘，反之丢进内存
内存使用率比较高的时候，文件优先进入磁盘
Push Cache
即推送缓存，这是浏览器缓存的最后一道防线。它是 HTTP/2 中的内容

四、本地緩存

浏览器本地存储主要分为：cookie、webStorage、indexedDB
cookie
用于状态存储
cookie最开始是用于弥补http状态管理的不足，因为http是一个没有状态的协议，客户端再次请求的时候服务端无法识别是那个客户端。
同一域名下发送请求会携带相同的cookie,服务端获取到cookie进行解析就可以拿到客户端的状态
cookie存在缺陷
1.容量小，只有4kb
2.性能上，cookie紧跟域名，不管同域名下某个请求是否需要cookie，随着请求数增多会存在不必要的性能浪费
3.安全上，cookie以纯文本的形式在客户端和服务端之间传递通信，容易被非法用户劫取篡改，在cookie有效期再次请求服务器是很危险的
webStorage
localStorage
localstorage和cookie一样同一域名下会存储相同的localstorage
与cookie的差异：
1.容量，loacalstorage在同一域名下可存储大概5M，同一域名下可长久存储
2.安全，localstorage只存储在客户端，默认不参与服务端通信，避免了cookie中性能和安全上的问题
3.localstorage暴露在全局，可以通过他全局通信
sessionStorage
会话级别的存储，存储时间短，也就是页面关闭sessionStorage存储的东西也就清除了
与localStorage共同点：
1.容量
2.本地存储
3.存取方式相同，都可作为全局通信
可用于存储本次浏览记录，页面关闭就会清除
indexedDB
浏览器中非关系型数据库:https://developer.mozilla.org/zh-CN/docs/Web/API/IndexedDB_API

參考：(1.6w字)浏览器与前端性能灵魂之问，请问你能接得住几个？（上）