浏览器缓存的基本策略?什么时候该缓存什么时候不该缓存?

appcache

  • appcache,这部分是离线缓存,在fetchStart和domainLookupStart之间,这部分参考[whatwg][12]标准已经弃用,建议用serviceworker。这里也不做介绍。serviceworker其实使用的主要是磁盘缓存disk cache.

memory cache 内存缓存

快速刷新,这时候浏览器会尽量复用已有的内存缓存数据。

bfcache在浏览后退时,满足某些条件,浏览器默认会有后退缓存,直接从内存加载页面。

disk cache 磁盘缓存

主要是通过serviceWorker,通过一些规则控制缓存内容,这些缓存内容比较大,一般是在磁盘缓存。

HTTP缓存

  • HTTP缓存,这部分是在requestStart开始,发起资源http请求开始,这部分涉及到强缓存和协商缓存。浏览器对于请求过得资源会缓存下来请求的响应数据,后面请求时会先从缓存查找匹配的请求的响应头,如果命中强缓存(判断cache-control和expires信息)那么直接从缓存获取响应数据,不会再发送http请求。如果没有命中浏览器会发送请求到服务器,同时会携带第一次请求的响应头的缓存相关header字段(last-modified/if-modified-since, Etag/if-none-match), 服务端根据这些请求头判断是否走缓存,如果走缓存,服务端会返回新的响应头,但不返回数据,浏览器会更新响应头,从缓存拿数据。如果不走缓存,服务端就会返回新的响应头和数据,然后浏览器更新缓存的数据。

  • 强缓存,判断依据是expires(http 1.0协议规定)和cache-control(http 1.1协议规定)字段,expires是绝对时间,cache-control有可选值no-cache(不使用本地缓存,走协商缓存),no-store(禁止浏览器缓存数据,每次都是重新获取数据),public(可以被客户端和中间商CDN做缓存),private(只能客户端缓存,CDN不能缓存)

  • 协商缓存,用到的响应头字段是last-modified/if-modified-since, Etag/if-none-match,这是两对哈,每队/前面一个是服务端返回的response header中的字段,/后面是请求头request携带的头部字段,第一次请求资源浏览器会返回last-modified(最后修改时间),后面再次请求请求头会带上if-modified-since,当然这个值和上次浏览器返回的last-modified是一样的,然后浏览器判断如果文件没有变化,那么返回304 Not Modified http code,响应请求头不会携带last-modified字段,浏览器从缓存取数据,也不用更新last-modified字段,如果有修改,那么响应头返回新的last-modified字段数据,返回响应内容。Etag/if-none-match这一对是同样的逻辑,不同之处是用etag标识来判断文件是否修改,而不是用时间,因为服务器时间可能会变的,还会收到时区的影响。还有一点是每次请求都会返回etag字段,即使没有变化。



请遵守《互联网环境法规》文明发言,欢迎讨论问题
扫码反馈

扫一扫,反馈当前页面

咨询反馈
扫码关注
返回顶部