Якщо ви схильні спостерігати за вікном браузера орлиним оком, ви, можливо, помітили, що сторінки часто завантажують свої зображення та макет, перш ніж завантажувати текст - прямо протилежний шаблон завантаження, який ми спостерігали у 1990-х. Що відбувається?
Сьогоднішня сесія запитань і відповідей надійшла до нас люб’язно від SuperUser - підрозділу Stack Exchange, угруповання веб-сайтів із питань та відповідей на основі спільноти.
Питання
Читач SuperUser Лоран дуже цікавий, чому саме сторінки, здається, завантажують елементи абсолютно інакше, ніж колись. Він пише:
Я помітив, що останнім часом багато веб-сайтів повільно відображають свій текст. Зазвичай завантажуються фон, зображення тощо, але без тексту. Через деякий час текст починає з’являтися тут і там (не завжди всі одночасно).
В основному це працює навпаки, як це було раніше, коли спочатку відображався текст, потім зображення та решта завантажувались згодом. Яка нова технологія створює цю проблему? Будь-яка ідея?
Зверніть увагу, що я працюю на повільному зв’язку, що, ймовірно, посилює проблему.
Див. Приклад [above] - все завантажено, але пройде ще кілька секунд, перш ніж текст остаточно відобразиться.
То що дає? Лоран та багато хто з нас пам’ятають той час, коли текст завантажувався першим, а все інше - здивовані анімовані GIF-файли, плитковий фон та всі інші артефакти кінця 90-х, які переглядали веб-сторінки - з’явилися пізніше. Що спричиняє поточну ситуацію з елементами дизайну спочатку, а згодом тексту?
Відповідь
Співробітник SuperUser Даніель Андерссон пропонує чудово розгорнуту відповідь, яка потрапляє до суті таємниці чому-шрифти-завантаження-остання:
Однією з причин є те, що сьогодні веб-дизайнери люблять використовувати веб-шрифти (як правило, в WOFF форматі), напр. через Веб-шрифти Google .
Раніше єдиними шрифтами, які можна було відображати на сайті, були ті, які користувач встановлював локально. Оскільки напр. Користувачі Mac і Windows не обов'язково мали однакові шрифти, дизайнери інстинктивно завжди визначали правила, як
сімейство шрифтів: Arial, Helvetica, sans-serif;де, якби перший шрифт не був знайдений в системі, браузер шукав би другий, і нарешті запасний шрифт "без засічок".
Тепер можна вказати URL-адресу шрифту як правило CSS, щоб браузер завантажив шрифт як такий:
@import url (http://fonts.googleapis.com/css?family=Droid+Serif:400,700);а потім завантажте шрифт для певного елемента, наприклад:
сімейство шрифтів: 'Droid Serif', sans-serif;Це дуже популярно, щоб мати можливість використовувати власні шрифти, але це також призводить до проблеми, що жоден текст не відображається, поки браузер не завантажує ресурс, що включає час завантаження, час завантаження шрифту та час візуалізації. Я сподіваюся, що це той артефакт, який ви відчуваєте.
Як приклад: одна з моїх національних газет, Сьогоднішні новини , використовуйте веб-шрифти для своїх заголовків, але не своїх потенційних клієнтів, тому, коли цей сайт завантажується, я зазвичай спочатку бачу потенційних клієнтів, а через півсекунди всі порожні місця заповнюються заголовками (це стосується Chrome і Opera, на щонайменше. Не пробував інших).
(Крім того, дизайнери обсипають JavaScript цілком скрізь в наші дні, тож, можливо, хтось намагається зробити щось розумне з текстом, саме тому він затримується. Однак це буде дуже специфічно для сайту: загальна тенденція затримки тексту в цих times - це проблема веб-шрифтів, описана вище, я вважаю.)
Додаток:
Ця відповідь стала дуже голосною, хоча я не надто детально розмовляв, чи, можливо, тому що це. У темі запитань було багато коментарів, тому я спробую трохи розширити […]
Це явище, мабуть, відоме як "спалах нестильованого вмісту" загалом, і "спалах нестильового тексту" зокрема. Пошук “FOUC” та “FOUT” дає більше інформації.
Я можу порекомендувати Пост веб-дизайнера Пола Ірландського на FOUT у зв’язку з веб-шрифтами .
Що можна відзначити, так це те, що різні браузери по-різному обробляють це. Вище я писав, що тестував Opera і Chrome, які поводились однаково. Усі засновані на WebKit (Chrome, Safari тощо) вирішили уникати FOUT by ні візуалізація тексту веб-шрифту із запасним шрифтом протягом періоду завантаження веб-шрифтів. Навіть якщо веб-шрифт кешовано буде бути затримкою візуалізації . У цій темі запитань є багато коментарів, які говорять про інше і про те, що абсолютно кепсько, що кешовані шрифти поводяться так, але напр. за посиланням вище:
У яких випадках ви отримаєте FOUT
- Воля: Завантаження та відображення віддаленого ttf / otf / woff
- Воля: Відображення кешованого ttf / otf / woff
- Воля: Завантаження та відображення даних-uri ttf / otf / woff
- Воля: Відображення кешованих даних-uri ttf / otf / woff
- Не буде: Відображення шрифту, який уже встановлено та названо у вашому традиційному стеку шрифтів
- Не буде: Відображення шрифту, який встановлено та названо за допомогою локального () розташування
Оскільки Chrome чекає, поки не зникне ЧЕТВЕРТИ ризик, перед тим, як відтворити, це затримує. До якої міра ефект видно (особливо при завантаженні з кешу), здається, залежить, серед іншого, від кількості тексту, який потрібно відтворити, і, можливо, від інших факторів, але кешування не повністю видаляє ефект.
Ірландський також має деякі оновлення щодо поведінки браузера станом на 2011–04–14 внизу публікації:
- Firefox (станом на FFb11 та FF4 Фінал) більше не має FOUT! Ву-у-у! http://bugzil.la/499292 В основному текст невидимий протягом 3 секунд, а потім повертає резервний шрифт. Веб-шрифт, ймовірно, завантажиться протягом цих трьох секунд, хоча ... сподіваюся ..
- IE9 підтримує WOFF і TTF та OTF (хоча це потрібно вбудований біт встановити річ - переважно спірне, якщо ви використовуєте WOFF). ОДНО !!! IE9 має FOUT. :(
- Webkit має латка, яка чекає на посадку щоб показати запасний текст через 0,5 секунди. Така ж поведінка, як і FF, але 0,5 с замість 3 с.
Якби це було питання, призначене для дизайнерів, можна було б уникнути способів уникнути таких проблем, таких як
завантажувач веб-файлів, але це було б іншим питанням. Посилання Paul Irish детальніше описує це питання.
Є що додати до пояснення? Звук у коментарях. Хочете прочитати більше відповідей від інших досвідчених користувачів Stack Exchange? Ознайомтесь із повним обговоренням тут .
