Сегодняшняя сессия вопросов и ответов приходит к нам благодаря SuperUser - подразделению Stack Exchange, основанной на сообществах сайтам Q & A.
Вопрос
У читателя SuperUser Лорана очень любопытно, почему именно страницы, похоже, загружают элементы совершенно по-другому, чем когда-то. Он пишет:
I’ve noticed that recently many websites are slow to display their text. Usually, the background, images and so on are going to be loaded, but no text. After some time the text starts appearing here and there (not always all of it at the same time).
It basically works the opposite as it used to, when the text was displayed first, then the images and the rest was loading afterwards. What new technology is creating this issue? Any idea?
Note that I’m on a slow connection, which probably accentuates the problem.
See [above] for an example – everything’s loaded but it takes a few more seconds before the text is finally displayed.
Так что же дает? Лоран и многие из нас помнят время, когда сначала загрузился текст, загруженный первым, а все остальное - анимированные GIF-файлы, черепичные фоны и все другие артефакты веб-браузера позднего 90-х - пришли позже. Что в первую очередь вызывает текущую ситуацию элементов дизайна, текст позже?
Ответ
Докладчик SuperUser Даниэль Андерссон предлагает замечательный подробный ответ, который подходит к сути тайны «почему-в-шрифты»:
One reason is that web designers nowadays like to use web fonts (usually in WOFF format), e.g. throughGoogle Web fonts.
Previously, the only fonts that were able to be displayed on a site was those that the user had locally installed. Since e.g. Mac and Windows users not necessarily had the same fonts, designers instinctively always defined rules as
font-family: Arial, Helvetica, sans-serif;
где, если первый шрифт не был найден в системе, браузер будет искать второй и, наконец, резервный шрифт «без засечек».
Теперь можно указать URL-адрес шрифта как правило CSS, чтобы заставить браузер загружать шрифт, как таковой:
@import url(https://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
- Будет: Отображение кэшированного ttf / otf / woff
- Будет: Загрузка и отображение данных-uri ttf / otf / woff
- Будет: Отображение кэшированных данных-uri ttf / otf / woff
- Не буду: Отображение шрифта, который уже установлен и указан в вашем традиционном стеке шрифтов
- Не буду: Отображение шрифта, который установлен именован, используя локальное () местоположение
Поскольку Chrome ждет, пока риск FOUT не исчезнет до рендеринга, это дает задержку. Которомустепень эффект заметен (особенно при загрузке из кеша), по-видимому, зависит, среди прочего, от количества текста, который нужно визуализировать, и, возможно, от других факторов, но кеширование не полностью устраняет эффект.
Ирландский также имеет некоторые обновления относительно поведения браузера с 2011-04-14 в нижней части сообщения:
- Fire Fox (по окончанию FFb11 и FF4) больше не существует FOUT! Wooohoo! Http: //bugzil.la/499292 В принципе, текст невидим в течение 3 секунд, а затем возвращает возвратный шрифт. Webfont, вероятно, будет загружаться за эти три секунды, хотя … надеюсь …
- IE9 поддерживает WOFF и TTF и OTF (хотя для этого требуется встраивание битрейта - в основном, если вы используете WOFF). ТЕМ НЕ МЕНИЕ!!! IE9 имеет FOUT.:(
- У Webkit есть патч, ожидающий приземления, чтобы показать резервный текст через 0,5 секунды. Такое же поведение, как FF, но 0.5s вместо 3s.
Если бы это был вопрос, предназначенный для дизайнеров, можно было бы найти способы избежать таких проблем, как
webfontloader
но это был бы другой вопрос. Ссылка на Польский ирландский язык подробно обсуждается по этому вопросу.
Есть что добавить к объяснению? Звучит в комментариях. Хотите узнать больше ответов от других пользователей Windows? Посмотрите здесь полную дискуссионную тему.
