我做了一段时间的 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 的问题: