files/ru/web/performance/dns-prefetch/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

---
title: Использование dns-prefetch
slug: Web/Performance/dns-prefetch
tags:
  - Web Performance
  - dns-prefetch
  - preconnect
translation_of: Web/Performance/dns-prefetch
---
<p><span class="seoSummary"><code><strong>DNS-prefetch</strong></code> (предзагрузка DNS) - это попытка определить IP адрес по имени домена до того, как ресурс с этого домена будет фактически запрошен. Это может быть загрузчик файлов, который используется позже или ссылка, по которой, вероятно, перейдёт пользователь. </span></p>

<h2 id="Зачем_использовать_dns-prefetch">Зачем использовать dns-prefetch?</h2>

<p>Бывают случаи, когда в вашем приложении используются ссылки на домены, отличные от основного домена приложения. Например, внутри вашего приложения на "a.com" есть ссылка на домен "b.org". Для того, чтобы пройти по этой ссылке, пользовательский клиент должен сначала выяснить, какой адрес в интернете соответствует доменному имени "b.org". Этот процесс называется <code>DNS resolution.</code> И хотя механизмы кеширования DNS помогают сократить время запросов, DNS Resolution заметно влияет на время ожидания запроса из-за того, что первый клиентский запрос уходит сначала на DNS сервера и дожидается ответа от них. Для приложений, которые открывают соединения ко многим сторонним доменам, влияние DNS Resolution может сильно уменьшить производительность загрузки.</p>

<p><code>dns-prefetch</code> помогает разработчикам замаскировать ожидание DNS resolution. <a href="/en-US/docs/Web/HTML/Element/link">HTML <code>&lt;link&gt;</code> элемент</a> предлагает подобную функциональность с помощью атрибута <a href="/en-US/docs/Web/HTML/Attributes/rel"><code>rel</code></a>, значение которого может содержать <code>dns-prefetch</code>. В этом случае, предзагрузка DNS произойдёт для домена, указанного в атрибуте <a href="/en-US/docs/Web/HTML/Attributes">href</a>:</p>

<h2 id="Синтаксис">Синтаксис</h2>

<pre class="brush: html notranslate">&lt;link rel="dns-prefetch" href="https://fonts.gstatic.com/" &gt;
</pre>

<h2 id="Примеры">Примеры</h2>

<pre class="brush: html notranslate">&lt;html&gt;
  &lt;head&gt;
    &lt;link rel="dns-prefetch" href="https://fonts.gstatic.com/"&gt;
    &lt;!-- and all other head elements --&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;!-- your page content --&gt;
  &lt;/body&gt;
&lt;/html&gt;</pre>

<p>Вы должны помещать <code>dns-prefetch</code> подсказки в элемент <a href="/en-US/docs/Web/HTML/Element/head"><code>&lt;head&gt;</code></a> для каждого уникального стороннего домена, с которого могут быть запрошены ресурсы, но нужно держать некоторые детали в голове.</p>

<h2 id="Лучшие_практики">Лучшие практики</h2>

<p id="Three_things_to_keep_in_mind">Необходимо учитывать 3 вещи:</p>

<p><strong>Во-первых,</strong> <code>dns-prefetch</code> эффективен только для выполнения DNS запросов на сторонние <a href="/en-US/docs/Web/HTTP/CORS">cross-origin</a> домены, поэтому следует избегать этой инструкции при попытке загрузить ресурсы с текущего домена. Связано это с тем, что IP вашего домена уже был определён к тому времени, когда браузер увидел эту инструкцию.</p>

<p><strong>Во-вторых,</strong> существует возможность добавить <code>dns-prefetch</code> (и другие подсказки) как <a href="/en-US/docs/Web/HTTP/Headers">HTTP заголовок</a> с помощью <a href="/en-US/docs/Web/HTTP/Headers/Link">HTTP Link field</a>:</p>

<pre class="brush: unix notranslate">Link: &lt;https://fonts.gstatic.com/&gt;; rel=dns-prefetch</pre>

<p><strong>В третьих, </strong> хорошей практикой считается использование <code>dns-prefetch</code> в паре с  <code>preconnect</code>. В то время, как <code>dns-prefetch</code> срабатывает только при DNS поиске, <code>preconnect</code> устанавливает соединение к нужному серверу. Этот процесс включает в себя DNS resolution, установку TCP соединения и установление безопасного соединения (<a href="/en-US/docs/Glossary/TLS">TLS</a> рукопожатие), если оно доступно. Комбинирование этих двух инструкций даёт возможность ещё больше сократить время ожидания для кросс-доменных запросов. Вы можете использовать их вместе таким образом:</p>

<pre class="brush: html notranslate">&lt;link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin&gt;
&lt;link rel="dns-prefetch" href="https://fonts.gstatic.com/"&gt;
</pre>

<div class="blockIndicator note">
<p><strong>Примечание: </strong> если приложению необходимо установить соединение со множеством доменов, использование preconnect контрпродуктивно. <code>preconnect</code> лучше использовать для наиболее критических соединений. Для менее важных достаточно использовать <code>&lt;link rel="dns-prefetch"&gt;</code> для сокращения времени DNS запроса.</p>
</div>

<p>В совместном использовании этих двух техник есть логика. Она заключается в том, что dns-prefetch поддерживается большим количеством браузеров, чем preconnect. Клиенты, которые ещё не поддерживают preconnect, все ещё будут получать бонусы от работы dns-prefetch. Так как эти инструкции относятся к HTML, они очень толерантны к ошибкам. Если какой-то устаревший браузер встречает dns-prefetch, ваш сайт не сломается. Вы просто не получите улучшений от этой инструкции.</p>

<p>Некоторые ресурсы, например, шрифты, загружаются в анонимном режиме. В подобных случаях вы должны указывать <a href="/en-US/docs/Web/HTML/CORS_settings_attributes">crossorigin</a> атрибут с инструкцией preconnect. Если вы пропустите её, то браузер выполнит только DNS запрос.</p>

<h2 id="See_also">See also</h2>

<ul>
 <li><a href="/en-US/docs/Web/HTML/Element/link">&lt;link&gt;</a></li>
 <li><a href="/en-US/docs/Web/HTML/Attributes/rel">HTML атрибут: rel</a></li>
 <li><a href="/en-US/docs/Web/HTML/CORS_settings_attributes">crossorigin</a></li>
 <li><a href="/en-US/docs/Web/HTTP/CORS">Cross-Origin Resource Sharing (CORS)</a></li>
 <li><a href="/en-US/docs/Web/HTTP/Headers">HTTP заголовки</a></li>
 <li><a href="/en-US/docs/Web/HTTP/Headers/Link">HTTP заголовок </a><a href="/en-US/docs/Web/HTTP/Headers/Link" title="The HTTP Link entity-header field provides a means for serialising one or more links in HTTP headers. It is semantically equivalent to the HTML &lt;link> element.">Link</a></li>
</ul>