Comment utiliser la fonction de préchargement de l'attribut rel en HTML5 ?

Ce chapitre va vous montrer comment utiliser la fonction de préchargement de l'attribut rel en HTML5 ? Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

En HTML5, il existe une fonctionnalité très utile mais souvent négligée, qui est la prélecture. Son principe est le suivant :
Utiliser le temps d'inactivité du navigateur pour télécharger d'abord le contenu spécifié par l'utilisateur, puis le mettre en cache. , de sorte que lorsque l'utilisateur le chargera la prochaine fois, il sera extrait directement du cache, et l'efficacité sera plus rapide

Par exemple, si vous souhaitez précharger une certaine page, vous pouvez faire ceci :

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

Mais s'il s'agit de Google, vous devez utiliser un autre nom, c'est-à-dire :

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

Même dans les navigateurs non pris en charge, il n'y a rien de mal à utiliser cette fonctionnalité. le navigateur ne peut pas l'analyser, donc si vous pensez qu'il existe un moyen de prédire à l'avance la page sur laquelle l'utilisateur s'attend à cliquer (par exemple, si l'utilisateur regarde la dernière carte thermique populaire, il peut regarder la première page puis continuez à regarder la page suivante), vous pouvez utiliser la fonction de préchargement à ce moment). Par exemple :

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

Il est également possible de prendre une photo séparée, par exemple :

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

Avec la mise en cache du navigateur, pourquoi avez-vous besoin d'un préchargement ?

1. L'utilisateur visite peut-être le site Web pour la première fois et il n'y a pas de cache pour le moment
2. L'utilisateur a peut-être vidé le cache
3. Le cache a peut-être expiré et les ressources seront rechargées
4. Le fichier de cache auquel l'utilisateur a accès n'est peut-être pas le plus récent et doit être rechargé
5 La technologie de préchargement de Chrome

Maintenant. Chrome est suffisamment intelligent pour prédire, en fonction de votre historique de navigation, les sites Web que vous pouvez visiter ou rechercher, et charger certaines ressources avant d'ouvrir le site Web.
Par exemple, lorsque vous saisissez « amaz » dans le champ de recherche, il devine que vous souhaiterez peut-être visiter amazon.com et peut charger certaines ressources de ce site Web pour vous.
Si cet algorithme de prédiction est précis, il peut grandement améliorer l’expérience de navigation de l’utilisateur.

Prélecture DNS
Nous savons que lorsque nous visitons un site Web tel que www.amazon.com, nous devons convertir le nom de domaine en IP correspondante adressez-vous en premier, ce qui est un processus très long.
La prélecture DNS analyse les noms de domaine où se trouvent les ressources requises par cette page et convertit ces noms de domaine en adresses IP à l'avance lorsque le navigateur est inactif. Cela évite le temps du processus ci-dessus lors de la demande réelle de ressources. >

<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;>

Scénario d'application 1 : Nos ressources existent dans différents CDN. Déclarer les noms de domaine de ces ressources à l'avance peut permettre de gagner du temps de résolution de nom de domaine lorsque des demandes surviennent.

Scénario d'application 2 : si nous savons que la prochaine opération de l'utilisateur lancera certainement une demande de ressource, nous pouvons effectuer une prélecture DNS de cette ressource pour améliorer l'expérience utilisateur.

Prélecture des ressourcesSous Chrome, on peut utiliser la balise link pour déclarer le préchargement de fichiers spécifiques :

<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;>

Dans Firefox ou utilisez la balise méta pour déclarer :

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

rel='subresource' indique que les ressources que la page actuelle doit charger doivent être placées en haut de la page et chargées en premier, avec la plus haute priorité .

rel='prefetch' signifie que lorsque toutes les ressources de la sous-ressource sont chargées, les ressources spécifiées ici seront préchargées, avec la priorité la plus basse.
Remarque : seules les ressources pouvant être mises en cache sont préchargées, sinon les ressources sont gaspillées !

Pré-renduLe DNS pré-analysé et les ressources préchargées mentionnés précédemment sont assez puissants, mais il existe un pré-rendu encore plus puissant (. Pré-rendu) !
Le pré-rendu signifie que nous chargeons à l'avance la page suivante que l'utilisateur est sur le point de visiter. Sinon, le pré-rendu de cette page gaspillera des ressources, alors utilisez-le avec prudence !

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

rel='prerender' signifie que le navigateur nous aidera à afficher mais masquera la page spécifiée. Une fois que nous visiterons cette page, elle s'ouvrira instantanément !

Dans Firefox ou utilisez rel='next' pour déclarer

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

Toutes les ressources ne peuvent pas être préchargées

Lorsque la ressource est une ressource dans la liste suivante, l'opération de pré-rendu sera bloquée :

1. L'URL contient des ressources de téléchargement
2 La page contient de l'audio, de la vidéo
3. Demande d'opérations
4. Authentification HTTP
5. Page HTTPS
6. Page contenant des logiciels malveillants
7. Page pop-up
8. .Ouvre les outils de développement chrome

Déclenche manuellement l'opération de pré-rendu Insère le lien [rel='prerender'] fortement dans la tête Ça y est :

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!