12月03th

使用神奇的Ctrl+F5按键刷新网页的好处

DIY前端设计我来说两句!

使用浏览器查看网页时,很多人都知道按下键盘上的F5键是刷新网页,这个等效于点击鼠标右键菜单中的“刷新”选项。那么我们今天要讲的Ctrl+F5组合按键到底是什么鬼?究竟有何神奇之处? 是的,你没猜错,Ctrl+F5也是刷新,而且是强制刷新。简单的理解就是让浏览器重新访问网页,就像第一次那样,一切都是全新呈现,打开速度也会稍慢一些。下面是分别使用F5和Ctrl+F5刷新的速度对比截图:

    通过观察资源加载可以发现,F5刷新时大部分资源的状态码都是304,也就是重定向,大部分都是使用缓存资源;而Ctrl+F5刷新时所有资源状态码都是200,都是重新从服务器下载了资源。这实际上是浏览器的“智能化”表现,为了尽可能提高网页打开速度,减少等待时间,浏览器会自动缓存网页静态资源以备再次使用,如图片、样式、脚本等文件。简单来说,浏览器发起普通刷新请求时,加载的是缓存文件,强制刷新则是从服务器上全新下载文件。
    什么情况下需要使用Ctrl+F5刷新网页?
    网页修改过图片、样式、脚本等静态文件后,F5普通刷新看不到实时效果,经常折腾前端修改的朋友很有必要掌握此技能,做为一种习惯也不会错。另外,每次修改网页前端代码时,为静态文件加载语句加上不同版本号参数,如src="main.js?t=201903182557"这样,也能避免缓存情况。
    顺便科普一下,网站使用第三方CDN加速时,采用的是网络节点缓存技术,这种情况使用Ctrl+F5刷新网页无法更新网络节点上的缓存文件,更新缓存文件需要在加速平台进行操作。

本文出自:DIY博客园,链接:https://www.diybloghome.com/frontlogy/2255.html,转载请注明!