Исследование для гладкого и быстрого интерфейса, сомнения, используя Svelte 3 - PullRequest
Новая
       74

Исследование для гладкого и быстрого интерфейса, сомнения, используя Svelte 3

0 голосов
/ 20 февраля 2020

выпуск

Я использую Svelte 3 и удивительный svelte-spa-router (https://github.com/ItalyPaleAle/svelte-spa-router)!

Вопрос не предназначен для эксклюзивного используйте с этим маршрутизатором.

Во многих проектах имеются тяжелые страницы с тяжелыми сценариями.

Мне нужен плавный и быстрый интерфейс с немедленной обратной связью при смене страницы.

Одно из возможных решений

Как вы можете прочитать здесь: https://github.com/sveltejs/svelte/issues/2979 около года go Я попросил что-то похожее на авторов Svelte.

Несколько go @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.

Как вы можете видеть, если вы нажмете on:

  1. Светлая страница :

    1. при нажатии сразу загружается!

  2. Жесткая страница :

    1. при нажатии страницы замораживается
    2. медленная интенсивная загрузка ЦП продолжается и
    3. только после этого Svelte отображает страницу

  3. Жесткая страница с rAF :

    1. при нажатии страницы загружается сразу
    2. после этого начинается интенсивная работа процессора
    3. после этой работы процессора переменная loaded устанавливается на true

1 Ответ

1 голос
/ 20 февраля 2020

Это не проблема svelte, это общая проблема для всех веб-приложений: javascript является однопоточным, когда вы нагружаете клиента длительным процессом, то пользователь не может использовать интерфейс. И, да, это также верно, когда мы заключаем долгосрочное задание в обещание. Должно быть таким же с реакцией или vue, и это также должно быть той же проблемой, когда вы обслуживаете страницы, а также отправляете скрипт клиенту.

Так что, избегайте длительных задач в браузере или разбивайте их небольшими порциями, чтобы пользователь все еще мог взаимодействовать с пользовательским интерфейсом - или использовать веб-работников .

И, конечно, вы все равно можете использовать SPA на основе svelte (или реагировать или vue) и вызовите API на бэкэнде, который выполняет вычисления.

...