快速加载框架UI的用户展示指南

Question

网页的实际加载时间和用户对该加载时间的印象可能完全不同。例如，以下是用户在加载页面时可以拥有的三种不同体验：

• 等待空白页面立即完全呈现
• 页面的某些部分会立即呈现（例如顶部导航），但会加载组件 单独
• 整个页面由单独加载的组件组成

随着JavaScript框架变得越来越常见，例如React或Angular，这些不同的UI体验变得越来越普遍。

如果单个组件使用加载标记来指示正在发生的事情，例如Loading...或旋转轮，则用户的UI体验也会发生变化。

有哪些指导方针可以改善用户对快速加载页面的印象？如果没有，你如何解决这个问题？

Answer 1

当javascript被解析并执行时，总会有一个初始命中。但是，如果您在非常快的初始加载之后，可以尝试一些技术，例如：

• 首先提供“关键”有效负载，这将快速加载网页的“基本要素”，使其感觉更具响应性。 Webpack具有可用于此效果的代码拆分功能。
• 利用服务器端渲染（即通用样式应用程序），它将执行javascript服务器端并将输出嵌入HTML有效负载中。这可能会为您所获得的效果带来最佳效果，因为您没有获得“闪烁”部分。这是一种非常酷的技术，但可能会带来更多技术挑战，因此您必须自行决定权衡。

如果您正在阅读SSR的示例，您可以查看我最近为React整理的样板：https://github.com/ctrlplusb/react-universally

在该样板中，我实际上也使用了基于应用程序中定义的路由的Webpack代码分割功能。结帐webpack的文档：https://webpack.github.io/docs/code-splitting.html

如果webpack对你来说是全新的，我强烈推荐使用js系列：https://survivejs.com/