web-dev-qa-db-fra.com

Comment puis-je précharger une page en utilisant HTML5?

Je me souviens d'avoir lu une balise META qui fait que le navigateur précharge une page. Quelle est encore la balise?

htmlpreload
31
Leo Jiang

La prélecture est incluse dans un spécification W3C sous le nom Resource Hints . Il est implémenté dans Firefox, Chrome, IE 11, Edge, Opera après 12.1 et le navigateur Android de 4.4) .4, voir page de pré-lecture de caniuse pour plus de détails à jour.

Consultez également les pages caniuse et spécifications pour les technologies associées (les navigateurs pris en charge sont ensuite récupérés de caniuse et mis à jour en septembre 2015):

  • Prérendage caniuse / spec (IE 11, Edge, Chrome, Opera)
  • Préconnexion caniuse / spec (Firefox, Chrome 46, Opera 33)
  • Prérécupération DNS caniuse / spec (IE9 ( voir la note ci-dessous ), IE10, tous les autres navigateurs sauf Opera Mini et peut-être iOS Safari et le navigateur Android)

IE 9 a implémenté uniquement la prélecture DNS mais l'a appelée "prefetch" (mise en garde!). Chrome pendant un certain temps (au moins jusqu'en 2013) n'a fait que le pré-rendu et la prélecture DNS. IE11 implémente lazyload , pour les images; Microsoft a essayé pour l'obtenir dans la spécification, mais jusqu'à présent ce n'est pas le cas. iCab est indiqué avoir été le premier navigateur à implémenter la prélecture, bien que ce comportement soit automatique, non contrôlé par le balisage.

Contexte historique

Mozilla Application Suite, et plus tard, Firefox, implémentent la spécification (la spécification est en fait basée sur l'implémentation précoce de Mozilla de la prélecture, qui était quelque peu basée sur le Link: en-tête spécifié dans RFC 2068 qui a maintenant été remplacé par RFC 2616 [qui ne fait pas référence au Link: entête]. Voir cette ancienne version de la documentation ( ???? ) pour plus de détails.) Selon la documentation sur MDN ( ???? ):

La prélecture des liens est un mécanisme de navigateur qui utilise le temps d'inactivité du navigateur pour télécharger ou prélire des documents que l'utilisateur pourrait visiter dans un avenir proche.

Le navigateur recherche soit un code HTML <link> ou un HTTP Link: en-tête avec un type de relation soit next ou prefetch.

La syntaxe est donc:

<link rel="prefetch" href="/path/to/prefetch" />

Vous pouvez également utiliser le Link: En-tête HTTP:

Link: </page/to/prefetch>; rel=prefetch

Ou un <meta> pour simuler ce même en-tête HTTP:

<meta http-equiv="Link" content="&lt;/page/to/prefetch&gt;; rel=prefetch">

Notez que la relation next peut également être utilisée, mais sa fonction principale est d'indiquer la page "suivante" dans la navigation, vous ne devez donc pas l'utiliser pour des ressources ou des informations non liées. La prélecture est également effectuée sur les connexions HTTPS.

iCab

iCab semble ( ???? ) a implémenté une prélecture anticipée vers 2001. iCab a apparemment prérécupéré tous les liens vers les pages de contenu (pas les ressources), ne suivant aucun indice du développeur aurait laissé dans le balisage.

62
Félix Saparelli

Certains agents utilisateurs peuvent choisir de précharger lorsqu'ils sont présents, mais vous ne pouvez pas parier dessus.

<link rel="next" href="http://www.example.com/link-reference">
3
Syntax Error

Ce n'est peut-être pas une bonne réponse à la question, mais juste pour l'info InstantClick.js peut précharger vos liens avant de cliquer dessus.

Comment ça marche

Avant de cliquer sur un lien, les visiteurs survolent ce lien. Entre ces deux événements, 200 à 300 ms passent généralement. InstantClick utilise ce temps pour précharger la page, afin que la page soit déjà là lorsque vous cliquez.

2
RSK

Il existe plusieurs façons de précharger une page:

  • DNS prefetching indique au navigateur que certaines ressources d'un autre domaine seraient nécessaires, afin qu'il puisse résoudre le DNS le plus rapidement possible. Pour ce faire, vous devez ajouter <link rel="dns-prefetch" href="//example.com"> dans le du document. Cela peut être utile si vous devez utiliser des éléments tiers.
  • Preconnect va un peu plus loin et non seulement il résout le DNS, mais fait également une poignée de main TCP et si vous vous connectez à https, il fera une négociation TLS. en-tête vous devez ajouter <link rel="preconnect" href="https://example.com/">
  • Prefetch télécharge la ressource et la stocke dans le cache du navigateur pour l'utiliser plus tard. Tu peux faire <link rel="prefetch" href="imgs/image.png">. Notez que c'est au navigateur de décider s'il est judicieux de télécharger la ressource (cela pourrait vous ignorer)
  • Prerender est l'option la plus puissante. Il indique au navigateur de demander l'url et de télécharger tous les actifs. <link rel="prerender" href="http://example.com/page">. Vous devez être sûr que la personne ouvrira la page, sinon vous perdrez simplement sa bande passante.
2
Salvador Dali

La pré-création des actifs est l'une des tâches les plus difficiles et les plus simples d'un projet FLASH ou HTML5, car nous avons réalisé des projets de conversion FLASH en HTML5.

Les types de préchargeurs les plus simples sont les préchargeurs statiques utilisés pour charger le film dans lequel ils existent. Pour ces préchargeurs, il vous suffit d'arrêter le film sur un écran de préchargement, généralement la première image du film, et de le conserver jusqu'à ce que vous puissiez déterminer que le film a été entièrement chargé dans le lecteur Flash.

Le Preloader arrête également tout scintillement ou retard lors du changement d'images non mises en cache sur une page Web, car la même image doit être téléchargée depuis le serveur chaque fois qu'elle doit être affichée.

Nous avons utilisé jQuery HMTL5 Loader dans nos applications Web (HTML5), vous pouvez voir le Github Repo ici.

Ce plugin a besoin d'un fichier JSON pour obtenir les fichiers qu'il doit précharger, et il peut précharger des images, des sources vidéo et audio html5, des scripts et des fichiers texte. En plus de cela, il a un type différent de chargeurs (circulaire, ligne, grand compteur, etc.) et des fonctionnalités supplémentaires, etc.

Il est implémenté comme ceci.

<script>
    var loaderAnimation = $("#html5Loader").LoaderAnimation();
    $.html5Loader({getFilesToLoadJSON:'json file',
        onUpdate: loaderAnimation.update,
        debugMode:false
    });
</script>

Son fonctionnement parfaitement dans différents navigateurs, y compris Chrome, FireFox, Safari, Opera, etc. et dans les navigateurs mobiles.

Remarque: Nous l'avons utilisé pour nos applications Web HTML5 qui s'exécutent sur différentes plates-formes, notamment Android et iOS.

1
Tony Jose