浏览器缓存机制
一,浏览器缓存机制https://www.jianshu.com/p/54cc04190252
1,缓存可以说是性能优化中简单高效的一种优化方式了。一个优秀的缓存策略可以缩短网页请求资源的距离,减少延迟,并且由于缓存文件可以重复利用,还可以减少带宽,降低网络负荷
2,缓存位置:
1)Service Worker(https://developer.mozilla.org/zh-CN/docs/Web/API/Service_Worker_API)
Service Worker 是运行在浏览器背后的独立线程,Service workers只能由HTTPS承载
2)Memory Cache
Memory Cache 也就是内存中的缓存,主要包含的是当前中页面中已经抓取到的资源,例如页面上已经下载的样式、脚本、图片等。读取内存中的数据肯定比磁盘快,内存缓存虽然读取高效,可是缓存持续性很短,会随着进程的释放而释放。一旦我们关闭 Tab 页面,内存中的缓存也就被释放了。
3)Disk Cache
Disk Cache 也就是存储在硬盘中的缓存,读取速度慢点,但是什么都能存储到磁盘中,比之 Memory Cache 胜在容量和存储时效性上
4)Push Cache
Push Cache(推送缓存)是 HTTP/2 中的内容,当以上三种缓存都没有命中时,它才会被使用。它只在会话(Session)中存在,一旦会话结束就被释放,并且缓存时间也很短暂,在Chrome浏览器中只有5分钟左右,同时它也并非严格执行HTTP头中的缓存指令。
3,网络请求缓存
1)浏览器每次发起请求,都会先在浏览器缓存中查找该请求的结果以及缓存标识
2)浏览器每次拿到返回的请求结果都会将该结果和缓存标识存入浏览器缓存中
二,强缓存(客户端的缓存)
1,pragma(http1.1已抛弃):可选值no-cache,Pragma的优先级是比Cache-Control高的
2,cache-control(适用于http1.1)
1),no-cache:不直接使用缓存,根据新鲜度来使用缓存
2),no-store:不使用缓存,每次都是请求下载新资源
3),max-age:xx秒,缓存时长
4),public/private:是否只能被单个用户使用,默认为private
5),must-revalidate:每次访问都需要缓存校验
3,Expires:缓存时长适用于http1.0和http1.1,和cache-control中的max-age同样意思,max-age优先级更高
三,协商缓存
1,Etag/If-Not-Match(http1.1):校验值,优先级高于Last-Modified
优点:精确的判断资源有无被修改,可识别一秒内的修改次数
缺点:默认使用hash算法,在分布式环境下可能会出现不同服务器生成的Etag值不一致;计算Etag需要性能消耗
2,Last-Modified/If-Modified-Since(http1.0):过期时间
优点:只要资源修改,无论内容有无变化,都会将资源返回客户端;
缺点:以时刻为标识,无法获取一秒内的修改变化;某些服务器不能准确获取最后的修改时间
*If-Not-Match和If-Modified-Since是客户端发送上次服务器返回的Etag和Last-Modified值