Удаление белого пустого содержимого, мерцающего при первой загрузке (среда Quasar)

Я использую предварительно обработанный контент для показа пользователям до того, как приложение было визуализировано Vuejs. Я замечаю, что проблема с квазар-фреймворком при первой загрузке - мерцание пустого белого содержимого.

Это шаги воспроизведения:

  1. Подготовка: используйте инструмент разработчика Chrome для моделирования медленной сети 3G, затем откройте панель "Элемент" для проверки DOM.
  2. Введите URL моего сайта, затем посмотрите DOM: Ваш index.html имеет q-app с предварительно обработанным содержимым:
<div id="q-app">
  <h1>My prerender content here</h1>
</div>
  1. [плохо] Следующие несколько секунд, когда будут загружены файлы app..js + vendor..js, квазар выполнит и изменит DOM на (только html-комментарий внутри):
<div id="q-app">
  <!---->
</div>

И мой экран теперь был ужасно белым пустым.

  1. Наконец, через несколько секунд приложение квазара было перерисовано:
<div id="q-app">
  <div class="q-layout">
    ... This is rendered content ...
  </div>
</div>

Как я тестировал: время между этапом 3 и этапом 4 составляет ~1 с в моделировании быстрого 3G и>600 мс в нативном веб-представлении Android / IOS. Это показывает белый пустой экран в то время.

Я протестировал другой проект vue-cli, и у него не было шага 3. Нет проблем.

Итак, как я могу удалить шаг 3 в квазаре?

0 ответов

Другие вопросы по тегам