Http缓存

103 阅读3分钟

Http缓存详细介绍

image.png

缓存是否过期 根据服务器端返回的 max-age判断的, 影响的是下一次网络请求

浏览器处理http cache的优先级

  • 先判断资源是否命中强缓存,命中则直接从disk里拿到资源;

  • 如果没有命中强缓存,判断是否命中协商缓存,命中则走协商缓存;

  • 如果命中了协商缓存,会发起请求,服务端根据Request Header里的If-None-Match(对应Etag)和If-Modified-Since(对应Last-Modified)判断资源是否过期,没过期则返回304状态码,浏览器依旧用disk里的资源。如果资源过期,则服务端会返回新的资源;

  • 如果也没有命中协商缓存,则这个请求不走缓存策略,发起真实的请求,从服务端拿资源

Cache-Control在请求头和响应头里的区别

请求头里的Cache-Control影响的是当前这一次请求

响应头里的Cache-Control是告诉浏览器这样存储,下次依照这样来。影响的是下一次请求

Cache-Control:max-age=0 这个值表示,这个请求按照协商缓存的规则走,一定会发出真实的请求。这里和响应头里的max-age=0有不同

Cache-Control:no-cache 表示这次或下次请求不会读缓存资源,即便缓存没有过期,或者资源并没有修改

缓存:控制客户端访问数据方式

服务器设置Cache-Control:max-age=5000 控制客户端请求数据从获取缓存取还是服务器数据库取

访问页面的4种方式

地址栏回车、页面链接跳转、打开新窗口/标签页、history前进后退

这种方式会从强缓存开始判断,是用户浏览网页中最常用的方式。

点击刷新按钮、页面右键重新加载、f5、ctrl+R

这种方式会跳过强缓存,直接从协商缓存开始判断。

但需要注意的是Initiator值为Other的内容才会走协商缓存(通常只有一个,是html内容)。其他的内容,因为是从html里引入的(如script,link,img等),或者从script文件动态引入的。他们的Initiator通常是一个html文件,或者script文件,这些资源还是会依照自己的规则,从强缓存开始判断;

这种方式会在Request Header里添加Cache-Control:max-age=0,这是浏览器自己的行为

硬性重新加载、Ctrl+f5、Ctrl+Shift+R、勾选Disable cache后点刷新

这种方式,所有的资源(不论Initiator的值),都会跳过缓存判断,发起真实的请求,从服务端拿资源。但本地的缓存资源(如disk里的缓存)并没有删除。 这种方式会在Request Header里添加Cache-Control:no-cache和Pragma: no-cache,也是浏览器自己的行为

清空缓存并硬性重新加载

这种方式,相当于先删除缓存(如disk里的缓存),再执行硬性重新加载