Wie verwende ich die Vorladefunktion des rel-Attributs in HTML5?

In diesem Kapitel erfahren Sie, wie Sie die Vorladefunktion des rel-Attributs in HTML5 verwenden. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

In HTML5 gibt es eine sehr nützliche, aber oft übersehene Funktion, nämlich das Vorabrufen. Ihr Prinzip ist:
Nutzen Sie die Leerlaufzeit des Browsers, um zuerst den vom Benutzer angegebenen Inhalt herunterzuladen und ihn dann zwischenzuspeichern , sodass sie beim nächsten Laden direkt aus dem Cache entnommen wird und die Effizienz schneller ist.

Wenn Sie beispielsweise eine bestimmte Seite vorab laden möchten, können Sie Folgendes tun:

<link rel="prefetch" href="http://www.example.com/"> <!-- Firefox -->

Aber wenn es Google ist, müssen Sie einen anderen Namen verwenden, nämlich:

<link rel="prerender" href="http://www.example.com/"> <!-- Chrome -->

Selbst in nicht unterstützten Browsern ist die Verwendung dieser Funktion in Ordnung, aber der Browser analysiert sie Wenn Sie also der Meinung sind, dass es eine Möglichkeit gibt, die Seite, auf die der Benutzer voraussichtlich klicken wird, im Voraus vorherzusagen (wenn der Benutzer beispielsweise die neueste beliebte Heatmap ansieht, schaut er sich möglicherweise die erste Seite an und fährt dann fort Um die nächste Seite anzusehen, können Sie die Vorladefunktion verwenden. Zum Beispiel:

<link rel="prefetch" href="<?php echo get_next_posts_page_link(); ?>">

Es ist auch möglich, ein separates Bild aufzunehmen, zum Beispiel:

<link rel="prefetch" href="/images/test.jpg"/>

Warum muss der Browser-Cache vorab geladen werden?

1. Der Benutzer besucht die Website möglicherweise zum ersten Mal und es ist derzeit kein Cache vorhanden
Der Benutzer hat möglicherweise den Cache geleert
3. Der Cache ist möglicherweise abgelaufen und die Ressourcen werden neu geladen
4. Die vom Benutzer aufgerufene Cache-Datei ist möglicherweise nicht die neueste und muss neu geladen werden

Jetzt Chrome ist intelligent genug, um anhand Ihres Browserverlaufs vorherzusagen, welche Websites Sie möglicherweise besuchen oder nach denen Sie suchen, und einige Ressourcen zu laden, bevor Sie die Website öffnen.

Wenn Sie beispielsweise „amaz“ in das Suchfeld eingeben, wird vermutet, dass Sie möglicherweise amazon.com besuchen möchten, und lädt möglicherweise einige Ressourcen von dieser Website für Sie.
Wenn dieser Vorhersagealgorithmus korrekt ist, kann er das Surferlebnis des Benutzers erheblich verbessern.

DNS-PrefetchWir wissen, dass wir beim Besuch einer Website wie www.amazon.com den Domainnamen in die entsprechende IP umwandeln müssen Adresse zuerst, was ein sehr zeitaufwändiger Prozess ist.
DNS-Prefetch analysiert die Domänennamen, in denen sich die von dieser Seite benötigten Ressourcen befinden, und wandelt diese Domänennamen im Voraus in IP-Adressen um, wenn der Browser inaktiv ist. Dadurch wird die Zeit des oben genannten Prozesses beim tatsächlichen Anfordern von Ressourcen vermieden >

<meta http-equiv=&#39;x-dns-prefetch-control&#39; content=&#39;on&#39;>  
<link rel=&#39;dns-prefetch&#39; href=&#39;http://g-ecx.images-amazon.com&#39;>  
<link rel=&#39;dns-prefetch&#39; href=&#39;http://z-ecx.images-amazon.com&#39;>  
<link rel=&#39;dns-prefetch&#39; href=&#39;http://ecx.images-amazon.com&#39;>  
<link rel=&#39;dns-prefetch&#39; href=&#39;http://completion.amazon.com&#39;>  
<link rel=&#39;dns-prefetch&#39; href=&#39;http://fls-na.amazon.com&#39;>

Anwendungsszenarien 1: Unsere Ressourcen sind in verschiedenen CDNs vorhanden. Durch die Vorabdeklaration der Domänennamen dieser Ressourcen kann die Auflösung von Domänennamen bei Anfragen eingespart werden.

Anwendungsszenario 2: Wenn wir wissen, dass der nächste Vorgang des Benutzers definitiv eine Anforderung für eine Ressource initiieren wird, können wir diese Ressource per DNS-Prefetch abrufen, um das Benutzererlebnis zu verbessern.

Ressourcen-PrefetchUnter Chrome können wir das Vorabladen einer bestimmten Datei mit dem Link-Tag deklarieren:

<link rel=&#39;subresource&#39; href=&#39;critical.js&#39;>  
<link rel=&#39;subresource&#39; href=&#39;main.css&#39;>  
<link rel=&#39;prefetch&#39; href=&#39;secondary.js&#39;>

In Firefox oder Verwenden Sie das Meta-Tag, um Folgendes zu deklarieren:

<meta http-equiv="Link" content="<critical.js>; rel=prefetch">

rel='subresource' gibt an, dass die Ressourcen, die die aktuelle Seite laden muss, oben auf der Seite platziert und zuerst mit der höchsten Priorität geladen werden sollen.

rel='prefetch' bedeutet, dass beim Laden aller Ressourcen der Unterressource die hier angegebenen Ressourcen mit der niedrigsten Priorität vorgeladen werden.

Hinweis: Es sind nur zwischenspeicherbare Ressourcen vorinstalliert, andernfalls werden Ressourcen verschwendet!

Vorab rendernDas zuvor erwähnte vorab analysierte DNS und die vorab geladenen Ressourcen sind leistungsstark genug, aber es gibt noch leistungsfähigeres Vorabrendern ( Vorrendering)! Vorab rendern bedeutet, dass wir die nächste Seite, die der Benutzer besuchen möchte, im Voraus laden. Andernfalls werden durch das Vorab-Rendering dieser Seite Ressourcen verschwendet. Gehen Sie daher vorsichtig damit um!

<link rel=&#39;prerender&#39; href=&#39;http://www.pagetoprerender.com&#39;>

rel='prerender' bedeutet, dass der Browser uns beim Rendern unterstützt, die angegebene Seite jedoch ausblendet. Sobald wir diese Seite besuchen, wird sie sofort geöffnet!

In Firefox oder verwenden Sie rel='next', um

<link rel="next" href="http://www.pagetoprerender.com">

zu deklarieren

Nicht alle Ressourcen können vorab geladen werden, wenn Ressourcen vorab gerendert werden Vorgänge werden blockiert, wenn die Ressourcen in der folgenden Liste sind:

Die URL enthält Download-Ressourcen

3 >4. HTTP-Authentifizierung
5. HTTPS-Seite
6. Seite mit Malware
7. Popup-Seite
8. Seite, die viele Ressourcen beansprucht
9. Öffnen Sie die Chrome-Entwicklertools



Manuelles Auslösen des Pre-Rendering-Vorgangs

Fügen Sie einfach den Link[rel='prerender'] in den Kopf ein:

var hint =document.createElement("link")   
hint.setAttribute(“rel”,”prerender”)   
hint.setAttribute(“href”,”next-page.html”)   
document.getElementsByTagName(“head”)[0].appendChild(hint)

Das obige ist der detaillierte Inhalt vonWie verwende ich die Vorladefunktion des rel-Attributs in HTML5?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!