Assegnare la priorità alle tue risorse con link rel=#39;preload'

Jeff Posnick

Hai mai desiderato di comunicare al browser la presenza di un carattere, uno script o risorse che saranno necessarie per la pagina, senza ritardare il caricamento onload evento? <link rel="preload"> offre agli sviluppatori web la possibilità di che, utilizzando una nota sintassi degli elementi HTML con alcuni attributi chiave determinare il comportamento esatto. È un bozza standard che prevede la spedizione nell'ambito della Release di Chrome 50.

Le risorse caricate tramite <link rel="preload"> vengono archiviate localmente nel browser e sono effettivamente inerti finché non vi viene fatto riferimento nel DOM, in JavaScript CSS. Ad esempio, ecco un potenziale caso d'uso in cui un file di script precaricato, ma non eseguito immediatamente, come avverrebbe se fosse incluso tramite un tag <script> nel 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>

Che cosa sta succedendo? L'attributo href utilizzato in questo esempio deve gli sviluppatori web, poiché si tratta dell'attributo standard usato per specificare l'URL di qualsiasi risorsa collegata.

L'attributo as è è probabilmente nuovo per te ed è utilizzato nel contesto di un elemento <link> per fornire al browser più contesto sulle destinazione di di una richiesta di precaricamento. Queste informazioni aggiuntive garantiscono che il browser imposterà le intestazioni e la priorità delle richieste appropriate, oltre a Qualsiasi Criterio di sicurezza del contenuto pertinente esistenti per il corretto contesto della risorsa.

Scopri (molto) di più

Yoav Weiss ha scritto la guida definitiva all'utilizzo di <link rel="preload">. Se ti incuriosisce e vuoi iniziare a utilizzarlo sulle tue pagine, ti consiglio di leggere il suo articolo per saperne di più vantaggi e casi d'uso creativi.

<link rel="preload"> ha la precedenza su <link rel="subresource">, che è bug e svantaggi significativi. che non è mai stata implementata in browser diversi da Chrome. Di conseguenza, Chrome 50 rimuove il supporto di <link rel="subresource">.