Лекция
вспышка нестилизованного контента ( FOUC или вспышка нестилизованного текста ) — это случай, когда веб-страница на короткое время отображается со стилями браузера по умолчанию до загрузки внешней таблицы стилей CSS из-за того, что движок веб-браузера визуализирует страницу до того, как будет извлечена вся информация. Страница исправляется, как только правила стиля загружены и применены; однако сдвиг может отвлекать. Связанные проблемы включают в себя вспышку невидимого текста и вспышку фальшивого текста . Это также может произойти, когда веб-страница использует JavaScript для изменения внешнего вида своего содержимого.
Анимация FOUC при загрузке страницы HTML/CSS. Текст заголовка веб-страницы сначала визуализируется перед файлами CSS Bootstrap .
Проблема была описана в статье под названием «Вспышка нестилизованного контента». Сначала FOUC казалась проблемой браузера, свойственной только Internet Explorer, но позже стала проявляться и в других браузерах, и с тех пор описывается как « эпидемия Safari ».
Вспышка нестилизованного контента нечувствительна к изменениям в версиях CSS или HTML . Эта проблема, которая не затрагивает основной контент, возникает из-за набора приоритетов, запрограммированных в браузере. Поскольку браузер собирает HTML и все вспомогательные файлы, на которые ссылается разметка, браузер строит объектную модель документа на лету. Браузер может выбрать сначала отображение текста, чтобы он мог проанализировать его быстрее всего.
Вспышки нестилизованного контента стали более распространенными теперь, когда HTML-страницы более склонны ссылаться на несколько таблиц стилей. Веб-страницы часто включают ссылки на стили для других носителей, нежели экран браузера, например, правила CSS для принтеров и мобильных устройств. Веб-страницы могут импортировать слои файлов стилей и ссылаться на альтернативные таблицы стилей. Онлайн-реклама и другой вставленный внешний контент, такой как видео и поисковые системы, часто диктуют свои собственные правила стиля в своем блоке кода. Каскадная природа правил CSS побуждает некоторые браузеры ждать, пока все наборы данных стилей будут собраны, прежде чем применять их.
С появлением библиотек JavaScript, таких как jQuery , которые могут использоваться для дальнейшего определения и применения стилей веб-страницы, вспышки нестилизованного контента также стали более заметными. В попытке избежать нестилизованного контента разработчики front-end могут скрыть весь контент до тех пор, пока он не будет полностью загружен, после чего срабатывает обработчик событий загрузки и контент появляется, хотя прерывание загрузки может оставить после себя пустую страницу, которой нестилизованный контент был бы предпочтительнее.
Чтобы эмулировать вспышку нестилизованного контента, разработчики могут использовать надстройки браузера, которые способны отключать CSS веб-страницы на лету. Firebug и Async CSS являются такими надстройками. Другие методы включают ручную остановку страницы от завершения загрузки компонентов CSS. Другой вариант подразумевает использование инструментов блокировки скриптов.
Хотя к 2016 году было разработано несколько различных методов для избежания нежелательного поведения отображения, изменение в поведении рендеринга в Google Chrome версии 50, в результате которого таблицы стилей, внедренные JavaScript, не блокируют загрузку страницы, как того требует спецификация HTML5 , снова привлекло внимание создателей веб-сайтов к этой ситуации, особенно затронув пользователей Typekit , продукта веб-типографики от Adobe Systems . В течение 2 месяцев Adobe изменила способ включения своих шрифтов на сторонние веб-сайты, чтобы избежать нежелательного поведения рендеринга.
Самое простое решение проблемы FOUC — указать все таблицы стилей непосредственно в HTML-документе, а не загружать их через JavaScript. Однако это может задержать процесс загрузки, поскольку браузер также ожидает таблицы стилей, которые могут вообще не влиять на первоначальное отображение. С другой стороны, часто случается, что таблицы стилей, которые нужны только в некоторых случаях, должны загружаться динамически.
Один из вариантов — сначала скрыть затронутые элементы в первоначально загруженных таблицах стилей, а затем перезаписать этот параметр в динамически загружаемых стилях. Это действительно приводит к видимым изменениям, если контент внезапно появляется после загрузки, но это часто не воспринимается как тревожное, как если бы контент был виден с самого начала и его внешний вид значительно изменился. В качестве альтернативы скрытие и отображение также можно выполнить с помощью JavaScript. Существуют различные методы определения момента полной загрузки таблицы стилей.
Однако если загрузка страницы прервана, загруженный контент не будет виден, тогда как неразработанный контент предпочтителен.
Комментарии
Оставить комментарий
Интернет маркетинг , SEO, SMO, монетизация ,
Термины: Интернет маркетинг , SEO, SMO, монетизация ,