快速加载框架UI的用户印象指南

Question

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

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

这些不同的UI体验随着JavaScript框架变得越来越普遍而变得更加普遍，比如React或Angular。

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

哪些准则可以改善用户对快速加载页面的印象？如果没有，你如何处理这个问题？

Answer 1

在解析和执行javascript时，总是会出现初始命中。但是，如果您在完成非常快的初始加载之后，可以尝试以下几种技术：

• 首先提供一个“关键”有效负载，这将快速加载您的网页的“基本要素”，以使它感觉更响应。Webpack有一个代码分裂功能，您可以使用这个效果。
• 使用服务器端呈现(即通用样式的应用程序)，它将执行javascript服务器端并将输出嵌入到HTML有效负载中。这可能会为您所追求的目标提供最好的结果，因为您不会得到“闪烁”部分，否则您会得到更多。这是一种相当酷的技术，但可能会带来更多的技术挑战，因此您必须自己决定权衡。

如果你想要一个SSR的例子，你可以看看我最近整理出来的一个样板：https://github.com/ctrlplusb/react-universally。

在这个样板中，我实际上也利用了Webpack基于应用程序中定义的路由的代码拆分特性。查看webpack的文档：https://webpack.github.io/docs/code-splitting.html

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