So beschleunigen Sie die Website mit dem -Tag

"Voraussehen"Browser sind die Zukunft des Internets mit Höchstgeschwindigkeit, bringt uns Ressourcen, die wir wollen noch bevor wir wissen, wollen wir sie. Heutige Browser schon machen etwas Vorhersagen ab und zu, um das Abrufen und Rendern von Dokumenten zu beschleunigen. Um dies zum nächsten Schritt zu bringen, wenden wir uns an Web-Entwickler.

Entwickler haben eine ziemlich gute Idee von wie ihre Websites navigiert werden, und welches Ressourcen werden am häufigsten angefordert Daher können sie zukünftige Operationen voraussagen, die Browser für Websites ausführen sollten. Jetzt müssen die Entwickler nur einen Weg finden diese weiterleiten Vorhersagen an Browser und gebrauchen sie gut. Hier kommen spezielle "HTML-Links" ins Spiel.

Ein Refresher für HTTP-Anfragen

Bevor Sie sich diese Links ansehen, ist es an der Zeit, unser Gedächtnis darüber zu aktualisieren, wie ein typischer HTTP-angeforderter Dateiabrufvorgang abläuft. Nehmen wir an, jemand mit dem Namen Joe möchte eine Website besuchen.

Folgendes passiert als nächstes:

1. Joe gibt die menschlich abrufbare Adresse der Website in die Adressleiste eines Browsers ein und drückt die Eingabetaste..
2. Nach Erhalt dieser Adresse fragt der Browser einen DNS-Server (Kompliment des ISP) nach der IP-Adresse der von Joe angegebenen Adresse.
3. Der DNS-Server ist verpflichtet.
4. Nun, da der Browser die IP-Adresse kennt, sendet er eine Nachricht (in TCP-Dialekt) an den Server der Website, in der er nach einer Verbindung fragt.
5. Wenn der Server in gutem Zustand ist, sendet er eine Antwort, die die Anfrage des Browsers bestätigt, und der Browser antwortet und bestätigt die Nachricht des Servers. (Hinweis: Ja, dies ist eine extrem verwirrte Version eines TCP-Handshakes zwischen einem Client und einem Server.)
6. Wenn die Handshakes beendet sind, wird eine Verbindung zwischen den beiden hergestellt.
7. Nun ändert der Browser seinen Dialektstil in HTTP und fragt den Server nach der Website.
8. Der Server, der die Homepage der Website kennt, gibt genau das zurück, das vom Browser empfangen und Joe angezeigt wird, der sehr geduldig vor dem Computer wartet.

Eine typische HTTP-Anforderung wird durchlaufen alles (und mehr), um ein Dokument über das Internet abzurufen. Also wenn einer dieser Prozesse kann, wenn möglich, gestartet werden, wir können Reduzieren Sie die Zeit, die wir auf die Bereitstellung der gewünschten Ressourcen warten müssen.

HTML-Link-Beziehungen

W3C gibt 4 HTML-Link-Beziehungen an (rel für Beziehung) genannt DNS-Prefetch, vor verbinden, Vorabruf, und Prenderender. Zusammen werden sie (von W3C) als "Ressourcenhinweise"Jetzt werden wir sehen Was sie tun können und wo sie verwendet werden können.

1. DNS-Prefetch

Im DNS-Prefetch die Auflösung des Domainnamens (dh das Abrufen der übereinstimmenden IP-Adresse vom DNS-Server) erfolgt im Voraus.

Nehmen wir an, es gibt auf einer Website eine Referenzseite mit vielen Referenzlinks zu ihrer Schwesterseite. Wenn ein Benutzer die Referenzseite besucht, gibt es eine hohe Wahrscheinlichkeit dass der Benutzer zur Schwesterseite navigiert. Also eine frühe DNS-Suche für die Schwestersite kann die Zeit reduziert werden, die zum Öffnen der Site benötigt wird (und dadurch die Benutzererfahrung verbessern).

Diese Latenzreduzierung durch DNS-Prefetching Dies kann durch Hinzufügen dieses Codes zur Referenzseite erfolgen.

Wenn ein Browser diesen Code auf der Referenzseite verarbeitet, fügt er die DNS-Suche der Schwestersite zu seinen Aufgabenwarteschlangen hinzu, und wenn er von anderen Aufgaben mit hoher Priorität in der Warteschlange frei ist, wird die DNS-Auflösung von gestartet Schwestersite.

Wenn ein Benutzer schließlich auf einen der Links klickt, die ihn zur Schwestersite führen, ist die DNS-Auflösung dieser Site möglicherweise bereits abgeschlossen, und der Browser kann sofort mit dem Herstellen der Client-Server-TCP-Verbindung mit der Schwestersite beginnen Server, wodurch die Seite schneller geladen wird.

