时间戳

首页 > 解决方案 > 调查流畅快速的 UI，使用 Svelte 3 的疑问

javascript - 调查流畅快速的 UI，使用 Svelte 3 的疑问

问题描述

问题

我正在使用 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;
});

提问时间

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

再生产

现场示例：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 工作之后，loadedvar 设置为true

标签： javascriptnavigationsettimeoutrequestanimationframesvelte

解决方案

这不是一个小问题，它是所有 Web 应用程序的共同问题：javascript 是单线程的，当您使用长时间运行的进程向客户端施加压力时，用户将无法使用该界面。而且，是的，当我们将长期运行的任务包装在一个 Promise 中时，这也是正确的。应该与 react 或 vue 相同，并且在您提供页面并将脚本发送给客户端时也应该是相同的问题。

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

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

推荐阅读