L Art du Pré-chargement : Éliminer le "Flash" de Thème avec JavaScript et CSS

Представьте сцену: вы потратили часы на создание красивой тёмной темы для вашего веб-приложения. Цвета идеально сбалансированы, контраст оптимален, и вашим пользователям нравится этот вариант. Но есть неловкая проблема: при каждой перезагрузке страницы, на долю секунды, отображается светлая тема по умолчанию, прежде чем тёмная тема вступит в силу.

Эта визуальная "flash", хотя и кратковременная (иногда менее 100 мс), сразу же воспринимается человеческим глазом и создает неприятные ощущения. Для пользователей, которые выбрали тёмную тему из соображений визуального комфорта или доступности, это мерцание может даже стать болезненным, особенно в слабо освещённом окружении.

Это явление является вариантом того, что называется «Flash of Unstyled Content» (FOUC), классической проблемой веб‑разработки, которая восходит к первым дням CSS. FOUC возникает, когда браузер временно отображает HTML‑содержимое без применяемых к нему стилей CSS, создавая всплеск нестилизованного содержимого.

В нашем конкретном случае мы не говорим о полностью не оформленном контенте, а скорее оВспышка неправильной темы(FOWT) - контент стилизован, но с неправильной темой. Это особенно раздражает, потому что показывает, что наше приложение «забывает» предпочтение пользователя при каждой загрузке страницы.

Хотя эта проблема техническая, она оказывает значительное влияние на восприятие качества вашего приложения:

Недостаток полировки: Мерцание создает впечатление незавершенного или плохо оптимизированного приложения. Пользователи часто ассоциируют эти небольшие визуальные дефекты с недостатком профессионализма.

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

Глазная усталостьДля пользователей, чувствительных к свету или страдающих от мигрени, эта яркая вспышка может быть больше, чем простое эстетическое неудобство.

Воспринимаемая производительностьИронично, даже если ваш сайт загружается быстро, это мигание может создавать впечатление медленного или малоотзывчивого приложения.

Для понимания того, как решить эту проблему, сначала нужно понять, почему она возникает. Мерцание происходит из-за временного смещения между тремя критическими событиями в жизненном цикле веб-страницы:

Проблема возникает, когда событие №3 (выполнение JavaScript) приходит после того, как браузер уже начал или завершил событие №2 (применение стилей). В этот момент браузер уже принял решение о том, какую тему отображать, и ваш код приходит слишком поздно, чтобы повлиять на это до первого рендера.

Самый естественный подход для разработчика — поместить скрипт в конец нашего`<body>`который проверяет предпочитаемую тему пользователя и применяет её. Этот подход следует традиционным лучшим практикам веб-разработки, которые рекомендуют загружать скрипты в конце страницы, чтобы не блокировать рендеринг.

Этот подход кажется логичным на первый взгляд. Мы ждём, пока DOM будет готов, а затем применяем тему. Просто, не так ли? К сожалению, эта простота скрывает фундаментальный недостаток, связанный с временем цикла рендеринга браузера.

Событие`DOMContentLoaded`срабатывает когда начальный HTML‑документ полностью загружен и проанализирован браузером,не дожидаяськонец загрузки таблиц стилей, изображений и подфреймов. Это важный момент для понимания.

Вот типичная последовательность событий:

Проблема? Между шагом 6 (DOMContentLoaded) и шагом 8 (первый рендер) браузер уже принял решения о том, как отобразить страницу. Если ваш скрипт переключения темы выполняется на шаге 6, то уже слишком поздно, чтобы избежать первого отображения с использованием стилей по умолчанию.

На самом деле, тайминг ещё сложнее. Современные браузеры используют сложные техники оптимизации для улучшения воспринимаемой производительности. Они стараются выполнить первый рендер (First Contentful Paint) как можно быстрее, чтобы пользователь увидел что-то на экране.

CSS по умолчанию являются "render-blocking", что означает, что браузер ждёт загрузки и разбора таблиц стилей перед выполнением первого отрисов. Это логично: мы не хотим отображать нестилизованный контент.

Но вот в чем подвох: когда браузер впервые применяет эти стили CSS, он делает это, исходя из текущего состояния DOM. Если атрибут`data-bs-theme`ещё не определён на метке`<html>`, браузер применит стили по умолчанию (обычно светлая тема).

Затем, когда ваш скрипт выполняется и меняет этот атрибут, браузер должен:

Именно этот процесс пересчёта и перерисовки вызывает видимое мерцание.

Для лучшего понимания этой проблемной последовательности, рассмотрим подробную диаграмму последовательности:

Эта диаграмма четко иллюстрирует проблему: первый paint происходит до того, как наш скрипт успевает задать правильную тему. Последующий repaint создает видимое мерцание.

Было предпринято несколько подходов для решения этой проблемы, но у большинства из них есть свои недостатки:

Подход 1: Скрыть содержимое до загрузки

Этот подход скрывает весь контент до тех пор, пока JavaScript не установит правильную тему. Проблема? Это искусственно задерживает отображение контента, создавая впечатление более медленного сайта. Более того, если JavaScript отключён, пользователь не увидит ничего вообще!

Подход 2: Использовать загрузчик/спиннер

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

Подход 3: По умолчанию — тёмная тема

Некоторые разработчики задают тёмную тему как значение по умолчанию в CSS. Это устраняет мерцание для пользователей тёмной темы, но создаёт обратную проблему для пользователей светлой темы !

Ни один из этих подходов не является удовлетворительным, поскольку они обрабатывают симптом, а не коренную причину проблемы.

Ключ к решению этой проблемы — осознать, что нам нужно задать атрибут`data-bs-theme` передчто браузер ещё не начал применять стили CSS. Это означает, что наш скрипт должен выполняться раньше в жизненном цикле страницы, и именно это мы будем изучать в следующем разделе.

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

Такой подход называется «Early Loading» или «Synchronous Preloading» в жаргоне веб‑разработки. Идея состоит в том, чтобы выполнить нашу логику определения темы как можно раньше в жизненном цикле страницы, идеально — в теге`<head>`, даже до того, как браузер начинает загружать файлы CSS.

Le `<head>`Документ HTML обрабатывается браузером последовательно, сверху вниз. Каждый элемент обрабатывается в порядке, в котором он появляется. Это свойство является решающим для нашего решения.

Когда браузер встречает тег`<script>`в`<head>`без атрибутов`async` ou defer, il :

Это поведение, часто рассматриваемое как проблема производительности (отсюда обычная рекомендация размещать скрипты в конце страницы), становится нашим союзником в этом конкретном случае. Размещая наш скрипт определения темы в начале`<head>`, мы гарантируем, что он выполнится до того, как браузер встретит теги`<link>`из наших таблиц стилей.

Наше комплексное решение состоит из трёх взаимосвязанных слоёв, каждый из которых играет определённую роль:

Слой 1 : Persistence (localStorage) Этот слой отвечает за сохранение и восстановление выбора пользователя между сеансами.

Слой 2: Ранняя синхронизация (встроенный скрипт в <head>) Этот слой синхронизирует состояние приложения с DOM перед первоначальной отрисовкой.

Слой 3 : Реактивные стили (CSS с селекторами атрибутов) Этот слой определяет визуальные стили, основанные на состоянии, определённом слоем 2.

Теперь давайте подробно рассмотрим каждый слой.

Le localStorage`это API Web Storage, которая позволяет хранить пары ключ-значение в браузере в постоянном режиме. В отличие от cookies, данные`localStorage:

Для нашего случая использования, этот`localStorage`Он идеален, потому что:

Вот как мы сохраняем выбор пользователя при смене темы :

Это важно управлять случаями, когда`localStorage`не доступен или недоступен. Несколько сценариев могут препятствовать доступу к`localStorage`:

Строгая приватная навигацияSafari в режиме приватного просмотра генерирует исключение`QuotaExceededError`при попытках записи в`localStorage`.

Настройки конфиденциальности: Некоторые браузеры или расширения конфиденциальности могут блокировать доступ к`localStorage`.

Ограничения области : Le `localStorage`не доступен по протоколу`file://`в некоторых браузерах.

Хранилище заполнено: Хотя редко, пространство для хранения может быть полностью заполнено.

Поэтому наш код использует блок`try…​catch`чтобы грациозно обрабатывать эти случаи, продолжая предлагать функциональность смены темы даже если сохранение недоступно.

Для более сложных приложений вы можете рассмотреть дополнительные стратегии:

