当前位置: 首页 > Web前端 > HTML

什么是前端开发领域的PageBlink和PageFlicker

时间:2023-03-29 11:15:51 HTML

从事Angular一段时间后,听到同事处理Github问题时,偶尔会提到PageBlink这个词。比如这个:可以看出,如果Angular应用缺少ngrxstore、cache、SSRTransferState等机制,就很容易出现PageBlink的问题。并且我们在Github代码仓库中收到了其他开发者反馈的一个问题:这个问题在3G网络下尤为明显:页面闪烁是指在前端开发中,当页面重新加载或者导航到新的URL时,浏览时浏览器中的页面将短暂地“闪烁”或“空白”。出现这种现象主要是因为浏览器在重新渲染页面时需要重新加载CSS、JavaScript等资源文件。此过程将导致页面上的所有内容被删除,然后重新绘制。当浏览器加载资源时间过长时,页面会出现明显的白屏或闪烁现象。为了避免这种现象,开发者通常会采取一些优化策略,比如使用预加载、预渲染等技术,尽量减少重新加载资源所需的时间,尽量减少页面的白屏时间。此外,一些框架和库(如React、Vue等)也提供了一些优化机制,可以最大限度地减少页面重新渲染时的闪烁和白屏现象。?页面闪烁是另一个概念:页面闪烁是指前端开发,在页面加载时,由于CSS样式或JavaScript脚本等的加载顺序,页面上的元素会在加载完成前发生闪烁或跳动.通常,当浏览器开始加载页面时,它首先加载HTML内容,然后加载CSS样式和JavaScript脚本等资源。如果CSS样式或JavaScript脚本未按正确顺序加载,或者加载时间过长,可能会导致页面上的元素闪烁或跳转。这种现象会对用户体验产生一定的负面影响,降低用户对网站的满意度。为了避免页面闪烁现象,开发者通常会采用一些优化策略。例如,将CSS样式表放在文档的头部,将JavaScript脚本放在文档的底部等,这些策略都可以最大限度地减少页面闪烁的发生。总之,页面闪烁是前端开发中的常见问题,需要通过合理的优化策略来避免,以提升用户体验。Spartacus曾经修复的页面闪烁错误: