Preconnect vs dns-prefetch

https://www.w3.org/TR/resource-hints/

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

preconnect просто делает "больше".

Помимо лучшей поддержки браузера, есть ли причина использовать dns-prefetch over preconnect? Я также видел веб-сайты, использующие оба rel в том же теге ссылки, чтобы использовать preconnect, если это возможно, и возвращаться к dns-prefetch, если нет.

<head>
  <link
    rel="dns-prefetch preconnect"
    href="#" onclick="location.href='https://fonts.gstatic.com'; return false;"
    crossorigin
  >
</head>

Ответ 1

В последнее время я немного исследовал эту тему, и пока мои (теоретические) выводы заключаются в следующем:

Разница в поддержке браузеров незначительна по состоянию на середину 2018 года при подсчете реального глобального использования браузеров (~ 73% против ~ 74%)

dns-prefetch= DNS и preconnect= DNS + TCP + TLS. Обратите внимание, что поиск DNS довольно дешевый (простой запрос-ответ к DNS-серверу, который кэшируется в браузере в течение короткого промежутка времени), тогда как TCP и TLS требуют некоторых ресурсов сервера.

Следовательно, практическое различие заключается в том, что если вы знаете, что выборка сервера произойдет наверняка, preconnect хорошо. Если это произойдет только иногда, и вы ожидаете большой трафик, preconnect может вызвать много бесполезной работы TCP и TLS, и лучше подойдет dns-prefetch.

Например:

если страница запрашивает https://backend.example.com/giveMeFreshData при каждой загрузке, а ответ не кэшируется, preconnect подключение хорошо подходит
если страница запрашивает только статический ресурс, такой как https://statics-server.example.com/some-image.jpg или https://statics-server.example.com/some-css.css, и ресурс очень скорее всего, из кеша браузера пользователя (один и тот же ресурс используется на многих страницах, и ваш пользователь будет запускать много загрузок страниц, как это, с теплым кешем - и никакие другие ресурсы не извлекаются из этого источника) затем preconnect может создать множество ненужных TCP-соединений на вашем сервере (которые будут прерваны через несколько секунд, но все же они не были необходимы в первую очередь) и TLS-рукопожатия (однако в этом случае preload может быть опцией если вы знаете точный URL и ресурс очень важен).
Тем не менее, если трафик на вашем сайте небольшой, это различие не должно сильно влиять на него, поэтому preconnect, вероятно, хорошо подойдет для сайтов с низким трафиком, независимо от того, что было упомянуто ранее.

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

Ответ 2

1 предварительное соединение

Последний совет о ресурсах, о котором мы хотим поговорить, - это предварительное соединение. Предварительное подключение позволяет браузеру установить ранние подключения до того, как HTTP-запрос будет фактически отправлен на сервер. Это включает DNS-запросы, TLS-согласования, TCP-подтверждения. Это, в свою очередь, устраняет задержку в обоих направлениях и экономит время пользователей.

2 Предварительная выборка

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

2.1 Предварительная загрузка ссылок

Предварительная выборка ссылок позволяет браузеру извлекать ресурсы, сохранять их в кеше, предполагая, что пользователь их запросит. Браузер ищет предварительную выборку в HTML или заголовке HTTP Link.

2.2 Предварительная выборка DNS

Предварительная выборка DNS позволяет браузеру выполнять поиск DNS на странице в фоновом режиме, пока пользователь просматривает. Это минимизирует задержку, так как поиск DNS уже произошел, когда пользователь нажимает на ссылку. Предварительную выборку DNS можно добавить к определенному URL, добавив тег rel= "dns-prefetch" к атрибуту ссылки. Мы рекомендуем использовать это для таких вещей, как шрифты Google, Google Analytics и ваш CDN.

2.3 Предварительный рендеринг

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

Более подробная информация: https://www.keycdn.com/blog/resource-hints/

Заключение

Основная разница между dns-prefetch и preconnect

Разница между dns-prefetch и preconnect заключается в том, что dns-prefetch будет выполнять только поиск DNS, тогда как preconnect будет выполнять поиск DNS, согласование TLS и квитирование TCP. Это означает, что он избегает дополнительных 2 RTT, когда ресурс готов к загрузке.

Важным аспектом является то, что поддержка dns-prefetch намного больше, чем поддержка preconnect.

Вы можете найти несколько конкретных примеров здесь: https://responsivedesign.is/articles/prefetch-preconnect-dns-priority/