Was ist DNS-Prefetch? Frontend-Optimierung: DNS-Vorauflösung verbessert die Seitengeschwindigkeit

Hintergrund

Obwohl DNS-Anfragen nur eine sehr geringe Bandbreite beanspruchen, weisen sie eine hohe Latenz auf, die in Mobilfunknetzen deutlicher zum Ausdruck kommt. DNS-Vorauflösungstechnologie kann Latenzzeiten effektiv reduzieren

Bei Verwendung von DNS-Prefetch in Firefox wird die DNS-Vorauflösung parallel zum Laden der Seite verarbeitet und hat keinen Einfluss auf die Leistung des Seitenladens.

Beim Zugriff auf mobile Websites, die hauptsächlich auf Bildern basieren, kann die Seitenladezeit durch die Verwendung der DNS-Vorauflösung um 5 % verbessert werden

1. Was ist DNS-Prefetch?

DNS realisiert die Zuordnung vom Domänennamen zur IP. Beim Zugriff auf eine Site über einen Domänennamen ist für jede Anforderung eine DNS-Auflösung erforderlich. Derzeit dauert jede DNS-Auflösung normalerweise weniger als 200 ms. Um das zeitaufwändige Problem der DNS-Auflösung zu lösen, verwenden einige Browser DNS Prefetch, um den Zugriff reibungsloser zu gestalten.
DNS Prefetch ist eine DNS-Vorauflösungstechnologie. Beim Surfen im Internet löst der Browser die Domänennamen auf der Webseite auf und speichert sie im Cache, wenn die Webseite geladen wird. Auf diese Weise muss beim Klicken auf den Link auf der aktuellen Webseite keine DNS-Auflösung durchgeführt werden, was die Wartezeit des Benutzers verkürzt und das Benutzererlebnis verbessert.

Derzeit dauert jede DNS-Auflösung normalerweise weniger als 200 ms. Um das zeitaufwändige Problem der DNS-Auflösung zu lösen, verwenden einige Browser DNS Prefetch, um den Zugriff reibungsloser zu gestalten.

Derzeit sind die Browser, die DNS Prefetch unterstützen, Google Chrome und Firefox 3.5.

2. Wie richte ich DNS-Prefetch ein?

Wenn der Browser einen bestimmten Domänennamen auflösen soll, können Sie der Seite ein Link-Tag hinzufügen. Zum Beispiel:

<link rel="dns-prefetch" href="http://img.jb51.net" />

Wenn Sie steuern möchten, ob der Browser den Domänennamen vorab auflöst, können Sie dies über das Attribut „x-dns-prefetch-control“ des HTTP-Headers steuern.
Leider unterstützen derzeit nur Google Chrome und Firefox 3.5 die oben genannten Tags.

Im Allgemeinen liegt der Grund für diese Verzögerung nicht an der Bandbreite oder Auslastung der Website der Gegenpartei. Was also verursacht diese Situation genau? Zhanlan versuchte zu spekulieren und nahm an, dass es sich um ein DNS-Problem handelte, da die Geschwindigkeit der DNS-Auflösung wahrscheinlich die Hauptursache für Ressourcenverzögerungen ist. Daher hat Zhanlan den folgenden Code in den Seitenkopf eingefügt (für die DNS-Vorauflösung):

<meta http-equiv="x-dns-prefetch-control" content="ein" />
<link rel="dns-prefetch" href="http://bdimg.share.baidu.com" />
<link rel="dns-prefetch" href="http://nsclick.baidu.com" />
<link rel="dns-prefetch" href="http://hm.baidu.com" />
<link rel="dns-prefetch" href="http://eiv.baidu.com" />
<link rel="dns-prefetch" href="http://img.jb51.net" />

Die Wirkung ist sehr gut (der Testbrowser ist IE8) und die Ladegeschwindigkeit der Baidu-Sharing-Schaltfläche wird beim Öffnen anderer Seiten erheblich verbessert!

<link rel="dns-prefetch" href="http://common.jb51.net" />
<!--Wenn Sie nicht sicher sind, ob es sich um eine http- oder https-Verbindung handelt, empfiehlt sich folgendes-->
<link rel="dns-prefetch" href="//common.jb51.net" />