Синхронизация сервера (необязательная)

Этот подход позволяет синхронизировать предпочтения между устройствами для подключённых пользователей, сохраняя при этом немедленную локальную отзывчивость.

Это здесь магия действительно происходит. Мы собираемся разместить небольшой скриптвстроенныйпрямо в нашем`<head>`, перед всеми нашими тегами`<link>`таблиц стилей. Этот скрипт намеренно минималистичен, автономен и предназначен для выполнения как можно быстрее.

Разберём этот скрипт строка за строкой, чтобы понять каждое решение дизайна:

IIFE (немедленно вызываемая функция)

Эта структура создаёт функцию, которая выполняется немедленно. Почему? Чтобы изолировать наши переменные в локальном скоупе и избежать загрязнения глобального скоупа. Даже если мы используем только`const`(который имеет область видимости блока), IIFE — хорошая практика, которая делает наши намерения очевидными и защищает от возможных конфликтов имён.

Строгий режим

Эта директива включает строгий режим JavaScript, который : - Запрещает использование не объявленных переменных - Генерирует ошибки для опасных операций - Улучшает производительность в некоторых движках JavaScript

Для критического скрипта такого рода мы хотим максимальную безопасность.

Блок try…​catch

Этот блок абсолютно критичен. Он гарантирует, что если что-то пойдёт не так (localStorage заблокирован, маловероятная синтаксическая ошибка и т.д.), наш скрипт не заблокирует загрузку всей страницы. Использование`console.warn`скорее чем`console.error`указывает, что это некритическая проблема.

Чтение localStorage

Эта строка может вызывать исключение в некоторых контекстах (строгий приватный режим Safari). Поэтому она находится в блоке try…​catch.

Условное приложение

Мы применяем тему только если нашли сохранённый вариант. Иначе мы позволяем CSS использовать его тему по умолчанию. Такой подход более надёжен, чем жёстко закодированное значение по умолчанию в JavaScript.

Опциональное, но элегантное улучшение — это определение предпочтения темы операционной системы пользователя, если он ещё не сделал явного выбора в вашем приложении :

Эта функция использует медиа‑запрос`prefers-color-scheme`pour опроса системы. На macOS, Windows 10+, iOS и современном Android, этот запрос возвращает системное предпочтение пользователя.

Преимущества: Персонализированный опыт с первого посещения - Соответствие системному окружению пользователя - Не требуется хранение при первом посещении

Соображения : - Не все браузеры поддерживают эту функцию (но поддержка отличная с 2020 года) - Проверка`window.matchMedia`обеспечивает совместимость - Пользователь всегда может переопределить этот выбор

Наш скрипт предзагрузки разработан, чтобы быть чрезвычайно быстрым:

Минимальный размерПримерно 300 байт не минифицированных, 200 байт минифицированных. Это пренебрежимо мало по сравнению с любым изображением или библиотекой JavaScript.

встроенный: Нет дополнительного HTTP-запроса. Скрипт находится в HTML, поэтому он сразу доступен.

Простые синхронные операцииЧтение ключа из localStorage (операция ультрабыстрая) и изменение атрибута DOM (операция, нативная для браузера).

Нет зависимостиНет фреймворка, нет библиотеки, просто чистый JavaScript. Нет времени запуска, нет парсинга зависимостей.

Единичное выполнение: Этот скрипт выполняется один раз при загрузке. Нет слушателей событий, нет циклов, нет сложных вычислений.

На практике, на современном оборудовании этот скрипт выполняется за менее чем 1 миллисекунды, незаметное время, которое не оказывает никакого влияния на производительность загрузки страницы.

Порядок элементов в`<head>`Это важно. Вот рекомендуемый порядок:

Этот порядок гарантирует, что :

Bootstrap 5 ввёл элегантную систему управления темами, основанную на пользовательских свойствах CSS (CSS‑переменных) и селекторах атрибутов. Эта система использует атрибут`data-bs-theme`на элементе`<html>`чтобы определить, какой набор цветовых переменных применить.

Прелесть этой системы заключается в её простоте: вместо загрузки различных таблиц стилей или переключения классов на тысячах элементов, мы просто меняем один атрибут на одном элементе, а CSS делает остальное благодаря каскаду.

Вот полная структура CSS для реализации надёжной системы темы :