Donner la priorité à vos ressources avec le lien relà l'attention des utilisateurs

Jeff Posnick

Vous est-il déjà arrivé de vouloir signaler au navigateur une police, un script ou toute autre ressource dont la page a besoin, sans retarder le processus onload événement ? <link rel="preload"> permet aux développeurs Web de faire tout simplement à l'aide d'une syntaxe d'élément HTML familière avec quelques attributs clés déterminer le comportement exact. Il s'agit d'un standard (brouillon) concernant la livraison dans le cadre du 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'ils soient référencés dans le DOM, JavaScript ou CSS Par exemple, voici un cas d'utilisation potentiel dans lequel un fichier de script est préchargée, mais pas exécutée immédiatement, comme si elle avait été incluses 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.

L'attribut as est Cette méthode est probablement nouvelle pour vous et est utilisée dans le contexte d'un élément <link>. pour fournir au navigateur plus de contexte destination de de la requête de préchargement. Ces informations supplémentaires permettent de s'assurer le navigateur définit les en-têtes de requête appropriés, la priorité des requêtes les Content Security Policy concernées, qui pourraient être en place pour le bon contexte de ressource.

En savoir (beaucoup) plus

Yoav Weiss a écrit le guide définitif à l'utilisation de <link rel="preload">. Si vous êtes intrigué et souhaitez commencer à l'utiliser sur vos propres pages, je vous recommande de lire son article pour en savoir plus sur les avantages et les cas d'utilisation créatifs.

<link rel="preload"> remplace <link rel="subresource">, qui a bogues et inconvénients importants qui n'a jamais été implémentée dans d'autres navigateurs que Chrome. À ce titre, Chrome 50 supprime la compatibilité avec <link rel="subresource">