Diese Funktion ist in fast allen modernen Browsern mit Ausnahme von Safari ab März 2016 verfügbar.

2. Verbinden Sie sich

Preconnect ist einen Schritt weiter als der DNS-Prefetch. Es stellt eine Verbindung zum Server her, an den möglicherweise später eine Anforderung gesendet wird.

W3C listet einen idealen Anwendungsfall für die Vorverbindung auf: Weiterleitungen. Entwickler verwenden Umleitungen aus verschiedenen Gründen.

In diesem Fall ist die nächste Anfrage eines Browsers (umgeleitete Site) 100% vorhersehbar, und kann verbunden sein mit, zu Latenz der Navigation reduzieren.

Stellen Sie sich vor, es gibt eine Zwischen-Site-Seite, auf die weitergeleitet wird "Xyzsite", der folgende HTML-Link lässt den Browser eine Vorverbindung mit dem xyzsite-Server herstellen, wenn er auf diese Zwischenseite gelangt.

Ab März 2016 ist dies in Chrome, Opera und Firefox verfügbar.

3. Vorabruf

Mit Vorabruf, für eine Ressource den Browser beginnt mit der Implementierung der DNS-Auflösung des Domänennamens der Ressource, dann stellt eine TCP-Verbindung mit dem Server der Ressource her, macht die HTTP-Anfrage und schließlich ruft die vorabgerufene Ressource ab und speichert sie im Browser-Cache.

Wenn Sie sicher sind, welche Ressourcen später benötigt werden, müssen Sie diese zuvor abrufen. Darin liegt der Haken. Das Prefetching erfordert Vermutungen, Und wenn Sie falsch raten, können Sie tatsächlich langsamer werden, anstatt Ihre Website zu beschleunigen.

Bei Online-Büchern, Galerien oder Portfolios, wenn der Benutzer am wahrscheinlichsten zur nächsten Seite wechselt, werden die Ressourcen vorab abgerufen, z Bilder, kann die Dinge erheblich beschleunigen. Hier ist der Code dafür.

Prefetch wird in Chrome, Firefox und Opera unterstützt.

4. Prerender

Nur für HTML-Seiten kann Prerendering durchgeführt werden. Eine vorgerenderte HTML-Seite ist offline gerendert, und wird auf den Bildschirm gemalt, wenn es vom Benutzer tatsächlich benötigt wird. Rendering kostet eine höhere Rechenarbeits- und Speicherressource; Um eine Seite zu rendern, benötigt der Browser möglicherweise zusätzliche Ressourcen (z. B. Bilder, die der Seite hinzugefügt werden), die dazu führen konsequentere Anfragen über den Browser.

So, Prenderender muß sein mit Vorsicht verwendet, und nicht überlastet. Durch Hinzufügen des folgenden Codes wird zuvor die "About" -Seite vorab gerendert.

Prerender ist ab März 2016 bereits in Chrome, IE und Opera verfügbar.

Ein paar Dinge zu beachten

(1) Keiner der oben genannten Ressourcenhinweise garantiert die Ausführung und den Abschluss der verschiedenen Anforderungsstufen, für die er ausgeführt wurde, da der Browser bereits die Anforderungen bearbeitet, die für die Operationen der aktuellen Seite des Benutzers erforderlich sind, und diese Optimierungen durchführt kann die aktuellen Aufgaben des Benutzers behindern.

Also ist alles so in die Warteschlange gestellt und ausgeführt werden, wenn sich der Browser dazu frei fühlt.

Diese Ressourcenhinweise müssen nicht unbedingt vor dem Laden der Seite auf der Seite vorhanden sein. Sie können sein später von JavaScript hinzugefügt, und die Ressourcenhinweise erledigen ihre Arbeit wie gewohnt.

(2) W3C spezifiziert a HTML-Linkattribut namens Hinweiswahrscheinlichkeit, pr (mit Wert 0 bis 1) für diese Ressourcenhinweise, die verwendet werden können, um die Wahrscheinlichkeit von Anforderungen anzugeben, die in der Zukunft gestellt werden. Ich habe jedoch noch nicht gesehen, dass dieses Attribut von irgendeinem Browser implementiert wurde. Der folgende Code gibt als Beispiel an, dass es eine Chance von 80% gibt, dass in Zukunft Xyzsite angefordert wird, und 30% für die Info-Seite.

Wir können auch das optionale crossorigin-Attribut zu den Ressourcenhinweisen hinzufügen, um den Browser über den CORS-Berechtigungsnachweis der verknüpften Anforderung zu informieren.