浏览器的缓存机制

110 阅读2分钟

在优化方式中,缓存可以说是一种高效且简单的方式了。一种好的缓存策略可以缩短页面请求资源的距离,减少延迟,并且由于缓存文件可以重复利用,还可以减少带宽,降低网络负荷。

一、缓存位置

缓存位置分为4种:

  • Service Worker
  • Memory Cache
  • Disk Cache
  • PushCache
1.Service Worker

使用Service Worker的话,传输协议必须使用HTTPS协议。因为过程中涉及到请求拦截,需要使用HTTPS协议来保障安全。与其他浏览器的内建缓存机制不同,我们可以控制缓存哪些文件,以哪种方式匹配缓存、如何读取缓存,并且缓存是持续性的。

2.Memory Cache

内存中的缓存,读取效率高但持续性短。

3.Disk Cache

硬盘中的缓存,比内存缓存读取效率低,但容量和存储时效性上更优。

4.Push Cache

推送缓存,当上面三种方式都没命中时,才会用它。他只在回话(session)中存在,一旦回话结束就会被释放,并且缓存事件也很短暂。

二、缓存位置

浏览器与服务器的通信方式为应答模式。缓存过程如下:

  • 浏览器每次发请求都会现在浏览器缓存中查找该请求的结果以及缓存标识。
  • 浏览器每次拿到返回的请求结果都会将该结果和缓存标识存入浏览器缓存中。

三、强缓存与协商缓存

强缓存:不会向服务器发送请求,直接从缓存中读取资源。

协商缓存:强缓存失效后,浏览器携带缓存标识向服务器发送请求,由服务器根据缓存标识判断是否使用缓存过程,有以下两种情况。

  1. 协商缓存生效,返回304。
  2. 协商返回失效,返回200和请求结果。

四、缓存机制

强缓存优先于协商缓存,若强缓存生效则直接使用缓存,若不生效则进行协商缓存,协商缓存由服务器决定是否使用缓存,若协商缓存失效,那么说明缓存失效。返回200,重新获取资源和返回标识,再存入浏览器缓存中;生效则返回304,继续使用缓存。流程图如下: