Heim >Web-Frontend >H5-Tutorial >Verwenden Sie das Prefetching von HTML5-Links, um Ihre website_html5-Tutorial-Tipps zu beschleunigen

Verwenden Sie das Prefetching von HTML5-Links, um Ihre website_html5-Tutorial-Tipps zu beschleunigen

WBOY
WBOYOriginal
2016-05-16 15:50:431825Durchsuche

Das Link-Prefetching von HTML5 ist ein im Sand vergrabenes Juwel, und nur wenige Menschen kennen seinen Wert. Möglicherweise kennen Sie bereits die alte und berühmte Funktion zum Vorladen von Bildern. Die Link-Prefetching-Funktion erweitert dieses Konzept von Bildern auf Webinhalte (ohne AJAX-Code).
So funktioniert es: Fügen Sie einen Link wie folgt zur Seite hinzu:

Kopieren Sie den Code
Der Code ist wie folgt:



Auf diese Weise wird der Browser angezeigt, wenn Ihr Computer inaktiv ist lädt page2.html automatisch im Hintergrund herunter. Wenn der Benutzer schließlich auf den Link zu page2.html klickt, ruft der Browser die Seite aus dem Cache ab, sodass die Seite unerwartet schnell geladen wird.
Derzeit unterstützt nur Firefox diese Funktion. Da Firefox jedoch derzeit der Browser mit der zweitgrößten Nutzerbasis der Welt ist, wird es, solange Sie eine solche Codezeile zur HTML-Seite hinzufügen, immer noch eine beträchtliche Anzahl von Besuchern geben, die diese sehr offensichtliche Seitenladegeschwindigkeit erleben können . verbessern. Wie cool!

Sie können die Link-Prefetching-Funktion in vielen Situationen verwenden :
* Wenn Sie einen langen Artikel, ein Online-Tutorial, ein Album usw. haben, müssen Sie es aufteilen Wenn mehrere Seiten angezeigt werden.
* Laden Sie die nächsten Seiten, die Ihre Benutzer am wahrscheinlichsten auf Ihrer Homepage besuchen werden, vorab. (Es kann sich um eine „sehr empfehlenswerte“ Produktseite auf einer Produktwebsite oder um einen aktuellen Blog auf einer Blog-Website handeln)
* Auf der Suchabfrageseite werden die ersten paar gesuchten Artikel vorab geladen.
Für statische Inhalte können Sie auch das rel-Tag verwenden, um die Prefetch-Funktion zu implementieren:

Kopieren Sie den Code
Der Code lautet wie folgt:



Es gibt noch einige andere Interessante Dinge, die Sie hier beachten sollten:
* Link-Prefetching wird bald in den Browsern Opera, Chrome und Safari implementiert, aber für Internet Explorer müssen Sie möglicherweise bis 2020 warten.
* Wenn diese Funktion häufig genutzt wird, wirkt sie sich auf Ihre Website-Protokolle und Zugriffsstatistiken aus. Bitte berücksichtigen Sie die Situation, dass eine Ihrer Seiten mehrere Seiten vorab abgerufen hat, der Benutzer jedoch nicht tatsächlich auf diese Seiten zugegriffen hat. Ihr Server (oder Ihr Statistiktool) kennt den Unterschied zwischen den beiden nicht.
Um dies zu unterscheiden, sendet Firefox die Prefetch-Nachricht X-moz: im HTTP-Header. Sie benötigen jedoch etwas auf der Serverseite, um diese Nachricht zu erkennen.
Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn