什么是前端开发领域的 Page Blink 和 Page Flicker

我做了一段时间的 Angular 之后,听到同事们处理 Github issue 时,偶尔会提到 Page Blink 这个名词。

例如这个:

可以看出如果一个 Angular 应用缺乏 ngrx store,缓存以及 SSR Transfer State 等机制,就容易出现 Page Blink 的问题。

以及我们在 Github 的代码仓库里收到其他开发者报的一个 issue

这个问题在 3G 网络下尤其明显:


Page blink 指的是在前端开发中,当页面重新加载或导航到新的URL时,浏览器中的页面会短暂地"闪烁"或"白屏"的现象。

这种现象的出现主要是因为浏览器在重新渲染页面时需要重新加载 CSS、JavaScript和其他资源文件,这个过程会导致页面上的所有内容都被删除,然后再重新绘制。当浏览器加载资源的时间很长时,页面就会出现明显的白屏或闪烁现象。

为了避免这种现象的出现,开发者们通常会采取一些优化策略,比如使用预加载、预渲染等技术,以尽可能减少重新加载资源所需的时间,并尽可能减少页面的白屏时间。另外,一些框架和库(如React、Vue等)也提供了一些优化机制,可以在页面重新渲染时尽可能地减少闪烁和白屏现象的出现。?

Page flicker 则是另一个概念:Page flicker指的是在前端开发中,当页面加载时,由于CSS样式或JavaScript脚本的加载顺序等原因,页面上的元素会在加载完成前闪烁或跳动的现象。

通常情况下,当浏览器开始加载页面时,会先加载HTML内容,然后再加载CSS样式和JavaScript脚本等资源。如果CSS样式或JavaScript脚本的加载顺序不正确,或者它们的加载时间过长,就可能导致页面上的元素出现闪烁或跳动的现象。这种现象在用户体验上会产生一定的负面影响,降低用户对网站的满意度。

为了避免Page flicker现象的出现,开发者们通常会采取一些优化策略。比如,将CSS样式表放在文档头部,将JavaScript脚本放在文档底部等等,这些策略可以最大限度地减少Page flicker的发生。

总之,Page flicker是前端开发中一个常见的问题,需要通过合理的优化策略来避免它的出现,从而提升用户体验。

Spartacus 曾经修复过的一个 Page Flicker 的问题

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章