Если вы склонны смотреть на панель браузера орлиным глазом, вы могли заметить, что страницы часто загружают свои изображения и макет перед загрузкой текста - это прямо противоположный шаблон загрузки, который мы наблюдали в 1990-х годах. Что происходит?
Сегодняшняя сессия вопросов и ответов проходит благодаря SuperUser - подразделению Stack Exchange, группы веб-сайтов вопросов и ответов, управляемой сообществом.
Вопрос
Читателю SuperUser Лорану очень любопытно, почему именно страницы загружают элементы совершенно иначе, чем когда-то. Он пишет:
Я заметил, что в последнее время многие веб-сайты медленно отображают свой текст. Обычно загружаются фон, изображения и т. Д., Но не текст. Через некоторое время текст начинает появляться то тут, то там (не всегда сразу).
Это в основном работает противоположно тому, как это было раньше, когда сначала отображался текст, затем изображения и все остальное загружалось после. Какие новые технологии создают эту проблему? Есть идеи?
Обратите внимание, что у меня медленное соединение, что, вероятно, усугубляет проблему.
См. Пример [above] - все загружено, но до окончательного отображения текста требуется еще несколько секунд.
Так что же дает? Лоран и многие из нас помнят времена, когда текст загружался первым, а все остальное - яркие анимированные GIF-файлы, мозаичный фон и все другие артефакты просмотра веб-страниц в конце 90-х - пришли позже. Что вызывает текущее положение элементов дизайна сначала, а потом текста?
Ответ
Участник SuperUser Даниэль Андерссон предлагает чудесно подробный ответ, который раскрывает самую суть загадки почему-the-fonts-load-last:
Одна из причин заключается в том, что сегодня веб-дизайнеры любят использовать веб-шрифты (обычно в WOFF формат), например через Веб-шрифты Google .
Раньше на сайте могли отображаться только шрифты, установленные пользователем локально. Так как, например, У пользователей Mac и Windows не обязательно были одинаковые шрифты, дизайнеры инстинктивно всегда определяли правила как
семейство шрифтов: Arial, Helvetica, sans-serif;где, если первый шрифт не был найден в системе, браузер будет искать второй и, наконец, запасной шрифт без засечек.
Теперь можно указать URL-адрес шрифта в качестве правила CSS, чтобы браузер загрузил шрифт как таковой:
@import url (http://fonts.googleapis.com/css?family=Droid+Serif:400,700);а затем загрузите шрифт для определенного элемента, например:
семейство шрифтов: 'Droid Serif', без засечек;Это очень популярно, чтобы иметь возможность использовать пользовательские шрифты, но это также приводит к проблеме, заключающейся в том, что текст не отображается до тех пор, пока ресурс не будет загружен браузером, который включает время загрузки, время загрузки шрифта и время рендеринга. Я ожидаю, что это артефакт, который вы испытываете.
В качестве примера: одна из моих национальных газет, Сегодняшние новости , используйте веб-шрифты для заголовков, но не для заголовков, поэтому, когда этот сайт загружен, я обычно сначала вижу потенциальных клиентов, а через полсекунды все пустые места выше заполняются заголовками (это верно для Chrome и Opera, на минимум. Других не пробовал).
(Кроме того, в наши дни дизайнеры используют JavaScript абсолютно повсюду, поэтому, возможно, кто-то пытается сделать что-то умное с текстом, поэтому он откладывается. Однако это будет очень специфичным для сайта: общая тенденция к задержке текста в этих раз это проблема веб-шрифтов, описанная выше, я полагаю.)
Дополнение:
Этот ответ получил очень много голосов, хотя я не вдавался в подробности, или, возможно, потому как этого. В ветке вопросов было много комментариев, поэтому я постараюсь немного расширить […]
Это явление, по всей видимости, известно как «вспышка нестилизованного контента» в целом и «вспышка нестилизованного текста» в частности. Поиск «FOUC» и «FOUT» дает больше информации.
Я могу рекомендовать Сообщение веб-дизайнера Пола Айриша на FOUT о веб-шрифтах .
Можно отметить, что разные браузеры обрабатывают это по-разному. Выше я писал, что тестировал Opera и Chrome, которые вели себя одинаково. Все основанные на WebKit (Chrome, Safari и т. Д.) Предпочитают избегать FOUT не рендеринг текста веб-шрифта с помощью резервного шрифта во время загрузки веб-шрифта. Даже если веб-шрифт кешируется, там будем быть задержкой рендеринга . В этой ветке вопросов есть много комментариев, говорящих об обратном и о том, что совершенно неправильно, что кэшированные шрифты ведут себя так, но, например, из приведенной выше ссылки:
В каких случаях вы получите ФАУТ
- Будет: Скачивание и отображение удаленного ttf / otf / woff
- Будет: Отображение кешированного ttf / otf / woff
- Будет: Скачивание и отображение data-uri ttf / otf / woff
- Будет: Отображение кэшированных данных-uri ttf / otf / woff
- Не буду: Отображение шрифта, который уже установлен и назван в вашем традиционном стеке шрифтов
- Не буду: Отображение шрифта, который установлен и назван с использованием местоположения local ()
Поскольку перед рендерингом Chrome ждет, пока не исчезнут ЧЕТЫРЕ риска, это дает задержку. Которому степень эффект заметен (особенно при загрузке из кеша), похоже, зависит, помимо прочего, от количества текста, который необходимо отобразить, и, возможно, других факторов, но кеширование не полностью устраняет эффект.
У Irish также есть некоторые обновления, касающиеся поведения браузера по состоянию на 2011–04–14 годы, в нижней части сообщения:
- Fire Fox (по состоянию на FFb11 и FF4 Final) больше нет FOUT! Wooohoo! хттп://бюгжил.ла/499292 Обычно текст невидим в течение 3 секунд, а затем возвращается резервный шрифт. Хотя веб-шрифт, вероятно, загрузится в течение этих трех секунд ... надеюсь ...
- IE9 поддерживает WOFF, TTF и OTF (хотя для этого требуется бит встраивания установить вещь - в основном спорный, если вы используете WOFF). ОДНАКО!!! IE9 имеет FOUT. :(
- Webkit имеет патч, ожидающий приземления чтобы отобразить резервный текст через 0,5 секунды. То же поведение, что и FF, но 0,5 с вместо 3 с.
Если бы этот вопрос был адресован дизайнерам, можно было бы найти способы избежать таких проблем, например:
веб-загрузчик, но это уже другой вопрос. Ссылка Пола Айриша дает более подробную информацию по этому вопросу.
Есть что добавить к объяснению? Отключи в комментариях. Хотите узнать больше ответов от других технически подкованных пользователей Stack Exchange? Ознакомьтесь с полной веткой обсуждения здесь .
