Avez-vous déjà voulu informer le navigateur d'une police, d'un script ou d'une autre ressource importante dont la page aura besoin, sans retarder l'événement onload de la page ? <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 ébauche de norme fournie avec la version 50 de Chrome.
Les ressources chargées via <link rel="preload"> sont stockées localement dans le navigateur et sont effectivement inactives 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 devrait ê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.
L'attribut as vous est probablement inconnu. 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 effectuée. 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 plus
Yoav Weiss a rédigé le guide ultime 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 d'importants bugs et inconvénients et qui n'a jamais été implémenté dans d'autres navigateurs que Chrome. Par conséquent, Chrome 50 supprime la compatibilité avec <link rel="subresource">.