• 新版网站前后台即将上线,2019年将致力于提高文章质量,加大原创力度,打造一个更加舒适的阅读体验!
  • 极客文库小编@勤劳的小蚂蚁,为您推荐每日资讯,欢迎关注!
  • 新版网站前后台即将上线,2019年将致力于提高文章质量,加大原创力度,打造一个更加舒适的阅读体验!
  • 如果有任何体验不佳的地方,欢迎向客服反馈!

浅谈浏览器的缓存机制


浏览器是有缓存的,做开发的同学都知道浏览器缓存是非常蛋疼的问题,特别是前端开发的同学,明明改了为什么还没有生效,经常要去清理浏览器的缓存,或者禁用浏览器的缓存功能。

我们知道在浏览器中按 F5 是刷新页面,CTRL+F5 是强制刷新页面,这两个有什么区别呢?

F5 刷新会使用浏览器的缓存
CTRL+F5 刷新是不会使用缓存的,每次请求都会请求服务器的最新资源,它的原理就是在请求头上加上一些参数告诉服务器要获取最新的资源。

当使用普通刷新时,浏览器在请求之前会检查Expires这个值,如果Expires时间小于当前时间说明缓存已经失效,重新发起获取资源。

另外,还有一个参数Last-Modified,即服务器返回的最后的修改时间,浏览器在请求时会带上If-Modified-Since这个值,服务器判断 Last-Modified 与 If-Modified-Since 是否一致,如果一致则告诉浏览器是最新的,服务器不返回新的资源。

与 Last-Modified 功能类似的还有一个参数:Etag,即让服务器给每个页面分配一个唯一编号,然后可以通过这个编号来确定页面是不是最新的,这个使用较少,这里不再详述。


上面为强制刷新的情况,浏览器在请求头做了以下设置:
Cache-control: no-cache
Pragma: no-cache
即表示不使用本地的缓存直接向服务器重新获取资源。

下面是关于 Cache-control 的参数定义:
public所有内容都将被缓存,客户端和代理服务器都可缓存
private内容只缓存到私有缓存中,仅客户端可以缓存,代理服务器不可缓存
no-cache必须先与服务器确认返回的响应是否被更改,然后才能使用该响应来满足后续对同一个网址的请求。因此,如果存在合适的验证令牌 (ETag),no-cache 会发起往返通信来验证缓存的响应,如果资源未被更改,可以避免下载。
no-store所有内容都不会被缓存到缓存或 Internet 临时文件中
must-revalidation/
proxy-revalidation
如果缓存的内容失效,请求必须发送到服务器/代理以进行重新验证
max-age缓存的内容将在 xxx 秒后失效, 这个选项只在 HTTP 1.1 可用, 并如果和 Last-Modified 一起使用时, 优先级较高

Cache-control 这个参数在所有浏览器中兼容性很好,而且它的优先级也比较高,和其他像 Expires 同时使用时会覆盖其他的字段,Pragma 作用与 Cache-control 类似,最常用使用的是 Pragma: no-cache 和 Cache-control 结合使用告诉服务器不要使用缓存。

丨极客文库, 版权所有丨如未注明 , 均为原创丨
本网站采用知识共享署名-非商业性使用-相同方式共享 3.0 中国大陆许可协议进行授权
转载请注明原文链接:浅谈浏览器的缓存机制
喜欢 (0)
[247507792@qq.com]
分享 (0)
勤劳的小蚂蚁
关于作者:
温馨提示:本文来源于网络,转载文章皆标明了出处,如果您发现侵权文章,请及时向站长反馈删除。

欢迎 注册账号 登录 发表评论!

  • 精品技术教程
  • 编程资源分享
  • 问答交流社区
  • 极客文库知识库

客服QQ


QQ:2248886839


工作时间:09:00-23:00