Почему веб-страницы не отображают сразу их текст?

Если вы склонны смотреть на панель браузера орлиным глазом, вы, возможно, заметили, что страницы часто загружают свои изображения и макет перед загрузкой текста - в точности противоположную схему загрузки, которую мы наблюдали в 1990-х годах. В чем дело?

Сегодняшняя сессия вопросов и ответов пришла к нам благодаря SuperUser - подразделению Stack Exchange, группе веб-сайтов вопросов и ответов, управляемой сообществом..

Вопрос

Читателю SuperUser Лорану очень любопытно, почему именно страницы загружают элементы совершенно иначе, чем когда-то раньше. Он пишет:

Я заметил, что в последнее время многие сайты медленно отображают свой текст. Обычно загружаются фон, изображения и т. Д., Но текст отсутствует. Через некоторое время текст начинает появляться здесь и там (не всегда все одновременно).

Он работает в основном наоборот, когда раньше текст отображался, а затем загружались изображения и остальные. Какие новые технологии создают эту проблему? Любая идея?

Обратите внимание, что у меня медленное соединение, что, вероятно, подчеркивает проблему.

См. [Выше] для примера - все загружено, но для окончательного отображения текста требуется еще несколько секунд.

Так что же дает? Лоран и многие из нас помнят время, когда текст загружался первым, а все остальное - потрясающие анимированные GIF-изображения, мозаичный фон и все другие артефакты просмотра веб-страниц в конце 90-х - пришли позже. Что вызывает текущую ситуацию с элементами дизайна в первую очередь, текст позже?

Ответ

Сотрудник SuperUser Даниэль Андерссон предлагает удивительно подробный ответ, который раскрывает загадку «почему шрифты загружаются последними»:

Одна из причин заключается в том, что в настоящее время веб-дизайнерам нравится использовать веб-шрифты (обычно в формате WOFF), например, через Google веб-шрифты.

Ранее единственными шрифтами, которые можно было отображать на сайте, были те, которые пользователь установил локально. Так как, например, У пользователей Mac и Windows не обязательно были одинаковые шрифты, дизайнеры инстинктивно всегда определяли правила как
семейство шрифтов: Arial, Helvetica, без засечек; 
где, если первый шрифт не найден в системе, браузер будет искать второй, и, наконец, запасной шрифт «без засечек».

Теперь можно указать URL-адрес шрифта в качестве правила CSS, чтобы браузер мог загрузить шрифт следующим образом:
@import url (http://fonts.googleapis.com/css?family=Droid+Serif:4 700 700); 
а затем загрузить шрифт для определенного элемента, например:
семейство шрифтов: «Droid Serif», без засечек; 
Это очень популярно, когда можно использовать пользовательские шрифты, но это также приводит к проблеме, заключающейся в том, что текст не отображается, пока ресурс не будет загружен браузером, который включает время загрузки, время загрузки шрифта и время рендеринга. Я ожидаю, что это артефакт, который вы испытываете.

В качестве примера: одна из моих национальных газет, Dagens Nyheter, использует веб-шрифты для заголовков, но не для лидов, поэтому, когда этот сайт загружается, я обычно вижу сначала, а через полсекунды все пустые места выше заполняются с заголовками (это верно для Chrome и Opera, по крайней мере. Другие не пробовал).

(Кроме того, в наши дни дизайнеры распространяют JavaScript абсолютно везде, поэтому, возможно, кто-то пытается сделать что-то умное с текстом, поэтому он откладывается. Однако это будет очень специфично для сайта: общая тенденция задержки текста в этих раз, проблема веб-шрифтов, описанная выше, я считаю.)

Дополнение:

Этот ответ стал очень голосуемым, хотя я не вдавался в подробности, или, возможно, так как этого. Было много комментариев в ветке вопросов, поэтому я постараюсь немного расширить […]

Этот феномен, по-видимому, известен как «флеш нестандартного контента» в целом и «флеш нестандартного текста» в частности. Поиск «FOUC» и «FOUT» дает больше информации.

Я могу рекомендовать пост веб-дизайнера Пола Ирриша на FOUT в связи с веб-шрифтами.

Что можно отметить, так это то, что разные браузеры обрабатывают это по-разному. Я писал выше, что я тестировал Opera и Chrome, которые оба вели себя одинаково. Все основанные на WebKit (Chrome, Safari и т. Д.) Предпочитают избегать FOUT путем не рендеринг текста веб-шрифта с резервным шрифтом в течение периода загрузки веб-шрифта. Даже если веб-шрифт кешируется, там будут задержка рендеринга. В этой ветке вопросов есть много комментариев, говорящих об обратном, и что совершенно неверно, что кэшированные шрифты ведут себя так, но, например, из приведенной выше ссылки:

В каких случаях вы получите FOUT

Будет: Загрузка и отображение удаленного ttf / otf / woff

Будет: Отображение кэшированного ttf / otf / woff

Будет: Загрузка и отображение data-uri ttf / otf / woff

Будет: Отображение кэшированных данных-uri ttf / otf / woff

Не буду: Отображение шрифта, который уже установлен и назван в вашем традиционном стеке шрифтов

Не буду: Отображение установленного и названного шрифта с использованием local ()

Поскольку Chrome ждет, пока риск FOUT не исчезнет, перед рендерингом это дает задержку. Которому степень эффект виден (особенно при загрузке из кеша), кажется, зависит, помимо прочего, от объема текста, который должен быть обработан, и, возможно, от других факторов, но кэширование не полностью удаляет эффект.

Ирландский также имеет некоторые обновления, касающиеся поведения браузера по состоянию на 2011-04-14 в нижней части поста:

Fire Fox (по состоянию на FFb11 и FF4 Final) больше не имеет FOUT! Wooohoo! Http: //bugzil.la/499292 В основном текст невидим в течение 3 секунд, а затем он возвращает запасной шрифт. Веб-шрифт, вероятно, будет загружен в течение этих трех секунд, хотя ... надеюсь ...

IE9 поддерживает WOFF, TTF и OTF (хотя он требует наличия встроенного набора битов - в основном спорный, если вы используете WOFF). ТЕМ НЕ МЕНИЕ!!! IE9 имеет FOUT. :(

У Webkit есть патч, ожидающий приземления, чтобы показать запасной текст через 0,5 секунды. То же поведение, что и FF, но 0,5 с вместо 3 с.

Если бы этот вопрос был направлен на дизайнеров, можно было бы попытаться избежать таких проблем, как webfontloader, но это был бы другой вопрос. Ссылка Пола ирландского языка более подробно обсуждается.

Есть что добавить к объяснению? Звук выключен в комментариях. Хотите узнать больше ответов от других технически подкованных пользователей Stack Exchange? Ознакомьтесь с полным обсуждением здесь.