资讯专栏INFORMATION COLUMN

一篇文章理解前端缓存

Scliang / 2432人阅读

摘要:说起前端缓存,这真是一个百看百懂,百懂百忘的重灾区。作为一个前端开发,我们一般不控制缓存,它对我们来说是透明的。名字解析工欲善其事必先利其器,在分析整个缓存流程之前,先明确常见的缓存名词。它是一个通用头,能分别在请求报文和响应报文中使用。

说起前端缓存,这真是一个百看百懂,百懂百忘的重灾区。每次看的时候都觉得自己懂了,但是过两天又忘了。究其原因,缓存对前端来说很重要,但是控制权却是在浏览器和服务器手上。作为一个前端开发,我们一般不控制缓存,它对我们来说是透明的。但是这不是我们忘记的理由。为了拯救我自己于水火之中,所以写了这篇文章,期望于达到“一看就懂,至死不忘”的地步。
1. 名字解析

工欲善其事必先利其器,在分析整个缓存流程之前,先明确常见的缓存名词。

1.1 Expires
Expires: HTTP 1.0的规范。用来告诉浏览器这个资源的过期时间。

例如: Expires:Sun, 29 Apr 2018 14:21:43 GMT

每次请求这个资源时,浏览器自动判断是否超出了这个时间,如果没有超出,就直接使用缓存(http status:200 from cache),不发送请求。如果超出,看其他参数的情况。

缺点:由于Expires这个时间是服务器端的时间,如果客户端的时间和服务器端的时间有误差,那么Expires就没什么用了。

1.2 Cache-Control
Cache-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 ETag
ETag: HTTP 1.1规范。服务器通过算法计算出的资源唯一标志符(类同Md5码)。

例如:ETag:"d9f096d1f708c35fdd9c78bd422883cc"

Expires和Cache-Control只决定了浏览器是否要发送请求到服务器,并没有决定服务器是否要返回资源。决定服务器操作的是另外两个HTTP头,ETag和Last-Modified。

浏览器在第一次请求时会保留ETag的值,并在下一次请求时通过If-None-MatchIf-Match两个请求头将ETag传给服务器。服务器传来的ETag跟自己的ETag是否一致,就能清楚的知道是否要给浏览器新的资源文件。如果两者一致,则http response返回空响应(http status:304),否则,返回新的资源(http status:200)

缺点:没有缺点。

1.4 Last-Modified
Last-Modified: HTTP 1.1规范。表示资源在服务器上的最后修改时间。

例如:Last-Modified:Sat, 28 Apr 2018 03:08:34 GMT

浏览器在第一次请求时会保留Last-Modified的值,并在下一次请求时通过If-Modified-SinceIf-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,有任何一个不一致,返回200
 
3. 总结

弄清楚它们的关系之后,是不是贼简单,妈妈再也不用担心我的缓存啦!好冷的笑话(手动滑稽脸)

参考文档

《浅谈浏览器http的缓存机制》

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/107705.html

相关文章

  • 文章理解Web缓存

    摘要:的数据将一直保存在浏览器内,直到用户清除浏览器缓存数据为止。它也是一个被标准废弃的功能,主要是通过文件来标注要被缓存的静态文件清单。尽管也有文件,但是与应用缓存却完全不同。另外,用来控制缓存的使用。 最近把前端缓存重新整理了一下,从整体的层面上把前端所有能用的缓存方案梳理了一遍。同时,对于http缓存,使用了表格的方案,使得原先晦涩难记的特性变得清晰明了。特记录于此,若有什么欠缺,也望...

    tangr206 评论0 收藏0
  • 文章理解Web缓存

    摘要:的数据将一直保存在浏览器内,直到用户清除浏览器缓存数据为止。它也是一个被标准废弃的功能,主要是通过文件来标注要被缓存的静态文件清单。尽管也有文件,但是与应用缓存却完全不同。另外,用来控制缓存的使用。 最近把前端缓存重新整理了一下,从整体的层面上把前端所有能用的缓存方案梳理了一遍。同时,对于http缓存,使用了表格的方案,使得原先晦涩难记的特性变得清晰明了。特记录于此,若有什么欠缺,也望...

    zlyBear 评论0 收藏0
  • 文章理解前端缓存

    摘要:说起前端缓存,这真是一个百看百懂,百懂百忘的重灾区。作为一个前端开发,我们一般不控制缓存,它对我们来说是透明的。名字解析工欲善其事必先利其器,在分析整个缓存流程之前,先明确常见的缓存名词。它是一个通用头,能分别在请求报文和响应报文中使用。 说起前端缓存,这真是一个百看百懂,百懂百忘的重灾区。每次看的时候都觉得自己懂了,但是过两天又忘了。究其原因,缓存对前端来说很重要,但是控制权却是在浏...

    yiliang 评论0 收藏0
  • 文章理解前端缓存

    摘要:说起前端缓存,这真是一个百看百懂,百懂百忘的重灾区。作为一个前端开发,我们一般不控制缓存,它对我们来说是透明的。名字解析工欲善其事必先利其器,在分析整个缓存流程之前,先明确常见的缓存名词。它是一个通用头,能分别在请求报文和响应报文中使用。 说起前端缓存,这真是一个百看百懂,百懂百忘的重灾区。每次看的时候都觉得自己懂了,但是过两天又忘了。究其原因,缓存对前端来说很重要,但是控制权却是在浏...

    RichardXG 评论0 收藏0
  • 前端基础

    摘要:谈起闭包,它可是两个核心技术之一异步基于打造前端持续集成开发环境本文将以一个标准的项目为例,完全抛弃传统的前端项目开发部署方式,基于容器技术打造一个精简的前端持续集成的开发环境。 这一次,彻底弄懂 JavaScript 执行机制 本文的目的就是要保证你彻底弄懂javascript的执行机制,如果读完本文还不懂,可以揍我。 不论你是javascript新手还是老鸟,不论是面试求职,还是日...

    graf 评论0 收藏0

发表评论

0条评论

Scliang

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<