3. Grundsätze und Vorsichtsmaßnahmen für die Implementierung des DNS-Prefetching vor der Auflösung

1. <Meta>-Informationen teilen dem Browser mit, dass die aktuelle Seite vorab per DNS aufgelöst werden muss.

<meta http-equiv="x-dns-prefetch-control" content="ein" />

2.</head>Verwenden Sie das <link>-Tag, um die DNS-Vorauflösung zu erzwingen;

<link rel="dns-prefetch" href="http://bdimg.share.baidu.com" />

3. Verwenden Sie DNS-Prefetch mit Vorsicht. Wiederholte DNS-Vorauflösung mehrerer Seiten erhöht die Anzahl wiederholter DNS-Abfragen.

4. Der erste DNS-Auflösungsprozess des Browsers für den Domänennamen der Website:

Browser-Cache -> System-Cache -> Router-Cache -> ISP -> DNS-Cache -> Rekursive Suche

5. Wenn Sie den impliziten DNS-Prefetch deaktivieren möchten, können Sie das folgende Tag verwenden

<meta http-equiv="x-dns-prefetch-control" content="aus">

IV. Typische Fälle

Taobao:

<link ref="dns-prefetch" href="//tce.taobao.com" />
<link rel="dns-prefetch" href="//log.mmstat.com" />
<link rel="dns-prefetch" href="//tui.taobao.com" />
<link rel="dns-prefetch" href="//ald.taobao.com" />
<link rel="dns-prefetch" href="//gw.alicdn.com" />

Alipay, NetEase usw.

Beachten;

Obwohl die Verwendung von DNS Prefetch die Auflösung von Seiten beschleunigen kann, sollte es nicht missbraucht werden, da einige Entwickler darauf hingewiesen haben, dass durch die Deaktivierung von DNS Prefetching 10 Milliarden DNS-Abfragen pro Monat eingespart werden können.

5. DNS-Prefetch-Prozess

Wenn ein Browser eine URL anfordert, können wir über Firebug feststellen, dass wahrscheinlich die folgenden Prozesse stattfinden: Blockieren, Domänennamenauflösung, Herstellen einer Verbindung, Senden der Anforderung, Warten auf eine Antwort und Empfangen von Daten. Die letzten vier beziehen sich auf die Netzwerkbedingungen des Benutzers und die Verarbeitungsgeschwindigkeit Ihres Servers. Dieser Artikel konzentriert sich auf die ersten beiden.

1. Blockierung: Lösung - Erhöhen Sie die Anzahl gleichzeitiger Browserverbindungen

Blockierung: Verschiedene Browser unterliegen bestimmten Beschränkungen hinsichtlich der maximalen Anzahl gleichzeitiger Verbindungen für einen einzelnen Domänennamen, und auch zwischen HTTP/1.0 und HTTP/1.1 gibt es Unterschiede. Beispielsweise ist unter dem HTTP/1.1-Protokoll die Anzahl gleichzeitiger Verbindungen von IE6 auf 2 begrenzt, während unter HTTP/1.0 die Anzahl gleichzeitiger Verbindungen von IE6 4 erreichen kann. Andere Browser haben ähnliche Beschränkungen, normalerweise 4 bis 8. Wenn der Browser zu diesem Zeitpunkt mehrere Anfragen an einen Domänennamen gleichzeitig initiiert und das Limit überschritten wird, tritt ein Wartezustand auf, was eine Blockierung bedeutet.

Um das Blockierungsproblem zu lösen, können wir die Domänennamen bestimmter URLs verteilen. Beispielsweise ähneln unsere Bilddomänennamen im Allgemeinen img.guoweiwei.com. Wenn eine Seite mehr als 20 Bilder enthält, werden mindestens 10 Anfragen blockiert. Wenn wir sie auf verschiedene Domänennamen wie img0.guoweiwei.com/img1.guoweiwei.com/img2.guoweiwei.com/… verteilen, werden mindestens diese 20 Bildanfragen gleichzeitig ausgeführt und die Website-Öffnungsgeschwindigkeit wird erheblich verbessert. In ähnlicher Weise kann die gleiche Verarbeitung auf einige CSS/JS-Domänennamen angewendet werden.

