Бездействует до срочности, очередь за улучшением визуализации ощущения скорости с помощью Svelte? - PullRequest
Новая
       66

Бездействует до срочности, очередь за улучшением визуализации ощущения скорости с помощью Svelte?

0 голосов
/ 08 июня 2019

Допустим, у меня есть Svelte 3 SPA (одностраничное приложение) и маршрутизатор (svero, navaid, svelte-routing, универсальный или другой).

Когда я перемещаюсь с одной страницы на другую, Svelte работает очень быстро, но когда таких компонентов много, я чувствую «вес», «медлительность» отрисовки всей «страницы».

Если я использую вкладку Chrome «Performance»> «Throttling CPU»> «6x» или «4x», я вижу небольшие, раздражающие «delay», «lag» перед рендерингом новой страницы. Все это без CSS или JS-анимации.

"Просто" на странице слишком много компонентов, которые необходимы.

И при монтировании этих компонентов в фоновом режиме происходит много всего (в основном запросы и вычисления).

Эти компоненты необходимы, но не немедленно необходимы.

Что мне нужно немедленно Вместо - это чувство скорости моего SPA: переход с одной страницы на другую (, даже если фальшивый, пустой ) должен быть быстрым!

Примером (хотя и не 100%) может служить YouTube, который хорошо с этим справился.

Я бы хотел получить:

  • переход со страницы на другую
  • немедленно рендерит прежде всего новую страницу, даже без какого-либо компонента и, возможно, просто текст "Загрузка ..."
  • и затем"медленно" рендерит все остальное

Я пробовал что-то вроде этого: 

<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>

Но я не знаю, хорошо ли я себя чувствую.

А может, теперь проблема в том, что «первый тик» от первого рендера, и тогда все рендеринг снова происходят вместе (я не прав?).

Я думаю, что может быть другой способ справиться с этим.

Я читал о:

Что я могу сделать, чтобы приблизиться к цели?

...