作为前端，咱们前端打包的文件有js脚本、css脚本、html脚本；那么在浏览器中分别会存放在什么地方呢？或者前端缓存到底是什么意思呢？
我们按照位置来分离一共有四个部分，优先级是这样的：
service worker > memory cache > disk cache > 网络请求
Service Worker
主要得作用在于我们可以决定存什么资源，什么情况取出（路由匹配规则），取出什么样得资源（缓存匹配并返回），位置在浏览器中得检查控制台=>应用=>service worker=>cache中，同浏览器内部得memory cache 和 disk cache得位置不同之外，这个缓存是永久的，关闭tab页或浏览器，下次打开依旧在（memory cache是短暂的，关了就没了），手动删除得方法：调用 API cache.delete(resource)；或等浏览器容量超过限制，会被浏览器清空。
当没有命中缓存时，就进行fetch()方法请求资源，这时就会去memory cache和disk cache找缓存资源了，只要请求走过service worker那么就会被标记from ServiceWorker，不管之是怎样。
memory cache
内存中的缓存，网络请求的资源被浏览器自动加入到memory cache中，但是请求过多但浏览器内存也是有限的，所以这只能是“短暂缓存”，当tab页关闭的时候，那么tab页相对的缓存也失效了，有时数据过大，没关tab页之前排在靠前的缓存就失效了；
几乎所有的网络请求走这里所以我们的js，css，html是在这里解析缓存，细分两块：
1、preloader： 在07年前，在打开网页的过程中，先请求html然后解析，浏览器解析资源都是串行的，元素的解析和执行会影响之后的资源，浏览器会停下来等这个资源下载完成后，才会进行下一个资源，所以这个问题很严重，08年提出了预加载的概念，当解析被阻止时依旧保持网络繁忙，继续下载之后的资源。
我们在刚开始解析时找到html文档上的各种标记，并储存这些资源的url，将这些标记输出发送给目前的html，将urls和标记的资源一起给到请求队列里，并且请求队列根据对页面下载的速度进行分配优先级，保证一边解析当前的js或css资源，一边去请求下一个资源。 那么哪些资源放到preloader里，js脚本，外部的css，img标签都有可能。preloader请求过来的资源放到memory cache里，供之后的解析执行操作使用。
2、preload： 也就是显式的预加载资源，例，也会被放到memory cache中。
这里memory cache机制保证了一个页面两个相同的请求在实际中只会被请求一次，不会浪费网络资源。但不要在img标签中增加scripts类型的请求，即便设置max-age=0，仍然会存缓存里，同时在缓存里拿资源，使用no-store就可以不存进缓存了。
disk cache
硬盘上的缓存，也叫http cache，是持久存储的，实际存在于文件系统中的，他允许相同资源在跨会话，跨站点的情况下使用，例如两个站点使用同样的一张图片，
同时严格按照http头信息中的各类字段来判定哪些资源可以缓存，哪些资源不能缓存，那些资源可用，那些资源需要重新请求，这就是强缓存存放的地方，当命中缓存的时候，就会从硬盘中拿资源，虽然比内存慢，但比网络请求快一些。
持久存储都会面临容量增长的问题，那么浏览器会通过算法去删除老资源或最过时的资源。
网络请求
如果前三个缓存地都没有有命中，那么就开始网络请求，接到响应资源后，以上3个是这样工作的： 1.根据server worker中的handle来决定是否缓存到cache stroage中； 2.根据HTTP头部报文来决定是如何缓存到disk cache中，也就是强缓冲（cache-control、Pragma）或协商缓存（if-modified-since）； 3.memory cache保留一份资源的引用，以备下次使用；
那么协商缓存和强缓存到底在哪里存，如何利用缓存策略提高性能呢？请期待下一篇
