Question

假设我有一个Svelte 3 SPA（单页应用程序）和一个路由器（svero，navaid，svelte-routing，通用或其他）。

当我从一页移动到另一页时，Svelte的速度非常快，但是当组件太多时，我感到呈现整个“页面”的“沉重”，“缓慢”。

如果我使用Chrome的“性能”标签>“ CPU节流”>“ 6x”或“ 4x”，那么在新页面呈现之前，我会看到一个小小的，令人讨厌的“延迟”，“滞后”。所有这些都没有CSS或JS动画。

“简单地”，页面中包含了所有必需的组件。

在安装这些组件时，后台发生了很多事情（主要是查询和计算）。

那些组件是必需的，但不是立即。

我立即需要的是我的SPA的速度感：要从一页导航到另一页（即使是假的，空白的）必须很快！ / p>

YouTube就是一个例子（尽管不是100％），在此方面做得很好。

我想拥有的是：

从页面点击到另一个页面
立即首先呈现新页面，即使没有任何组件，也可能只是文本“正在加载...”
然后“慢慢地”渲染其他所有内容

我尝试过这样的事情：

<script>
  import { onMount } from "svelte";

  import { doQuery } from "../queries";

  let canRender = false;

  onMount(() => {
    setTimeout(() => {
      setTimeout(() => {
        canRender = true;
      });
    });
  });
</script>

<div>
  {#if canRender}
    {#await $doQuery}
      Loading...
    {:then result}
      {#each result as player}
        <div>{player.name}</div>
      {:else}
        No player
      {/each}
    {/await}
  {:else}
    Loading...
  {/if}
</div>

我也尝试过tick：

<script>
  import { onMount, tick } from "svelte";

  import { doQuery } from "../queries";

  let canRender = false;

  onMount(async () => {
    await tick();
    canRender = true;
  });
</script>

<div>
  {#if canRender}
    {#await $doQuery}
      Loading...
    {:then result}
      {#each result as player}
        <div>{player.name}</div>
      {:else}
        No player
      {/each}
    {/await}
  {:else}
    Loading...
  {/if}
</div>

但是我不知道我是否做得好。

也许现在的问题是，与第一个渲染图仅相隔“勾号”，然后所有渲染图再次同时发生（我错了吗？）。

我认为可能还有另一种处理方式。

我了解到：

我该怎么做才能更接近目标？

闲置直到紧急，使用Svelte改善渲染速度感的队列？

0 个答案: