网页中F5刷新与ctrl + F5强制刷新的区别?

简介: 网页中F5刷新与ctrl + F5强制刷新的区别?

1667913099087.jpg

F5-刷新


只是刷新一次当前页面的资源,使用F5刷新,浏览器仍然会重复利用之前的缓存数据。


ctrl + F5  -强制刷新


使用ctrl+F5进行刷新,这个时候浏览器就不会重复利用之前已经缓存的数据了,而是去清空缓存,把所有的资源进行重新下载,使网页与本机储存的网页时间标记相同。


这一点在我们进行抓包分析的时候经常会用到,可能有些时候有些没有东西没有抓到,那么就要考虑一下是不是我们刷新的姿势没对?


这两个的区别很大!


一个网页,不仅仅只是有一个HTML,还会依赖其他很多的资源,比如:CSS、JS、图片等。


这些资源都是网络下载到浏览器本地的。由于这些资源可能很大,又限制于网络传输的速率,这个时候去加载页面的速度可能就不会很快,那么进一步就会影响到用户的使用感。


那么这个时候,浏览器就会把这些依赖的资源直接缓存到本地,后续访问的时候速度就很快了, 因为是已经缓存了,就不需要去下载了。


下面通过一个例子,也许能对浏览器缓存机制有一点点理解:


打开哔站,然后观察网络状态,我们先使用F5刷新:

1667913156293.jpg

我们可以看到使用F5刷新,这些加载的静态的文件大小都来源于浏览器的内存缓存。下面我们再使用ctrl + F5 刷新:

1667913171159.jpg

我们可以看到,此时加载的这些文件大小都来自于网络下载,而且显示了多大的文件。其实我们通过加载时间,也可以理解为什么浏览器会有缓存机制,使用F5刷新的时候,加载时间在1秒左右,但是使用ctrl + F5的时候,加载时间在3秒左右,这就能够理解浏览器为什么就会把这些依赖的资源直接缓存到本地,后续访问的时候速度就会很快。


总结:


F5刷新只是请求本地资源重新加载。那么在这个时候,如果在某些业务场景的服务器资源发生了改变,那么这边的本地用户可能某些功能或产品访问不到。


ctrl + F5 是直接请求服务器的资源,让当前页面的资源重新全部从服务器上下载下来,这样就全部更新了。


相关文章
|
6月前
|
小程序 JavaScript
小程序自定义弹窗禁止底部内容滚动(滚动穿透问题)
小程序自定义弹窗禁止底部内容滚动(滚动穿透问题)
897 0
element ui 上传图片之后跳转、刷新、保存,预览和删除丢失问题
这问题困惑了我好久,在官方的element ui 的组件库中,直接拿来使用的话,只有当前显示效果,一旦刷新页面或者保存之后,就会丢失,预览和删除功能。当保存后,保存到后端接口,再次查看,图片是能渲染出来,但是由于保存页面刷新,随之整个上传过程失败,而查看所拿到的图片只是一张静态图片,要想再次预览和查看,需要重新选中上传
234 0
|
Web App开发 缓存 JavaScript
vue vue-router 完美实现前进刷新,后退不刷新。附scrollBehavior源码解析
需求:在一个vue的项目中,我们需要从一个列表页面点击列表中的某一个详情页面,从详情页面返回不刷新列表,而从列表的上一个页面重新进入列表页面则需要刷新列表。   而浏览器的机制则是每一次的页面打开都会重新执行所有的程序,所以这个功能并不能直接实现。
4232 0
|
C#
C# 控件不刷新问题
/********************************************************************** * C# 控件不刷新问题 * 说明: * 当网络连接出问题的时候,希望C#控件能够自动更新界面上的控件。
919 0