缓存可以减缓网络OI消耗,提高访问速度。
通过网络获取内容速度慢而且开销巨大。大的响应需要在客户端和服务器之间进行多次来回的通信,就导致延迟了浏览器获取和处理内容的时间,还会增加了访问者的流量费用。所以缓存并且重复利用之前获取的资源的能力,成为了性能优化的重要关键。
浏览器缓存机制有四个方面,按照获取资源时请求的优先级排序如下:
1、Memory Cach :内存中的缓存,是浏览器最先去命中一种缓存。它的响应速度是最快的。但是时间也是最短的,在进程结束后,就是tab关闭后,内存的数据也会消失。
因为内存资源是有限,那么哪些资源可以被放入内存呢?浏览器遵循的是“节约原则”,Base64格式的图片几乎永远可以被存放在memory Cache中,还有一些体积不大的JS、CSS文件也会被写入内存中。
2、Service Worker Cache :ServiceWorker是一种立于主线程之外的JavaScript线程,脱离浏览器窗体,所以无法直接访问DOM。无法干扰页面的性能,但是可以为我们实现离线缓存、消息推送和网络代理等功能。ServiceWorker的生命周期包含了install、active、working三个阶段。当ServiceWorker被install,那它将始终存在,只会在active和working之间切换,除非是我们主动终止(Server Worker 对协议是有要求的,必须以 https 协议为前提。)
3、HTTP Cache :HTTP缓存是日常开发中常用的一种缓存机制,分为强缓存和协商缓存。会优先考虑强缓存,在命中强缓存失败时才会走协商缓存。
强缓存的特征
强缓存使用了HTTP头中的Expires和Cache-Control两个字段来控制。在请求第二次发出时,浏览器会根据其中的expires和Cache-Control来判断目标资源是否命中强缓存,若是,命中了则直接从缓存中获取资源,不会再次与服务器发生通信。命中强缓存时,返回的HTTP状态码为200.
Status Code:200 (from disk cache)
协商缓存:浏览器与服务器合作时的缓存策略。协商缓存依赖于服务器端与浏览器之间的通信。在协商缓存机制下,浏览器需要向服务器咨询缓存的相关信息,从而进行判断是否重新发起请求、下载完整的响应,还是从本地获取缓存资源。
若服务器提示缓存资源没有被改动,那么资源就会被重定向到浏览器缓存,这是网络请求的状态码为
Status Code:304 NotModified
HTTP缓存决策:如下图
当我们的资源不可复用时,直接设置Cache-Control为no-store,拒绝一切形式的缓存;不然会考虑是否每次都需要向服务器进行缓存有效确认,若需要,则Cache-Control设置为no-cache;否则考虑该资源是否可以被代理服务器缓存,根据其结果来决定是设置为private还是public;然后考虑该资源的过期时间,设置对应的max-age还是s-maxage。最后配置协商缓存需要用到Etag等参数。
4、Push Cache :Push Cache 是指 HTTP2 在 server push 阶段存在的缓存。Push Cache 是缓存的最后一道防线。浏览器只有在 Memory Cache、HTTP Cache 和 Service Worker Cache 均未命中的情况下才会去询问 Push Cache。
Push Cache 是一种存在于会话阶段的缓存,当 session 终止时,缓存也随之释放。
不同的页面只要共享了同一个 HTTP2 连接,那么它们就可以共享同一个 Push Cache