关于javascript:什么是前端开发领域的-Page-Blink-和-Page-Flicker

36次阅读

共计 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 的问题:

正文完
 0