共计 932 个字符，预计需要花费 3 分钟才能阅读完成。
我做了一段时间的 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 的问题：