Я на самом деле много боролся с этим, поэтому я приложу все усилия, чтобы поделиться тем, что я узнал в своем путешествии по убийству белого флеш-монстра.
Совет № 1: Используйте шаблонизатор на стороне клиента, такой как React или Angular
- . Причина, по которой этот совет № 1, заключается в том, что при использовании этих инструментов вам фактически не нужно повторно загружать страницу, которая является основным виновником«белая вспышка».В конце дня у вас есть только одна страница с React или Angular (если вы не используете рендеринг на стороне сервера или что-то в этом роде).
Совет № 2: Не меняйте фоновые цвета / изображения
- Если вы сохраняете фоны в приложении одинаковыми, «белая вспышка»будет крайне минимальным
Совет № 3: Подумайте об использовании фоновых изображений.
- Именно здесь я больше всего боролся с этим, так как мне было нужноприменять фоновые изображения после того, как технически страница уже загружена.Я все еще вижу белую вспышку из-за этого, но есть шаги, которые я предпринял, чтобы уменьшить это.
- Используйте резервные цвета фона для использования во время загрузки изображения.
- Сжатие изображений с использованием https://tinypng.com/
- Анимируйте изображение после того, как оно было загружено с помощью холодного затухания-in влияет
Совет № 4: Повышение производительности (т.е. минимизация ваших CSS-файлов)
- Как вы ужеобнаружил, что это действительно имеет значение только при начальной загрузке вашего приложения, но это все еще важно.
В заключение, вы всегда получите белую вспышку, если когда-нибудь перезагрузите веб-страницу.Но есть определенные вещи, которые вы можете сделать, чтобы уменьшить это, даже если вы не загружаете контент с помощью React или Angular.Вы заметите, что сайты, которые вы перечислили, по какой-то причине имеют белый фон;)
Опять же, если у людей есть другие предложения, я бы хотел их увидеть, но это те, которые я нашел во время моего собственного исследования.,
[Редактировать] Добавлено альтернативное предложение