Борьба со вспышками неустановленного текста в одностраничных приложениях в vue

Question

FOUT в СПА с использованием FEF. Это много странных сокращений. :)

Но это все еще проблема.

У меня есть динамический c компонент, который загружает кучу компонентов, которые должны выглядеть очень специфично c. Каждый из них будет иметь свои css и, что очень важно, свои собственные заданные c шрифты.

Шрифты являются проблемой здесь.

Какие существуют способы избежать этого FOUT? в данном случае?

Это мое текущее исследование topi c:

1. Браузеры имеют механизм для скрытия текста, который он обнаруживает, стилизован с помощью Пользовательский шрифт, пока шрифт не загружен.

   • Это не работает в vue, потому что текст еще не загружен ни для браузера, чтобы обнаружить, поэтому, когда JS помещает текст, этот механизм браузера не запускается.
   • Может быть исправлено через SSR, stati c DOM - теперь браузер может обнаруживать. Тем не менее, может и не захотеть - FOIT (Fla sh невидимого текста) возможно хуже (нет контента против плохого контента).

2. Это ничего не делает для динамических c компонентов

   • CSS консолидируется, если только не asyn c component.
   • Вы получаете все CSS импорта, но не все шрифты, пока они не используются на странице. Т.е. он делает сетевой запрос на импорт css, но не на шрифты, пока что-то на странице не будет стилизовано под этот шрифт. По крайней мере, это ... qui c. : D

3. WebFontLoader?

   • A js библиотека от google / typekit, компаньон для веб-шрифтов Google.
   • Возможно, можно использовать для задержки загрузки компонента до тех пор, пока шрифт не загрузится с использованием его событий?
   • Требуется информация о шрифте вне компонента, чтобы знать о нем.
     • Нет очевидного способа спуститься вниз и вытащить CSS.

Answer 1

В зависимости от того, сколько шрифтов вы загружаете и от размера, есть несколько вещей, которые вы можете сделать.

1. Вызовите шрифты в базовом файле HTML (отдельно от вашего другие CSS), поэтому браузер знает о них. Затем создайте скрытый элемент div в родительском компоненте с помощью CSS, вызывающего шрифт для дочернего элемента. Это заставит браузер запрашивать шрифт до загрузки дочернего компонента.

2. Загружать все шрифты отдельно в HTML с помощью rel='preload' или rel='prefetch'. Я бы сделал это в нижней части HTML, чтобы вы не блокировали другой контент.

3. Загрузите ваши шрифты в хук жизненного цикла created, используя CSS Загрузка шрифтов API . Я не уверен, как это будет работать с Google Fonts против собственного хостинга.

4. Создание CSS переходов при загрузке контента, например, полусекундное затухание для маскировки FOUT. Это явно не решение, но никогда не стоит недооценивать силу дыма и зеркал, чтобы влиять на то, как ваше приложение чувствует.

Кроме того, вы должны попытаться использовать font-display ( документы ) CSS собственность. Это не решит проблему, но сделает результаты более предсказуемыми.