Comment fonctionne exactement link rel = "preload"?
La nouvelle version de Chrome a ajouté la prise en charge de <link rel="preload">. Ils ont publié de nombreuses informations avec des références à la documentation d'origine. Quelqu'un peut-il expliquer simplement comment cela fonctionne et quelle est la différence par rapport au cas sans rel="preload".
Dans sa forme la plus basique, il définit le link qui a rel="preload" à une priorité élevée, contrairement à la prélecture, que le navigateur peut décider si c'est une bonne idée ou non, la précharge forcera le navigateur à le faire.
=== Un regard plus en profondeur: ===
Voici un extrait du W3c
De nombreuses applications nécessitent un contrôle précis sur le moment où les ressources sont extraites, traitées et appliquées 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 la récupération de ressources dans une logique de chargement de ressources personnalisée définie par l'application - c'est-à-dire que les récupérations de ressources sont lancé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 récupérées le plus tôt possible, mais leur logique de traitement et d'exécution est soumise à des exigences spécifiques à l'application, par exemple gestion des dépendances, chargement conditionnel, garanties de commande, etc. Actuellement, il n'est pas possible de fournir ce comportement sans une baisse des performances.
La déclaration d'une ressource via l'un des éléments existants (par exemple, img, script, lien) couple la récupération et l'exécution des ressources. Alors qu'une application peut vouloir récupérer, mais retarder l'exécution de la ressource jusqu'à ce qu'une condition soit remplie. La récupération des ressources avec XMLHttpRequest pour éviter le comportement ci-dessus entraîne une grave pénalité de performances en masquant les déclarations de ressources du DOM de l'agent utilisateur et des analyseurs de préchargement. Les récupérations de ressources ne sont distribuées que lorsque le JavaScript approprié est exécuté, ce qui, en raison de l'abondance de scripts de blocage sur la plupart des pages, introduit des retards importants et affecte les performances de l'application. Le mot clé preload sur les éléments de lien fournit une primitive de récupération déclarative qui traite du cas d'utilisation ci-dessus consistant à lancer une récupération précoce et à séparer la récupération de l'exécution des ressources. En tant que tel, le mot clé de préchargement sert de primitive de bas niveau qui permet aux applications de créer des comportements personnalisés de chargement et d'exécution des ressources sans masquer les ressources de l'agent utilisateur et sans pénalités de récupération de ressources retardées.
Par exemple, l'application peut utiliser le mot clé preload pour lancer une extraction précoce, de haute priorité et sans blocage de rendu d'une ressource CSS qui peut ensuite être appliquée par l'application au moment approprié:
<!-- 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>
Voici un aperçu vraiment approfondi du W3c: https://w3c.github.io/preload/
Mais si vous prévoyez de l'utiliser, faites attention au fait que la prise en charge du navigateur n'est pas terrible. Le support global du navigateur est à 82%.
Voici la liste complète: http://caniuse.com/#search=preload
Développeurs Google suggère rel="preload" à utiliser pour demander des polices plus tôt afin qu'elles soient disponibles lorsque le CSSOM est prêt.
Le chargement paresseux des polices comporte une implication cachée importante qui peut retarder le rendu du texte: le navigateur doit construire l'arborescence de rendu, qui dépend des arbres DOM et CSSOM, avant de savoir de quelles ressources de police il a besoin pour rendre le texte. Par conséquent, les demandes de police sont retardées bien après d'autres ressources critiques et le navigateur peut être bloqué pour le rendu du texte jusqu'à ce que la ressource soit récupérée.
Utilisé comme:
<link rel="preload" href="/fonts/my-font.woff2" as="font">
<link rel="stylesheet" href="/styles.min.css">
Notez également:
Tous les navigateurs ne prennent pas en charge
<link rel="preload">, et dans ces navigateurs, sera simplement ignoré. Mais chaque navigateur qui prend en charge le préchargement prend également en charge WOFF2, c'est donc toujours le format que vous devez précharger.