2. Domänennamenauflösung: Lösung - DNS-Vorauflösung

Domänennamenauflösung: Der Vorgang der Abfrage der IP aus dem Domänennamen. Dieser Vorgang ist im Allgemeinen sehr schnell, kann aber auch zu Verzögerungen führen. Im Allgemeinen speichern Browser die Auflösungsergebnisse entsprechend zwischen und lösen neue Domänennamen, die auf der Seite erscheinen, vorab auf. Dies tun jedoch nicht alle Browser. Um anderen Browsern bei der Vorabauflösung bestimmter Domänennamen zu helfen, können Sie dem HTML-Tag der Seite DNS-Prefetch hinzufügen, um den Browser anzuweisen, den angegebenen Domänennamen vorab aufzulösen. Gehen Sie dazu wie folgt vor:

<link rel="dns-prefetch" href="//domain.com">

Wenn Sie aufmerksam sind, werden Sie diese beiden Phänomene auf der Website von Taobao finden. Taobao hat viele Domänennamen wie img0.tbcdn.cn.

Ein weiterer Optimierungspunkt:

3. Cookie-Isolierung

Warum also den Domänennamen img0.tbcdn.cn statt img0.taobao.com verwenden? Dies muss mit Cookies beginnen. Taobaos Cookies sind bereits sehr groß, angeblich fast 1 KB. Wenn Sie am Ende den Domänennamen verwenden, enthält jede Bildanforderung ein langes Cookie. Die Folgen sind offensichtlich. Dies verlangsamt nicht nur die Netzwerkanforderungen, sondern verschwendet auch Bandbreite. Taobaos Bildserver benötigt diese Cookies nicht. Dies wird als Cookie-Pollution bezeichnet und um dieses Problem zu lösen, ist ein separater Domänenname erforderlich.

Die folgenden Highlights:

4. DNS-Vorauflösungslösung

Bei der DNS-Vorauflösung versucht der Browser, den Domänennamen aufzulösen, bevor der Benutzer auf den Link zugreift. Dies ist der normale DNS-Auflösungsmechanismus des Computers.

Wenn der Benutzer nach der Auflösung des Domänennamens tatsächlich auf den Domänennamen zugreift, tritt keine Verzögerung bei der DNS-Auflösungszeit auf.

Das offensichtlichste Beispiel ist, dass die DNS-Vorauflösung sehr effektiv ist, wenn eine Seite viele Domänennamen enthält, beispielsweise eine Suchergebnisseite. Wenn auf einer Webseite ein Hyperlink gefunden wird, extrahiert DNS Prefetching den Domänennamen daraus und löst ihn in eine IP-Adresse auf. Diese Arbeit wird im Hintergrund ausgeführt, während der Benutzer im Internet surft, und verbraucht nur minimale CPU- und Netzwerklast. Wenn Benutzer auf diese voraufgelösten Domänennamen klicken, kann der Zeitaufwand um durchschnittlich 200 Millisekunden reduziert werden (vorausgesetzt, der Benutzer hat den Domänennamen in letzter Zeit nicht besucht). Noch wichtiger ist, dass Benutzer nicht mit dem Worst-Case-Szenario der DNS-Auflösung konfrontiert werden (das häufig mehr als 1 Sekunde dauert).

DNS Prefetch oder DNS-Voraberfassung ist Teil der Front-End-Optimierung. Im Allgemeinen gibt es bei der Front-End-Optimierung zwei Punkte im Zusammenhang mit DNS:

Eine Möglichkeit besteht darin, die Anzahl der DNS-Anfragen zu reduzieren.

Eine andere Möglichkeit besteht darin, eine DNS-Voraberfassung durchzuführen.

Da es sich bei DNS um das Basisprotokoll des Internets handelt, wird die Auflösungsgeschwindigkeit von Website-Optimierern anscheinend leicht übersehen. Die meisten neuen Browser sind mittlerweile für die DNS-Auflösung optimiert. Eine typische DNS-Auflösung dauert 20-120 Millisekunden. Eine gute Optimierungsmethode besteht darin, die Zeit und Anzahl der DNS-Auflösungen zu reduzieren.

