一篇文章理解前端缓存

2018-07-19 03:12 来源:未知

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

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

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

  Expires有服务器时间和浏览器时间不统一的问题,所以HTTP 1.1新定义了Cache-Control。它是一个通用HTTP头,能分别在请求报文和响应报文中使用。例如:

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

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

  唔,这货与ETag简直一模一样有没有。真的是简单的一塌糊涂呢,可恶……=_=Last-Modified和Etag都存在的情况,它们要都符合才能返回304。这也很好理解,都是HTTP1.1的小兄弟,大家权利要统一。

  缺点:如果这个资源在服务器上被修改了,但是最后的内容却没有变。这时候Last-Modified就匹配不上了,相当于多返回了一个相同的资源文件,浪费了流量。