调查一个平稳快速的用户界面，怀疑使用Svelte 3

Question

问题

我正在使用Svelte 3和令人惊叹的svelte-spa-router(https://github.com/ItalyPaleAle/svelte-spa-router)！

此问题并非专用于此路由器

许多项目都有沉重的页面和沉重的脚本。

我需要一个流畅快速的用户界面，当我更改页面时可以立即得到反馈。

一种可能的解决方案

您可以在此处阅读：https://github.com/sveltejs/svelte/issues/2979大约一年前，我向《Svelte》的作者提出了类似的要求。

几个小时前@jacwright建议使用requestAnimationFrame而不是setTimeout(https://github.com/sveltejs/svelte/issues/2979#issuecomment-587979989(。

export async function awaitFrames (count = 1) {
for (let i = 0; i <= count; i++) {
await new Promise(requestAnimationFrame)
}
}

onMount(async () => {
await awaitFrames(2);
mySlowFunction(10);
loaded = true;
});

提问时间

我仍然不知道这是否是解决这个问题的最佳方案。

• 还有什么更好的事情可以做吗

• requestAnimationFrame是解决此问题的最佳工具吗

复制

现场示例：https://codesandbox.io/s/investigation-for-a-fluid-ui-bhknp.

如你所见，如果你点击：

1. 轻页面:

   1. 当您点击它时，它会立即加载

2. 硬页：

   1. 单击页面冻结时
   2. CPU密集型工作进展缓慢
   3. 之后Svelte才呈现页面

3. 带有rAF的硬页：

   1. 当您单击页面时，会立即加载
   2. 之后，CPU密集型工作开始
   3. 在CPU工作之后，loaded变量被设置为true

Answer 1

这不是一个小问题，它是所有web应用程序的常见问题：javascript是单线程的，当你用一个长时间运行的进程来强调客户端时，用户就无法使用该接口。是的，当我们用承诺来完成长期任务时，这也是正确的。react或vue应该是一样的，当您提供页面并将脚本发送到客户端时，也应该是同样的问题。

因此，要么避免在浏览器上长时间运行的任务，要么将它们拆分成更小的块，这样用户仍然可以与UI交互，或者使用web工作者。

当然，您仍然可以使用基于svelte(或react或vue(的SPA，并在进行计算的后端调用API。