DNS Prefetching ermöglicht die Auflösung von Domänennamen mit diesem Attribut im Hintergrund, ohne dass der Benutzer auf einen Link klicken muss. Die Auflösung von Domänennamen und das Laden von Inhalten sind serielle Netzwerkvorgänge, sodass diese Methode die Wartezeit des Benutzers verkürzen und das Benutzererlebnis verbessern kann.

Der erste Suchvorgang des Browsers für die DNS-Auflösung einer Website läuft wie folgt ab: Browser-Cache - System-Cache - Router-Cache - ISP-DNS-Cache - rekursive Suche

Standardmäßig ruft der Browser Domänennamen auf der Seite vorab ab, die sich nicht in derselben Domäne wie der aktuelle Domänenname (der Domänenname der durchsuchten Webseite) befinden, und speichert die Ergebnisse im Cache. Dies ist impliziter DNS-Prefetch. Wenn Sie Domänen vorab abrufen möchten, die nicht auf der Seite angezeigt werden, verwenden Sie den expliziten DNS-Prefetch.

Derzeit unterstützen die meisten Browser diese Eigenschaft bereits. Die unterstützten Versionen sind wie folgt:

•– Safari: 5+
•– Chrome: Alle
•– Firefox: 3.5+
•– Oper: Unbekannt
•– IE: 9+ (auf blogs.msdn.com „Pre-resolution“ genannt)

Chrome und Firefox 3.5+ verfügen über eine integrierte DNS-Prefetching-Technologie und haben entsprechende Optimierungseinstellungen für die DNS-Vorauflösung vorgenommen. Daher können Chrome und Firefox 3.5+ auch ohne Festlegen dieser Eigenschaft eine automatische Voranalyse im Hintergrund durchführen.

Mittlerweile haben auch viele große Sites diese Optimierung umgesetzt, zum Beispiel:

Taobao, Alipay, NetEase

DNS Prefetch sollte möglichst am Anfang der Webseite platziert werden. Empfohlen wird die Platzierung nach <meta charset="UTF-8">. Die spezifische Verwendung ist wie folgt:

<meta http-equiv="x-dns-prefetch-control" content="ein">
<link rel="dns-prefetch" href="//www.zhix.net">
<link rel="dns-prefetch" href="//api.share.zhix.net">
<link rel="dns-prefetch" href="//bdimg.share.zhix.net">

Implementierung des Pre-Parsings:

1. Verwenden Sie Metainformationen, um dem Browser mitzuteilen, dass die aktuelle Seite per DNS vorab aufgelöst werden muss: <meta http-equiv="x-dns-prefetch-control" content="on" />

2. Verwenden Sie das Link-Tag im Seitenkopf, um die DNS-Vorauflösung zu erzwingen: <link rel="dns-prefetch" href="http://bdimg.share.baidu.com" />

Hinweis: DNS-Prefetch sollte mit Vorsicht verwendet werden. Wiederholte DNS-Vorauflösung mehrerer Seiten erhöht die Anzahl wiederholter DNS-Abfragen.

Es ist zu beachten, dass die Verwendung von DNS Prefetch zwar die Seitenauflösung beschleunigen kann, jedoch nicht missbraucht werden sollte, da einige Entwickler darauf hingewiesen haben, dass durch die Deaktivierung von DNS Prefetching 10 Milliarden DNS-Abfragen pro Monat eingespart werden können.

Wenn Sie implizites DNS-Prefetch deaktivieren müssen, können Sie das folgende Tag verwenden:

<meta http-equiv="x-dns-prefetch-control" content="aus">

PS: DNS-Vorauflösung wird hauptsächlich zur Optimierung der Frontend-Seiten von Websites verwendet. Seine Rolle bei der Suchmaschinenoptimierung wurde noch nicht bestätigt, aber als Teil der Verbesserung der Benutzererfahrung kann es sich lohnen, rel="dns-prefetch" langsam zu entdecken.