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


相关文章
|
前端开发 JavaScript
HTML+CSS如何打造撒花动画效果?3分钟学会,炫酷到爆!
HTML+CSS如何打造撒花动画效果?3分钟学会,炫酷到爆!
|
机器学习/深度学习 数据采集 算法
Python基于低方差特征选择(VarianceThreshold)、遗传算法(TPOTRegressor)实现信用评分卡模型
Python基于低方差特征选择(VarianceThreshold)、遗传算法(TPOTRegressor)实现信用评分卡模型
|
数据库
对象不能从 DBNull 转换为其他类型
对象不能从 DBNull 转换为其他类型
628 0
|
XML 存储 数据处理
tsv、csv、xls等文件类型区别及处理(python版)
tsv、csv、xls等文件类型区别及处理(python版)
|
数据库
FastAPI 学习之路(三十四)数据库多表操作
FastAPI 学习之路(三十四)数据库多表操作
FastAPI 学习之路(三十四)数据库多表操作
|
SQL 资源调度 分布式计算
Apache DolphinScheduler 【安装部署】
Apache DolphinScheduler 【安装部署】
|
Android开发
使用Hilt完成依赖注入,让你的安卓代码层次有几层楼那么高(四)
使用Hilt完成依赖注入,让你的安卓代码层次有几层楼那么高(四)
401 0
|
存储 前端开发 JavaScript
React有状态组件以及事件处理的相关(案例说明,一看就会)
今天给大家带来React入门——有状态组件和事件处理。
254 0
React有状态组件以及事件处理的相关(案例说明,一看就会)
|
前端开发
前端上传文件或者上传文件夹
前端上传文件或者上传文件夹
348 0
前端上传文件或者上传文件夹