1. Главная страница » Компьютеры » Not enabled preloading что значит

Not enabled preloading что значит

Автор: | 16.12.2019

Рассмотрим ресурсные подсказки и директивы (Resource Hints). Эти инструменты ускоряют веб-сайты и веб-приложения. Разберем различия между подсказками preload, prefetch и preconnect. Это поможет успешно их использовать. Вот некоторые их преимущества:

1) оптимизируют доставку ресурсов;
2) сокращают количество сетевых задержек;
3) доставляют контент быстрее,— в то время, пока пользователь смотрит страницу.

1. Директива preload

Директива preload — это новый веб-стандарт, который хорошо управляет выбором конкретных ресурсов для текущей навигации. Preload — обновленная версия подресурса prefetch, раскритикованного в январе 2016. Эта директива может быть определена в элементе

  • , например,
  • . Как правило, лучше предварительно загружать самые важные ресурсы, такие как изображения, CSS, JavaScript и файлы шрифтов.
  • Не путайте директиву preload с предварительной загрузкой браузером только тех ресурсов, которые объявлены в HTML. Директива preload преодолевает это ограничение. Preload позволяет предварительно загрузить ресурсы, инициированные CSS и JavaScript, а также описать, когда нужно использовать каждый ресурс.

    Чем же preload отличается от prefetch? Preload работает с текущей навигацией и ресурсами с высоким приоритетом. Prefetch — ресурсы с низким приоритетом для следующей навигации. Отметим, что preload не блокирует window-событие onload.

    На рисунке 1 показан пример использования директивы preload для загрузки ресурсов JavaScript.

    Рис. 1. Пример использования директивы Preload для загрузки ресурсов JavaScript

    1.1. Преимущество директивы preload

    Вот некоторые преимущества директивы preload:

    • Позволяет браузеру устанавливать приоритет ресурса, что, в свою очередь, позволяет веб-разработчикам оптимизировать доставку ресурсов.
    • Позволяет браузеру выяснить тип ресурса, что, в свою очередь, позволяет узнать, можно ли тот же самый ресурс снова использовать в дальнейшем.
    • Позволяет браузеру выяснить, совместим ли запрос с политикой безопасности контента в соответствии с атрибутом as.
    • Позволяет браузеру послать подходящие заголовки accept, основанных на типе ресурсов (такие как image/webp).

    1.2. Примеры

    Вот очень простой пример предварительной загрузки изображения.

    Ниже пример предварительной загрузки шрифтов.

    Замечание. При предварительной загрузке связей с разрешенными CORS-ресурсами необходим атрибут crossorigin.

    Наконец, пример предварительной загрузки таблицы стилей, используя HTML разметку и JavaScript.

    1.3. Браузерная поддержка preload

    Поддержка директивы preload была добавлена к браузеру Chrome 50 в апреле 2016, а также поддерживается браузером Opera 37 и выше. Поддержка директивы preload пока еще не реализована для браузера Mozilla Firefox, а ее появление в браузере Microsoft Edge вероятно (на 9 января 2017).

    На рисунке 2 показаны последние версии наиболее распространенных браузеров с указанием поддержки директивы preload (на 9 января 2017). Последнее состояние см. на этой странице

    Рис. 2. Последние версии наиболее распространенных браузеров с указанием поддержки директивы preload. Зеленый цвет означает поддержку, красный — ее отсутствие, серый цвет означает вероятное появление (на 9 января 2017)

    2. Prefetch

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

    1) ссылочный;
    2) DNS;
    3) prerendering.

    На рисунке 3 показаны четыре шага выполнения ссылочного prefetch.

    Шаг 1 (Step 1). Загрузка сайта example.com (Load https://example.com). На изображении экрана надпись: ожидание загрузки example.com (Waiting for https://example.com).

    Шаг 2 (Step 2). Браузер находит prefetch-ссылки (Browser finds prefetch links).

    Шаг 3 (Step 3). Браузер выбирает затребованный контент, чтобы показать на экране prefetch-страницы. Одновременно с этим контент сохраняется в кэше, пока пользователь щелкает по ссылке. Внизу изображен кэш браузера.

    Рис. 3. Четыре шага выполнения ссылочного prefetch

    2.1. Ссылочный prefetch

    Как сказано выше, ссылочный prefetch позволяет браузеру выбрать ресурсы и сохранить их в кэше, предполагая, что потом пользователь их запросит. Браузер ищет prefetch в HTML в теге
    или в его заголовке Link:

    • HTML:
    • HTTP Header: Link: ; rel=prefetch

    Замечание. «Эта техника ускорит многие интерактивные сайты, но не будет работать всегда и везде по следующим причинам:

    1. Для некоторых сайтов трудно угадать, что пользователь собирается делать.
    2. Для других сайтов сохраненные в кэше данные устаревают, если пользователь быстро выбирает новые.
    3. Опасно постоянно сохранять файлы в кэше — просмотр текущей страницы замедлится».

    Ссылочный prefetch поддержан большинством современных браузеров, за исключением Safari, Safari iOS и Opera Mini. Chrome и Firefox, кроме того, покажут prefetch-ресурсы на сетевой панели (на 9 января 2017).

    На рисунке 4 показаны последние версии наиболее распространенных браузеров с указанием поддержки директивы ссылочного prefetch (на 9 января 2017). Последнее состояние см. на этой странице

    Рис. 4. Последние версии наиболее распространенных браузеров с указанием поддержки директивы prefetch. Зеленый цвет означает поддержку, красный — ее отсутствие (на 9 января 2017)

    2.2. DNS prefetch

    DNS prefetch позволяет браузеру выполнять поиск DNS на странице в фоновом режиме, в то время как пользователь просматривает сайт. Это минимизирует время ожидания, поскольку поиск DNS уже состоялся, когда пользователь щелкнет по ссылке.

    DNS prefetch входит в URL как атрибут тега link: rel=»prefetch». Используется для шрифтов Google, Google Analytics и CDN.

    «DNS-запросы быстры в смысле пропускной способности, но время ожидания может быть велико, особенно в мобильных сетях. Теоретически DNS prefetch может значительно уменьшить время ожидания в определенные моменты, например, когда пользователь щелкает по ссылке. Иногда время ожидания можно уменьшить на целую секунду.»

    Mozilla Developer Network.

    Это также используется при распределении ресурсов. Вот пример:

    Отметим, что Google Chrome поступает аналогично, когда в адресной строке набирается текст, используя DNS presolve и TCP preconnect. Что довольно круто! На chrome://dns/ виден список используемых prefetch-сайтов, пример которого показан на рисунке 5.

    Рис. 5. DNS prefetch 10 хостов для будущих загрузок. Первый столбец Имя хоста, второй — Как давно (чч:мм:сс), третий — Источник

    Читайте также:  Apple определение по серийному номеру

    Также можно использовать Pagespeed-фильтр insert_dns_prefetch, который помещает теги
    в заголовок страницы автоматически для всех доменов или специализированные сервисы, такие как Айри.рф.

    По поводу Pagespeed-фильтра см. краткую статью «Пакет программ Page Speed от Google» на Хабрахабре

    DNS prefetch также поддержан большинством современных браузеров, за исключением Opera Mini (на 9 января 2017).

    На рисунке 6 показаны последние версии наиболее распространенных браузеров с указанием поддержки директивы DNS prefetch (на 9 января 2017). Последнее состояние см. на этой странице

    Рис. 6. Последние версии наиболее распространенных браузеров с указанием поддержки директивы DNS prefetch. Зеленый цвет означает поддержку, красный — ее отсутствие, серый цвет означает вероятное появление, салатовый — промежуточный вариант (на 9 января 2017)

    2.3. Prerender

    Prerender очень похож на prefetch тем, что тоже собирает ресурсы, на которые может попасть пользователь. Различие в том, что prerender принимает в фоновом режиме всю страницу, все содержание документа. Вот пример.

    «Подсказка prerender используется приложением для указания следующей вероятной цели HTML-навигации. При этом пользовательский агент выберет и обработает указанный ресурс как HTML-ответ. А вот для того, чтобы выбрать другой тип контента, или же когда предварительная обработка HTML нежелательна, приложение использует другую подсказку — prefetch.»

    Например, prerender — это инструмент браузера Chrome, улучшающий время загрузки страниц сайта. На рисунке 7 схематически показано, как prerender запускается тегами
    на указанных страницах. Скрытая страница создана для prerender URL, который будет полностью загружать все связанные ресурсы и выполнять JavaScript. Если пользователь откроет эту страницу, скрытая страница будет обменена на текущую и сделана видимой.

    1. Запуск тега
    .
    2. Заблаговременное создание невидимых страниц.
    3. Загрузка пользователем другой страницы, включающей выполнение JavaScript.
    4. После выбора пользователем новой страницы обмен текущей страницы на скрытую.
    5. Удаление скрытых страниц через небольшой промежуток.

    Рис. 7. Схематически показано, как prerender запускается тегом

    Нужна осторожность с prerender, это — тяжелый ресурс, и его использование может вызвать падение пропускной способности, особенно на мобильных устройствах.

    Отметим, что нельзя проверить наличие prerender с помощью Chrome DevTools. Наличие prerender на странице сайта можно посмотреть по адресу chrome://net-internals/#prerender. Кроме того, на prerender-test.appspot.com можно проверить на наличие prerender любую страницу сайта, указав ее адрес.

    На рисунке 8 показан пример проверки наличия prerender с помощью chrome://net-internals/#prerender

    Рис. 8. Пример проверки наличия prerender с помощью chrome://net-internals/#prerender

    Prerender поддерживается некоторыми браузерами за исключением Mozilla Firefox, Safari, iOS Safari, Opera Mini и браузера Android (на 9 января 2017).

    На рисунке 9 показаны последние версии наиболее распространенных браузеров с указанием поддержки директивы prerender (на 9 января 2017). Последнее состояние см. на этой странице

    Рис. 9. Последние версии наиболее распространенных браузеров с указанием поддержки директивы prerender. Зеленый цвет означает поддержку, красный — ее отсутствие (на 9 января 2017)

    Prefetch имеет некоторые недостатки, например, проблемы с секретностью.

    • Веб-статистика регистрации prefetch может несанкционированно расти, хотя Google и заявляет, что лишнее использование тега подавляется. Пример такой веб-аналитики, когда теги, возможно, и подавляются, но при этом регистрируются две сессии prefetch за один щелчок, находится на английском блоге по этому адресу
    • Пользователи в принципе могут подвергнуться угрозам безопасности, загрузив больше страниц с незапрошенных сайтов (дополнительно включенных в запросы, поскольку загрузка стала более продвинутой и разнообразной).
    • Пользователи могут неосознанно нарушить политику секретности своей сети или сети организации, если prefetch становится доступен несанкционированный в сетях контент.

    3. Preconnect

    Наконец, рассмотрим preconnect. Preconnect позволяет браузеру установить соединение прежде, чем HTTP-запрос будет отправлен на сервер. Эта процедура включает поиски DNS, «переговоры» TLS и «рукопожатие» TCP. Что в свою очередь устраняет круговые задержки и экономит время пользователя.

    «Preconnect — важный инструмент оптимизации… он устраняет дорогостоящие круговые задержки из пути запроса. Иногда время ожидания запроса сокращается на сотни и даже тысячи миллисекунд».

    Илья Григорик (англ. Ilya Grigorik).

    На рисунке 10 сравнивается время загрузки DNS/TCP/TLS с использованием preconnect и без него. В верхней части рисунка приведено время загрузки без использования preconnect, равное 2,6 с. Внизу — с использованием preconnect, время загрузки равно 2,1 с.

    Рис. 10. Сравнение времени загрузки DNS/TCP/TLS с использованием preconnect и без него

    Preconnect добавляется непосредственно к тегу link как атрибут HTML. А также в заголовок Link HTTP, и еще пользователем с помощью JavaScript. Вот пример возможного использования preconnect для URL CDN.

    На рисунке 11 приведен пример использования preconnect со шрифтами Google. Добавление подсказки preconnect для сайта fonts.gstatic.com начинается с запроса шрифта параллельно с CSS-запросом. Что позволяет немедленно послать запрос шрифта.

    В этом конкретном сценарии preconnect удаляет три круговые задержки из критического пути и сокращает времени ожидания больше чем на полсекунды.

    Рис. 11. Пример использования preconnect со шрифтами Google

    Эффективное и продуманное использование preconnect не только поможет оптимизировать веб-сайт, но также защитит от недостаточного использования ресурсов. Preconnect поддерживается некоторыми современными браузерами за исключением Internet Explorer, Safari, iOS Safari и Opera Mini (на 9 января 2017).

    На рисунке 12 показаны последние версии наиболее распространенных браузеров с указанием поддержки директивы preconnect (на 9 января 2017). Последнее состояние см. на этой странице

    Рис. 12. Последние версии наиболее распространенных браузеров с указанием поддержки директивы preconnect. Зеленый цвет означает поддержку, красный — ее отсутствие, серый цвет означает вероятное появление (на 9 января 2017)

    Итоги

    Возможно, теперь понимание того, что есть preload, prefetch и preconnect, стало немного лучше. А также стратегии их использования для ускорения доставки контента. Будет приятно, если использование директивы preload возрастет в ближайшие месяцы, а веб-разработчики примут ее на вооружение.

    Предположим у меня вот такая страница

    Стоит ли мне в шапку добавлять

    Есть ли смысл вставлять
    ведь сам тег скрипта идёт не намного позже?

    Есть ли смысл вставлять
    ведь скрипты потому и в подвале сайта, чтобы отложить их загрузку?

    • Вопрос задан 01 апр.
    • 1322 просмотра

    ведь скрипты потому и в подвале сайта, чтобы отложить их загрузку?

    rel="preload" имеет смысл использовать только для файлов (css, js, fonts, video, img), которые загружаются не из html-кода, а позже из других css/js-файлов или по ajax/socket. Чтобы браузер не ждал, когда обнаружится потребность в этом файле, а заранее загрузил его.
    Для обычных style.css/main.js используйте обычную загрузку.

    ведь скрипты потому и в подвале сайта, чтобы отложить их загрузку?

    Есть много способов повышения веб-производительности. Один из них — предзагрузка контента, который понадобится позже. Префетчинг CSS, предварительный рендеринг полной страницы или резолвинг доменного имени. Делаем всё заранее, а потом мгновенно отображаем результат! Звучит круто.

    Читайте также:  Alcatel one touch idol 6030x

    Ещё круче, что это очень просто реализовано. Пять тегов
    дают браузеру команду на предварительные действия:

    Вкратце расскажем, что они делают и когда их использовать.

    говорит браузеру как можно скорее загрузить и кэшировать ресурс (например, скрипт или таблицу стилей). Это полезно, когда ресурс понадобится через несколько секунд после загрузки страницы — и вы хотите ускорить процесс.

    Браузер ничего не делает с ресурсом после загрузки. Скрипты не выполняются, таблицы стилей не применяются. Ресурс просто кэшируется и немедленно предоставляется по запросу.

    Синтаксис

    href указывает на ресурс, который вы хотите скачать.

    as может быть чем угодно, что можно скачать в браузере:

    • style для таблиц стилей,
    • script для скриптов,
    • font для шрифтов,
    • fetch для ресурсов, загруженных с помощью fetch() или XMLHttpRequest ,
    • полный список см. на MDN.

    Важно указать атрибут as – это помогает браузеру правильно расставлять приоритеты и планировать загрузку.

    Когда использовать

    Используйте предзагрузку, когда ресурс понадобится в самое ближайшее время. Например:

      Нестандартные шрифты из внешнего файла:

    По умолчанию comic-sans.woff2 начнёт загружаться только после загрузки и разбора index.css . Чтобы не ждать так долго, можно загрузить шрифт раньше с помощью
    :

    Если вы разделяете свои стили согласно подходу Critical CSS на две части, критическую (для немедленного рендеринга) и некритическую:

    При таком подходе некритические стили начнут загружаться только при запуске JavaScript, что может произойти через несколько секунд после рендеринга. Вместо ожидания JS используйте
    , чтобы начать загрузку раньше:

    Не злоупотребляйте предзагрузкой. Если загружать всё подряд, сайт не ускорится волшебным образом, скорее наоборот, это помешает браузеру грамотно планировать работу.

    Не путайте с префетчингом. Не используйте

  • , если вам не нужен ресурс сразу после загрузки страницы. Если он понадобится позже, например, для следующей страницы, то используйте
  • .
  • Подробности

    Это обязательный тег для исполнения браузером (если он его поддерживает), в отличие от всех других тегов

  • , связанных с предварительной загрузкой. Браузер обязан загрузить ресурс, указанный в
  • . В других случаях он может проигнорировать предварительную загрузку, например, если работает на медленном соединении.
  • Приоритеты. Разным ресурсам (стили, скрипты, шрифты и т. д.), браузеры обычно назначают разные приоритеты, чтобы в первую очередь загружать самые важные ресурсы. В данном случае браузер определяет приоритет по атрибуту as . Для браузера Chrome можете посмотреть полную таблицу приоритетов.

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

    Здесь тоже браузер ничего не делает с ресурсом после загрузки. Скрипты не выполняются, таблицы стилей не применяются. Ресурс просто кэшируется и немедленно предоставляется по запросу.

    Синтаксис

    href указывает на ресурс, который вы хотите скачать.

    as может быть чем угодно, что можно скачать в браузере:

    • style для таблиц стилей,
    • script для скриптов,
    • font для шрифтов,
    • fetch для ресурсов, загруженных с помощью fetch() или XMLHttpRequest ,
    • полный список см. на MDN.

    Важно указать атрибут as — это помогает браузеру правильно расставлять приоритеты и планировать загрузку.

    Когда использовать

    Для загрузки ресурсов с других страниц, если нужен ресурс с другой страницы, и вы хотите предварительно загрузить его, чтобы потом ускорить рендеринг этой страницы. Например:

    • У вас интернет-магазин, и 40% пользователей уходят с главной страницы на страницу товара. Используйте
    • , загружая файлы CSS и JS для рендеринга страниц с продуктом.
    • У вас одностраничное приложение, а разные страницы загружают разные пакеты. Когда пользователь посещает какую-то страницу, можно предварительно загрузить пакеты для всех страниц, на которые она ссылается.

    Вероятно, этот тег можно безопасно использовать в любом объёме. Браузеры обычно планируют prefetch с наименьшим приоритетом, так что он никому не мешает. Только имейте в виду, что расходуется трафик пользователя, который может стоить денег.

    Не для срочных запросов. Не используйте

  • , когда ресурс понадобится через несколько секунд. В этом случае применяйте
  • .
  • Подробности

    Необязательный тег. Браузер не обязан следовать этой инструкции, он может проигнорировать её, например, на медленном соединении.

    Приоритет в Chrome. В Chrome
    обычно выполняется с минимальным приоритетом (см. полную таблицу приоритетов), то есть после загрузки всего остального.

    просит браузер заранее подключиться к домену, когда вы хотите ускорить установку соединения в будущем.

    Браузер должен установить соединение, если извлекает какие-то ресурсы с нового стороннего домена. Например, если загружает шрифты Google Fonts, React из CDN или запрашивает ответ JSON с сервера API.

    Установка нового соединения обычно занимает несколько сотен миллисекунд. Она производится один раз, но всё равно отнимает время. Если вы заранее установили соединение, то сэкономите время и быстрее загрузите ресурсы с этого домена.

    Синтаксис

    href указывает на доменное имя, для которого нужно определить IP-адрес. Можно указывать с префиксом ( https://domain.com ) или без него ( //domain.com ).

    Когда использовать

    Используйте для доменов, которые скоро понадобятся для загрузки оттуда важного стиля, скрипта или изображения, но вы пока не знаете URL ресурса. Например:

    • Ваше приложение размещается на my-app.com и делает AJAX-запросы к api.my-app.com : вы не знаете заранее конкретные запросы, потому что они делатся динамически из JS. Здесь вполне уместно использование тега для предварительного подключения к домену.
    • Ваше приложение размещается на my-app.com и использует шрифты Google Fonts. Они загружаются в два этапа: сначала загружается файл CSS с домена fonts.googleapis.com , затем этот файл запрашивает шрифты с fonts.gstatic.com . Вы не можете знать, какие конкретные файлы шрифтов из fonts.gstatic.com вам понадобятся, пока не загрузите файл CSS, поэтому заранее мы можем только установить предварительное соединение.

    Используйте этот тег, чтобы немного ускорить какой-то сторонний скрипт или стиль за счёт предварительной установки соединения.

    Читайте также:  Excel посчитать количество строк по условию

    Не злоупотребляйте. Установка и поддержание соединения — дорогостоящая операция как для клиента, так и для сервера. Используйте этот тег максимум для 4-6 доменов.

    Подробности

    Необязательный тег. Браузер не обязан следовать этой инструкции и может проигнорировать её, например, если уже установлено много соединений или в каком-то другом случае.

    Что включает в себя процесс подключения. Для подключения к каждому сайту браузер должен выполнить следующие действия:

    • Резолвинг DNS. Найти IP-адрес сервера ( 216.58.215.78 ) для указанного доменного имени ( google.com ).
    • Рукопожатие TCP. Обмен пакетами (клиент → сервер → клиент), чтобы инициировать TCP-соединение с сервером.
    • Рукопожатие TLS (только для сайтов HTTPS). Два раунда обмена пакетами (клиент → сервер → клиент → сервер → клиент), чтобы инициировать безопасный сеанс TLS.

    Примечание: HTTP/3 улучшит и ускорит механизм рукопожатия, но он ещё далеко.

    просит браузер заранее выполнить резолвинг DNS для домена, если вы скоро будете подключаться к нему и хотите ускорить начальное соединение.

    Браузер должен определить IP-адрес домена, если будет извлекать какие-то ресурсы с нового стороннего домена. Например, загружать шрифты Google Fonts, React из CDN или запрашивать ответ JSON с сервера API.

    Для каждого нового домена разрешение записи DNS обычно занимает около 20−120 мс. Это влияет только на загрузку первого ресурса с данного домена, но всё равно представляет задержку. Если осуществить разрешение DNS заранее, то мы сэкономим время и загрузим ресурс быстрее.

    Синтаксис

    href указывает на доменное имя, для которого нужно установить IP-адрес. Можно указывать с префиксом ( https://domain.com ) или без него ( //domain.com ).

    Когда использовать

    Используйте для доменов, которые скоро понадобятся для загрузки оттуда ресурсов, о которых браузер не знает заранее. Например:

    • Ваше приложение размещается на my-app.com и делает AJAX-запросы к api.my-app.com : вы не знаете заранее конкретные запросы, потому что они делатся динамически из JS. Здесь вполне уместно использование тега для предварительного подключения к домену.
    • Ваше приложение размещается на my-app.com , и использует шрифты Google Fonts. Они загружаются в два этапа: сначала загружается файл CSS с домена fonts.googleapis.com , затем этот файл запрашивает шрифты с fonts.gstatic.com . Вы не можете знать, какие конкретные файлы шрифтов из fonts.gstatic.com вам понадобится, пока не загрузите файл CSS, поэтому заранее мы можем только установить предварительное соединение.

    Используйте этот тег, чтобы немного ускорить какой-то сторонний скрипт или стиль за счёт предварительной установки соединения.

    Обратите внимание схожие характеристики на

  • и
  • . Использовать их вместе для одного домена обычно не имеет смысла:
  • уже включает в себя
  • и многое другое. Это можно оправдать в двух случаях:
    • Вы хотите поддерживать старые браузеры.
    • поддерживается начиная с IE10 и Safari 5.
    • некоторое время поддерживался в Chrome и Firefox, но был добавлен в Safari только в 11.1 и по-прежнему не поддерживается в IE/Edge. Если нужно поддерживать эти браузеры, используйте
    • в качестве запасного варианта для
    • .
    • Вы хотите ускорить подключение более чем к 4−6 доменам. Тег
    • не рекомендуется использовать более чем с 4−6 доменами, так как установка и поддержание соединения — дорогостоящая операция.
    • потребляет меньше ресурсов, поэтому в случае необходимости используйте его.

    Подробности

    Необязательный тег. Браузер не обязан следовать этой инструкции, поэтому может не выполнять резолвинг DNS, например, если на странице много таких тегов или в каком-то другом случае.

    Что такое DNS. Каждому серверу в интернете соответствует уникальный IP-адрес, который выглядит как 216.58.215.78 . В адресной строке браузера обычно вводится название сайта (например, google.com ), а серверы DNS (Domain Name System) сопоставляют его с IP-адресом сервера ( 216.58.215.78 ).

    Чтобы определить IP-адрес, браузер должен выполнить запрос к DNS-серверу. Он занимает 20−120 мс при подключении к новому стороннему домену.

    DNS кэшируется, хотя и не очень надёжно. Некоторые ОС и браузеры кэшируют DNS-запросы: это сэкономит время при повторных запросах, но на кэширование нельзя полагаться. В Linux оно обычно вообще не работает. У Chrome есть кэш DNS, но он живёт только минуту. Windows кэширует DNS-ответы в течение пяти дней.

    просит браузер загрузить URL-адрес и отобразить его на невидимой вкладке. Когда пользователь нажимает на ссылку, страница должна отобразиться немедленно. Это полезно, если вы уверены, что пользователь посетит определённую страницу, и хотите ускорить её отображение.

    Несмотря на исключительную эффективность этого тега (или из-за неё), в 2019 году
    плохо поддерживается основными браузерах. Подробнее см. ниже.

    Синтаксис

    href указывает на URL, для который вы хотите запустить рендеринг в фоновом режиме.

    Когда использовать

    Когда вы действительно уверены, что пользователь перейдёт на определённую страницу. Если у вас «туннель», по которому 70% посетителей страницы A переходят на страницу Б, то
    на странице А поможет очень быстро отобразить страницу Б.

    Не злоупотребляйте. Предварительный рендеринг чрезвычайно дорого обходится с точки зрения трафика и памяти. Не используйте
    более чем для одной страницы.

    Подробности

    Необязательный тег. Браузер не обязан следовать этой инструкции и может проигнорировать её, например, на медленном соединении или при недостаточном объёме свободной памяти.

    Ради экономии памяти Chrome не выполняет полный рендеринг, а только предзагрузку NoState. Это означает, что Chrome загружает страницу и все её ресурсы, но не делает рендеринг и не выполняет JavaScript.

    Firefox и Safari вообще не поддерживают этот тег. Это не нарушает спецификацию, так как браузеры не обязаны выполнять данную инструкцию; но всё равно печально. Баг реализации в Firefox был открыт в течение семи лет. Есть сообщения, что Safari тоже не поддерживает этот тег.

    • — когда вам понадобится ресурс через несколько секунд
    • — когда понадобится ресурс на следующей странице
    • — когда вы знаете, что вам скоро понадобится ресурс, но вы ещё не знаете его полный URL
    • — аналогично, когда вы знаете, что вам скоро понадобится ресурс, но вы ещё не знаете его полный URL (для старых браузеров)
    • — когда вы уверены, что пользователи перейдут на определённую страницу, и хотите ускорить её отображение

    Добавить комментарий

    Ваш e-mail не будет опубликован. Обязательные поля помечены *