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