网页中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 是直接请求服务器的资源,让当前页面的资源重新全部从服务器上下载下来,这样就全部更新了。


相关文章
element弹出框关闭并销毁:清空弹出里的数据缓存(整理)
element弹出框关闭并销毁:清空弹出里的数据缓存(整理)
element ui 上传图片之后跳转、刷新、保存,预览和删除丢失问题
这问题困惑了我好久,在官方的element ui 的组件库中,直接拿来使用的话,只有当前显示效果,一旦刷新页面或者保存之后,就会丢失,预览和删除功能。当保存后,保存到后端接口,再次查看,图片是能渲染出来,但是由于保存页面刷新,随之整个上传过程失败,而查看所拿到的图片只是一张静态图片,要想再次预览和查看,需要重新选中上传
268 0
检测浏览器刷新还是退出代码 #127
检测浏览器刷新还是退出代码 #127
78 0
|
Java
网页退出登录,清空session,设置登录页面的浏览器的返回按钮失效!
网页退出登录,清空session,设置登录页面的浏览器的返回按钮失效!
188 0
|
Web App开发 存储 缓存
【译】点击浏览器的前进后退按钮时,页面的缓存机制
【译】点击浏览器的前进后退按钮时,页面的缓存机制
588 0
【译】点击浏览器的前进后退按钮时,页面的缓存机制
|
缓存 Android开发 iOS开发