什么是浏览器缓存
浏览器缓存就是把一个已经请求过的Web资源（如html页面，图片，js，数据等）拷贝一份副本储存在浏览器中，当访问者再次请求这个页面时，浏览器会根据缓存机制决定是直接使用副本响应访问请求，还是向服务器再次发送请求。
浏览器缓存有哪些优势
- 减少网络宽带消耗
- 降低服务器压力
- 减少网路延迟，加快页面打开速度
浏览器缓存类型
-
强缓存
强缓存主要通过【Cache-Contol】字段来控制是否使用缓存。Cache-Contol指令枚举
名称 max-age private no-cache no-store s-maxage 含义 浏览器缓存时长 只有浏览器缓存 跳过缓存，进入协商缓存 不进行缓存 服务器缓存时长 -
协商缓存
强缓存失效后，浏览器会在请求头中携带相应缓存tag向服务端发送请求，服务器根据这个tag来决定是否使用缓存，这就是协商缓存，缓存tag分为【Last-Modified】和【ETag】两种类型，各有优劣，并不存在谁对谁有绝对的优势，当Last-Modified和ETag同时存在时，优先考虑ETag。-
Last-Modified
Last-Modified的含义是【最后修改时间】，在浏览器第一次向服务器发送请求后，服务器会在响应头中加上这个字段，浏览器接收到后，会在请求头中携带If-Modified-Since字段，字段的值也就是服务器传回来的最后修改时间，服务器拿到请求头中的If-Modified-Since字段后，会和服务器中当前资源的最后修改时间进行对比，如果请求头中的值小于最后修改时间，说明资源更新了，即返回新的资源，跟常规的HTTP请求响应的流程一样，否则返回304，告诉浏览器直接用缓存。
-
ETag
ETag是服务器【根据当前文件的内容，给文件生成的唯一标识】，只要资源的内容有改动，这个值就会变，在浏览器第一次向服务器发送请求后，服务器会在响应头中加上这个字段，浏览器接收到后，会在请求头中携带If-None-Match字段，字段的值也就是服务器传回来的标识，服务器拿到请求头中的If-None-Match字段后，会和服务器中当前资源的ETag进行对比，如果两者不一样，说明资源更新了，即返回新的资源，跟常规的HTTP请求响应的流程一样，否则返回304，告诉浏览器直接用缓存。
Last-Modified和ETag对比
-
在精度上ETag优于Last-Modified，因为ETag是按照内容给资源上标识，因此能准确感知资源的变化，而Last-Modified在一些特殊的情况并不能准确感知资源变化，比如：编辑了资源文件，但是文件内容并没有更改，这样也会造成缓存失效、Last-Modified能够感知的单位时间是秒，如果文件在 1 秒内改变了多次，那么这时候的Last-Modified并没有体现出修改。
-
在性能上Last-Modified优于ETag，因为Last-Modified只是记录了一个时间点，而ETag则需要根据资源的内容生成标识。
-
浏览器缓存位置（优先级从高到底）
-
Service Work Cache
Service Worker 借鉴了 Web Worker 的思路，即让 JS 运行在主线程之外，由于它脱离了浏览器的窗体，因此无法直接访问DOM，虽然如此，但它仍然能帮助我们完成很多有用的功能，比如离线缓存、消息推送和网络代理等功能，其中的离线缓存就是Service Worker Cache。
-
Memory Cache
Memory Cache 指的是内存缓存，从效率上讲它是最快的，但是从存活时间来讲又是最短的，当渲染进程结束后，内存缓存也就不存在了。
-
Disk Cache
Disk Cach 指的是存储在磁盘中的缓存，从存取效率上讲是比内存缓存慢的，但是他的优势在于存储容量和存储时长。
-
Push Cache
Push Cache 指的是推送缓存，他是HTTP2.0中的内容，虽然现在应用的并不广泛，但随着HTTP2.0的推广，它的应用越来越广泛。
浏览器缓存机制总结
通过 Cache-Control 验证缓存是否可以使用，如果缓存可以使用，则直接使用缓存，如果缓存不可使用，则进入协商缓存，发送HTTP请求，服务器根据请求头中的 If-Modified-Since 或者 If-None-Match 检查资源是否更新，如果资源更新，则返回资源及状态码200，否则返回304，告诉浏览器直接从缓存获取资源。
