调查顺利和快速 UI，使用 Svelte 3 的疑问

Question

问题

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

该问题并非专供此路由器使用。

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

我需要一个流畅快速的 UI 并在我更改页面时立即得到反馈。

一种可能的解决方案

正如您在这里看到的那样：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. 缓慢 CPU 密集的工作继续进行并且
3. 仅在 Svelte 呈现页面之后
带 rAF 的硬页:
1. 当您点击页面时立即加载
2. 之后CPU密集的工作开始
3. 在那之后 CPU 工作 loaded var 设置为 true

Answer 1

这不是一个小问题，它是所有web应用程序的通病：javascript是单线程的，当你用一个long-运行进程给客户端压力时，那么用户无法使用该界面。而且，是的，当我们将长运行任务包装在承诺中时，这也适用。 react 或 vue 应该是一样的，当你服务页面和发送脚本到客户端时，它也应该是同样的问题。

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

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

调查顺利和快速 UI，使用 Svelte 3 的疑问

Investigation for a smooth and fast UI, doubts using Svelte 3

javascript

navigation

settimeout

requestanimationframe

svelte

问题

一种可能的解决方案

提问时间

复制