Avez-vous déjà souhaité informer le navigateur d'une police, d'un script ou d'une autre ressource importants qui seront nécessaires à la page, sans retarder l'événement onload de celle-ci ? <link rel="preload"> permet aux développeurs Web de le faire à l'aide d'une syntaxe d'élément HTML familière avec quelques attributs clés pour déterminer le comportement exact. Il s'agit d'une version brouillon qui fait partie de la version de Chrome 50.
Les ressources chargées via <link rel="preload"> sont stockées localement dans le navigateur et sont effectivement inertes jusqu'à ce qu'elles soient référencées dans le DOM, JavaScript ou CSS. Par exemple, voici un cas d'utilisation potentiel dans lequel un fichier de script est préchargé, mais ne s'exécute pas immédiatement, comme s'il avait été inclus via une balise <script> dans le DOM.
<link rel="preload" href="used-later.js" as="script">
<!-- ...other HTML... -->
<script>
// Later on, after some condition has been met, we run the preloaded
// JavaScript by inserting a <script> tag into the DOM.
var usedLaterScript = document.createElement('script');
usedLaterScript.src = 'used-later.js';
document.body.appendChild(usedLaterScript)
</script>
Que se passe-t-il ici ? L'attribut href utilisé dans cet exemple doit être familier aux développeurs Web, car il s'agit de l'attribut standard utilisé pour spécifier l'URL de toute ressource associée.
Cependant, l'attribut as est probablement nouveau pour vous. Il est utilisé dans le contexte d'un élément <link> pour fournir au navigateur plus de contexte sur la destination de la requête de préchargement en cours. Ces informations supplémentaires garantissent que le navigateur définit les en-têtes de requête appropriés et la priorité des requêtes, et applique toutes les directives Content Security Policy pertinentes éventuellement en place pour le contexte de ressource approprié.
En savoir (beaucoup) plus
Yoav Weiss a rédigé le guide définitif sur l'utilisation de <link rel="preload">. Si cela vous intrigue et que vous souhaitez commencer à l'utiliser sur vos propres pages, je vous recommande de lire son article pour en savoir plus sur ses avantages et ses cas d'utilisation créatifs.
Au revoir <link rel="subresource">
<link rel="preload"> remplace <link rel="subresource">, qui présente des bugs et des inconvénients importants et qui n'a jamais été implémenté dans des navigateurs autres que Chrome. Par conséquent, Chrome 50 supprime la compatibilité avec <link rel="subresource">.