浏览器缓存

93 阅读2分钟

缓存读写顺序 当浏览器对一个资源(比如一个外链的a.js)进行请求的时候会发生什么?请从缓存的角度大概说一下: a.js>>读 service worker>>读 memory cache>>读 disk cache>>请求 获取到a.js>>写 disk cache>>写 memory cache>>写 service worker

1.调用service worker的fetch事件获取资源

2.查看memory cache

3.查看disk cache这里又细分: 如果有强制缓存且未失效,则使用强制缓存,不请求服务器。这时的状态码全部是200 如果有强制缓存但已失效,使用协商缓存,

4.发送网络请求,等待网络响应

5.把响应内容存入disk cache(如果请求头信息配置可以存的话)

6.把响应内容的引用存入memory cache(无视请求头信息的配置,除no-store之外)

7.把响应内容存入service worker的cache storage(如果service worker的脚本调用了cache.put()) 上面这一系列过程其实是浏览器查找缓存和把资源存入缓存的执行流程,下面从缓存位置和缓存策略介绍浏览器的缓存

缓存位置 缓存位置有service worker,memory cache,disk cache 打开开发者工具找到network找到js找到size可以看到资源从哪读取的

service worker功能就是离线缓存,通过service worker设置的缓存会出现开发者工具application面板下的cache storage中

memory cache是浏览器内中的缓存,浏览器tab页关闭,memory cache就将清空,memory cache会自动缓存所有资源嘛?答案是否定的,当http头设置了cache-control:no-store的时候或者浏览器设置了disabled cache就无法把资源存入内存了,其实也无法存入硬盘。当memory cache中查找缓存的时候,不仅仅会匹配资源url,还会看其content-type是否相同

disk cache也叫http cache存在硬盘中的缓存,根据http头部的各类字段进行判定资源的缓存规则,比如是否可以缓存,什么时候过期,过期之后需要重新发起请求吗?网站中的绝大多数资源都是存在disk cache中的

缓存策略 缓存策略根据http header的字段可以将缓存分成强缓存和协商缓存,强缓存可以直接从缓存中读取资源返回给浏览器而不需要向服务器发送请求,而协商缓存是当强缓存失效后(过了过期时间),浏览器需要携带缓存标识向服务器发送请求,服务器根据缓存标识决定是否使用缓存的过程。强缓存的字段有:expires和cache-control。协商缓存的字段有:last-modified和etag