浏览器缓存详解

1.缓存位置

1.Service Worker,Service Worker是运行在浏览器背后的独立线程,一般可以用来实现缓存功能.使用Service Worker必须使用https协议,因为Service Worker涉及请求拦截,所以必须使用https协议来保证安全.

2.Memory Cache,也就是内存中的缓存,一般包括页面中被抓取的文件,如样式,图片,脚本文件等.Memory Cache读取快,效率高,但存储容量小,一般会随着进程的结束而释放.

3.Disk Cache,也就是磁盘中的缓存,它会根据HTTP Header中的字段判断哪些资源需要缓存.Disk Cache读取较慢,但存储容量高,持续时效长.

4.Push Cache,推送缓存,是http2.0中的内容,当以上三种缓存都没有命中时才会被使用.它只在会话中存在,一旦会话结束就会被释放,持续时间不长.

2.缓存过程

浏览器每次发起请求的时候,都会在缓存中查找请求结果和缓存标识,如果没有查找到结果或者缓存无效,则会发送请求;

浏览器每次接收到请求的时候,都会把响应结果和缓存标识存储到缓存中.

根据是否需要向浏览器发送请求可以把缓存过程分为两种:强缓存和协商缓存.

3.强缓存

强缓存不会向服务器发送请求,直接从缓存中读取资源,强缓存一般可通过设置两种HTTP Header实现:Expires和Cache-Control.

1.Expires指缓存过期时间,在缓存过期时间前,浏览器可以直接使用缓存资源,而无需发送请求;

2.Cache-Control可以使用多种指令用于控制网页缓存,如no-store不缓存任何响应,max-age最大有效时间等

4.协商缓存

协商缓存就是强制缓存失效后,浏览器携带缓存标识向浏览器发送请求,由浏览器根据缓存标识决定是否使用缓存.

协商缓存可通过设置两种HTTP Header实现:Last Modified和ETag.

1.Last Modified

当服务器响应浏览器请求的时候,可以在Header中添加Last Modified字段,值是这个资源在服务器上的最后修改时间.浏览器接收后缓存资源和header.浏览器下一次请求这个资源时,在header中携带If-Modified-Since这个header,是Last-Modified的值.浏览器接收到请求后,会对比If-Modified-Since和资源的最后修改时间,如果相同,则返回304和空的响应体,资源直接从缓存中读取;如果不同,则返回200和更新后的资源.

2.ETag

ETag是服务器响应请求时,返回当前资源文件的一个唯一标识,只要资源有变化,标识就会重新生成.浏览器在下一次加载资源时,会将上一次返回的ETag值放到请求Header里的If-None-Match里,服务器会比较If-None-Match和自己服务器上的ETag值,如果相同,则返回304和空的响应体,如果不同,则返回200和新的资源.