http缓存

320 阅读4分钟

又贴一篇文章:www.cnblogs.com/echolun/p/9…

http缓存对象

http缓存是针对服务器上的一些更新频率不大的静态资源文件

http缓存类型

http的缓存类型有两种,分别是强缓存协商缓存

强缓存

强缓存就是浏览器不会向服务器发送请求,直接拿本地浏览器的缓存。

命中的 Status Code

200 OK (from disk cache)

200 OK (from memory cache)

设置方式

响应头 Expires

  • Expires的内容是指定过期时间,就是服务器指定什么时间过后就失效,是服务器的时间来指定的。
  • 浏览器判断缓存是否过期使用本地时间和Expires对比,看是否在这个时间内,如果是,就直接获取本地的缓存,不过不是,再去发起http请求获取资源。
  • 因为浏览器是用本地时间来判断是否过期的,所以就存在本地时间更改了导致过期或者 一直不过期的问题。

请求头/响应头 Cache-Control 设置值为max-age=x

  • 在x秒内不会向服务器发起请求,直接从缓存里面拿
  • Expires共存时,优先级比Expires

协商缓存

协商缓存就是从第二次请求开始,每一次的请求都去询问服务器资源是否有更改,如果有更改,服务器就重新发送资源给浏览器,没有就直接使用本地缓存

命中的 Status Code

304

设置方式

请求头if-Modified-Since 和 响应头Last-Modified

  • 第一次请求资源的时候,服务器发送Last-Modified响应头和对应资源给浏览器,浏览器记录下来。
  • 第二次请求资源的时候,浏览器讲if-Modified-Since请求头发送给服务器对比,内容是第一次请求的服务器的Last-Modifie的内容。之后的请求也一样
  • 如果对比的结果是两者一样,服务器告诉浏览器没有更改,浏览器从缓存中获取资源,状态码返回304
  • 如果对比的结果是两者不一样,服务器重新发送Last-Modified以及资源给浏览器,状态吗返回200

请求头if-None-Match 和 响应头Etag

  • Etag是服务器给浏览器发送的一个资源表示,if-None-Match是浏览器记录下来的上一次请求的Etag
  • 下一次请求的时候浏览器发送if-None-Match请求头,服务器对比资源的Etag,如果一样,则命中资源返回状态码304,浏览器拿缓存资源。如果不是,则重新发送Etag和资源
  • Etag的优先级比Last-Modified高。

浏览器获取缓存的过程

在项目中遇到的缓存问题以及解决办法

之前在一个项目里面遇到了强缓存的问题,浏览器一直获取本地的缓存,到时线上的文件更新了,但是浏览器显示的数据一致没有更新(项目比较特殊...数据更新是通过更新服务器文件的方式,所以要读服务器最新的文件)。

一开始请求文件是通过ajax读取文件的,GTE的形式,没有任何处理,通过GET请求读取项目相对位置的文件的时候,浏览器是默认强缓存的,出现了200 OK (from disk cache)的状态码。

解决方式是在请求的URL上面添加时间戳,浏览器会认为每一次的请求都是新的请求,因为参数不一样,所以浏览器的对GET请求的URL是有缓存的??浏览器会判断请求的URL是不是以前请求过,如果是请求过的,就回去找缓存,如果不是,就直接发起http请求。不过我在网上搜不到答案,有点专牛角尖。

总结

关于

  1. 请求头/响应头有哪些
  2. Cache-Control的值有哪些
  3. 各种缓存请求头的对比
  4. 缓存提意见方案

都在上面的那一片文章当中,这篇是按照我自己的思路整理的。