Comment le lien rel = "preload" fonctionne-t-il exactement?

Question

La nouvelle version de Chrome a ajouté la prise en charge de <link rel="preload">. Ils ont posté beaucoup d'informations avec des références à la documentation originale. Quelqu'un peut-il fournir des explications simples sur la façon dont cela fonctionne et quelle est la différence par rapport à l'affaire sans rel="preload".

Answer 1

Dans sa forme la plus basique, il définit le link ayant la priorité rel="preload". Contrairement à la prévisualisation, qui permet au navigateur de décider si c'est une bonne idée ou non, le préchargement forcera le navigateur à le faire.

=== Un examen plus approfondi: ===

Voici un extrait de W3c

De nombreuses applications nécessitent un contrôle fin sur lorsque les ressources sont récupérées, traitées, et appliqué au document. Par exemple, le chargement et le traitement de certaines ressources peuvent être différés par l'application pour réduire les conflits de ressources et améliorer les performances de la charge initiale. Ce comportement est généralement obtenu en déplaçant extraction de ressources dans la logique de chargement de ressources personnalisée définie par l'application - les extractions de ressources sont initiées via des éléments injectés ou via XMLHttpRequest, lorsque des conditions d'application particulières sont remplies.

Cependant, il existe également des cas où certaines ressources doivent être recherchées le plus tôt possible, mais leur logique de traitement et d'exécution est en fonction des exigences spécifiques de l'application - par ex. dépendance gestion, le chargement conditionnel, les garanties de commande, et ainsi de suite. Actuellement, il n'est pas possible de fournir ce comportement sans pénalité de performance .

La déclaration d'une ressource via l'un des éléments existants (par exemple, img, script, link) couple l'extraction et l'exécution des ressources. Considérant qu'une application peut vouloir récupérer, mais retarder l'exécution de la ressource jusqu'à ce que certaines conditions soient remplies. Récupérer des ressources avec XMLHttpRequest à Eviter le comportement ci-dessus entraîne une sérieuse pénalisation des performances en cachant les déclarations de ressources à partir des analyseurs DOM et préchargeurs de l'agent utilisateur. Les extractions de ressources ne sont exécutées que lorsque le code JavaScript pertinent est exécuté. En raison de l'abondance des scripts de blocage sur la plupart des pages , des retards importants sont enregistrés et les performances de l'application sont affectées. Le mot clé de préchargement sur les éléments de lien fournit une primitive d'extraction déclarative qui aborde le cas d'utilisation ci-dessus consistant à lancer une extraction précoce et à séparer l'extraction de l'exécution des ressources. En tant que tel, le mot clé preload sert de primitive de bas niveau qui permet aux applications de générer des comportements de chargement et d'exécution de ressources personnalisées sans masquer les ressources de l'agent utilisateur et de subir des pénalités de récupération de ressources retardées.

Par exemple, l'application peut utiliser le mot-clé de pré-charge pour initier tôt, de haute priorité, et non qui bloquent extraction d'une ressource CSS qui peut ensuite être appliqué par l'application au moment opportun:

<!-- preload stylesheet resource via declarative markup --> 
<link rel="preload" href="/styles/other.css" as="style"> 
<!-- or, preload stylesheet resource via JavaScript --> 
<script> 
var res = document.createElement("link"); 
res.rel = "preload"; 
res.as = "style"; 
res.href = "styles/other.css"; 
document.head.appendChild(res); 
</script> 

est ici vraiment regard en profondeur sur W3c: https://w3c.github.io/preload/

Mais je serais prudent si vous prévoyez de l'utiliser comme support du navigateur est pas terrible, le soutien mondial de broswer est seulement à 0,18%.

Voici la liste complète: http://caniuse.com/#search=preload