本文章主要内容参考了 彻底理解浏览器的缓存机制(http缓存机制) 这篇文章,有些图画的很好也是直接用了,特此感谢!另外本文章扩充了一些额外知识,以及个人思考,希望大家一起学习。
为什么需要缓存?
- 加快网站访问速度
- 减少用户流量消耗
- 减少服务器压力
浏览器刷新方式
只能在浏览器(以chrome为例)调试模式下,才能右击刷新按钮弹出菜单,否则需要快捷键或者手动打开菜单
- 正常重新加载:正常刷新,使用缓存数据
- 硬性重新加载:强制浏览器重新下载并加载内容。资源有可能来自于缓存的版本(如果页面通过重定向加载额外的资源,则有可能会从缓存加载数据)
- 清空缓存并硬性重新加载:完全清除页面的缓存并重新下载所有内容
缓存流程解析
流程解析
浏览器第一次发起请求,服务端响应请求,返回相应的缓存标识,浏览器根据相应的标识,决定是否将响应结果和缓存标识保存入浏览器缓存
需要注意的点:
- 浏览器每次发起请求,都会先在浏览器缓存中查找该请求之前的结果以及缓存标识
- 浏览器每次拿到返回的请求结果都会将该结果和缓存标识存入浏览器缓存中
以上两点结论就是浏览器缓存机制的关键,根据是否需要向服务器重新发起HTTP请求,可以将缓存过程分为两个部分,分别是强制缓存和协商缓存。
强制缓存
强制缓存就是向浏览器缓存查找该请求结果,并根据该结果的缓存规则来决定是否使用该缓存结果的过程
规则:当浏览器向服务器发送请求的时候,服务器会将缓存规则放入HTTP响应的报文的HTTP头中和请求结果一起返回给浏览器,控制强制缓存的字段分别是Expires
和Cache-Control
,其中Cache-Control
的优先级比Expires
高