浏览器按F5与地址栏访问的区别

本文探讨了在IE浏览器中,通过F5刷新与地址栏重新输入地址访问网页时,浏览器缓存处理的不同。通过分析HTTP请求头和响应头,解释了304状态码和200状态码的触发条件,以及如何使用ETag和Last-Modified进行资源验证。当缓存过期,浏览器会先检查资源是否更新,若未更新则返回304状态码,节省流量。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

以下是本人对这些现象的个人理解,不正确的还请指正。

首先来看一下表面现象:

        用来测试的浏览器为IE浏览器,首先将浏览器的缓存全部清空。

第一次访问目标地址,我们的开发者工具中网络面板显示情况如下:

    

相应的请求头和响应头分别为:

1.Request头部,IE浏览器没有控制缓存的信息

   

2.Response的头部信息:


可以看到,响应表头添加了ETag和Last-Modified信息。ETag和Last-Modified的意义将在下文讲到。

此时我们分别通过按F5刷新按和在地址栏里重新输入地址观察现象。

按F5刷新按钮:

    

我们得到一个304的状态码,意思是服务器资源并没有修改,b.html将从缓存加载。对这次请求的request和response进行分析。

        request请求:

                    

        可以看到,这次的请求头部有一个if-Modified-Since和if-None-Match信息。它们的含义大致为:在第一次访问的过程中,我们看到响应里有ETag和Last-Modified两个key的信息。Last-Modified根据字面理解就是该资源上次修改的日期。ETag可以简单理解为资源的一个标识符,在资源的各个生命周期中,它都具有不。当资源发生变更时,如果其头信息中一个或者多个发生变化,或者消息实体发生变化,那ETag也随之发生化。第二次请求的if-Modified-Since和if-None-Match作用便是与服务器上存储的ETag和Last-Modified进行对比,如若if-Modified-Since与Last-Modified相等并且ETag和if-None-Match相等,则服务器返回304状态码,表示资源并没有刷新。若不相等,则重新从服务器进行资源的获取。

明白了以上的原理,我们分析上面的请求头,可以看到该对比是相等的,所以系统的Response便是304状态码,我们可以看一下这个Response。

Response:

    

分析了按F5出现304状态码的原因,我们再来看一下在地址栏输入出现的结果

地址栏输入地址按回车:


    可以看到,结果为200状态码,结果来自缓存,意思就是浏览器并没有发送请求。

我们看到的请求的标头也是空的,那么地址栏输入地址按回车意思就是直接从缓存进行加载,而不去进行缓存内容的更新验证。但是问题来了,我们都知道缓存是有一个过期时间的,如果缓存没有过期可以看到以上结果,如果缓存过期怎么办呢,我们继续分析。

现在我们用charles工具进行分析,该工具可以拦截Http的请求响应并进行相应的想改再发送。

我们首先在Charles打好断点,清楚缓存,访问该html页面。

此时,我们的该html的响应中,给它添加一个过期时间,Cache-Control:max-age=30。意思是该缓存可以存活30s,具体的Cache-Control细节我正在研究,并在将来写相应的原理讲解的文章。

这时,将这个请求,返回给浏览器。等待30s,我们再次通过地址栏输入地址按回车键,可以看到此次请求并没有像之前那样直接从缓存加载数据,而是向服务器发送了请求,进行了缓存的验证工作。


此处需要明确的是,当浏览发现缓存文件过期后,并不会直接从服务器下载资源,而是首先进行资源的版本检测,如果发现服务器资源没有发生变化,便会如上图所示服务器返回304状态码,这样相对于直接从服务器下载会节省很多流量。



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值