摘要:说起前端缓存,这真是一个百看百懂,百懂百忘的重灾区。作为一个前端开发,我们一般不控制缓存,它对我们来说是透明的。名字解析工欲善其事必先利其器,在分析整个缓存流程之前,先明确常见的缓存名词。它是一个通用头,能分别在请求报文和响应报文中使用。
说起前端缓存,这真是一个百看百懂,百懂百忘的重灾区。每次看的时候都觉得自己懂了,但是过两天又忘了。究其原因,缓存对前端来说很重要,但是控制权却是在浏览器和服务器手上。作为一个前端开发,我们一般不控制缓存,它对我们来说是透明的。但是这不是我们忘记的理由。为了拯救我自己于水火之中,所以写了这篇文章,期望于达到“一看就懂,至死不忘”的地步。1. 名字解析
工欲善其事必先利其器,在分析整个缓存流程之前,先明确常见的缓存名词。
1.1 ExpiresExpires: HTTP 1.0的规范。用来告诉浏览器这个资源的过期时间。
例如: Expires:Sun, 29 Apr 2018 14:21:43 GMT
每次请求这个资源时,浏览器自动判断是否超出了这个时间,如果没有超出,就直接使用缓存(http status:200 from cache),不发送请求。如果超出,看其他参数的情况。
缺点:由于Expires这个时间是服务器端的时间,如果客户端的时间和服务器端的时间有误差,那么Expires就没什么用了。
1.2 Cache-ControlCache-Control: HTTP 1.1规范。用来定义缓存的过期时间。
Expires有服务器时间和浏览器时间不统一的问题,所以HTTP 1.1新定义了Cache-Control。它是一个通用HTTP头,能分别在请求报文和响应报文中使用。例如:
Cache-Control有很多值可以设置,在这里只介绍两个最常用的。
Cache-Control: no-cache // 浏览器不缓存, 返回的结果要看其他参数的情况 Cache-Control: max-age=600 // 数字,秒,表示浏览器缓存10分钟,这段时间内即使服务器资源有修改,浏览器也不会改变,这段时间内请求,http status是200 from cache
当Cache-Control和Expires同时存在时,Cache-Control会覆盖Expires。可以这么记忆,HTTP 1.1的新生代比老的HTTP 1.0总要有更多的优势。
缺点:没有缺点。
1.3 ETagETag: HTTP 1.1规范。服务器通过算法计算出的资源唯一标志符(类同Md5码)。
例如:ETag:"d9f096d1f708c35fdd9c78bd422883cc"
Expires和Cache-Control只决定了浏览器是否要发送请求到服务器,并没有决定服务器是否要返回资源。决定服务器操作的是另外两个HTTP头,ETag和Last-Modified。
浏览器在第一次请求时会保留ETag的值,并在下一次请求时通过If-None-Match或If-Match两个请求头将ETag传给服务器。服务器传来的ETag跟自己的ETag是否一致,就能清楚的知道是否要给浏览器新的资源文件。如果两者一致,则http response返回空响应(http status:304),否则,返回新的资源(http status:200)
缺点:没有缺点。
1.4 Last-ModifiedLast-Modified: HTTP 1.1规范。表示资源在服务器上的最后修改时间。
例如:Last-Modified:Sat, 28 Apr 2018 03:08:34 GMT
浏览器在第一次请求时会保留Last-Modified的值,并在下一次请求时通过If-Modified-Since或If-Unmodified-Since两个请求头将Last-Modified传给服务器。服务器比对两个Last-Modified是否一致。如果两者一致,则http response返回空响应(http status:304),否则,返回新的资源(http status:200)
唔,这货与ETag简直一模一样有没有。真的是简单的一塌糊涂呢,可恶……=_="Last-Modified和Etag都存在的情况,它们要都符合才能返回304。这也很好理解,都是HTTP1.1的小兄弟,大家权利要统一。
缺点:如果这个资源在服务器上被修改了,但是最后的内容却没有变。这时候Last-Modified就匹配不上了,相当于多返回了一个相同的资源文件,浪费了流量。
2. 缓存判断顺序上面已经说过以下三条规则:
Expires和Cache-Control决定了浏览器是否要发送请求到服务器,ETag和Last-Modified决定了服务器是要返回304+空内容还是新的资源文件
Expires和Cache-Control同时存在时,Cache-Control会覆盖Expires
ETag和Last-Modified同时存在时,两者都要满足才会返回304
所以,缓存判断顺序可以简单的理解为:
1. 先判断Cache-Control,在Cache-Control的max-age之内,直接返回200 from cache 2. 没有Cache-Control再判断Expires,再Expires之内,直接返回200 from cache 3. Cache-Control=no-cache或者不符合Expires,浏览器向服务器发送请求 4. 服务器同时判断ETag和Last-Modified,都一致,返回304,有任何一个不一致,返回2003. 总结
弄清楚它们的关系之后,是不是贼简单,妈妈再也不用担心我的缓存啦!好冷的笑话(手动滑稽脸)
参考文档《浅谈浏览器http的缓存机制》
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/107705.html
摘要:的数据将一直保存在浏览器内,直到用户清除浏览器缓存数据为止。它也是一个被标准废弃的功能,主要是通过文件来标注要被缓存的静态文件清单。尽管也有文件,但是与应用缓存却完全不同。另外,用来控制缓存的使用。 最近把前端缓存重新整理了一下,从整体的层面上把前端所有能用的缓存方案梳理了一遍。同时,对于http缓存,使用了表格的方案,使得原先晦涩难记的特性变得清晰明了。特记录于此,若有什么欠缺,也望...
摘要:的数据将一直保存在浏览器内,直到用户清除浏览器缓存数据为止。它也是一个被标准废弃的功能,主要是通过文件来标注要被缓存的静态文件清单。尽管也有文件,但是与应用缓存却完全不同。另外,用来控制缓存的使用。 最近把前端缓存重新整理了一下,从整体的层面上把前端所有能用的缓存方案梳理了一遍。同时,对于http缓存,使用了表格的方案,使得原先晦涩难记的特性变得清晰明了。特记录于此,若有什么欠缺,也望...
摘要:说起前端缓存,这真是一个百看百懂,百懂百忘的重灾区。作为一个前端开发,我们一般不控制缓存,它对我们来说是透明的。名字解析工欲善其事必先利其器,在分析整个缓存流程之前,先明确常见的缓存名词。它是一个通用头,能分别在请求报文和响应报文中使用。 说起前端缓存,这真是一个百看百懂,百懂百忘的重灾区。每次看的时候都觉得自己懂了,但是过两天又忘了。究其原因,缓存对前端来说很重要,但是控制权却是在浏...
摘要:说起前端缓存,这真是一个百看百懂,百懂百忘的重灾区。作为一个前端开发,我们一般不控制缓存,它对我们来说是透明的。名字解析工欲善其事必先利其器,在分析整个缓存流程之前,先明确常见的缓存名词。它是一个通用头,能分别在请求报文和响应报文中使用。 说起前端缓存,这真是一个百看百懂,百懂百忘的重灾区。每次看的时候都觉得自己懂了,但是过两天又忘了。究其原因,缓存对前端来说很重要,但是控制权却是在浏...
阅读 1617·2019-08-30 15:54
阅读 2360·2019-08-30 15:52
阅读 1992·2019-08-29 15:33
阅读 3026·2019-08-28 17:56
阅读 3216·2019-08-26 13:54
阅读 1659·2019-08-26 12:16
阅读 2433·2019-08-26 11:51
阅读 1617·2019-08-26 10:26