Hai mai desiderato di comunicare al browser un carattere, uno script o un'altra risorsa importante che sarà necessaria per la pagina, senza ritardare l'evento onload della pagina? <link rel="preload"> consente agli sviluppatori web di farlo, utilizzando una sintassi degli elementi HTML familiare con alcuni attributi chiave per determinare il comportamento esatto. Si tratta di uno standard di bozza incluso nella release di Chrome 50.
Le risorse caricate tramite <link rel="preload"> vengono archiviate localmente nel browser e sono effettivamente inerti fino a quando non viene fatto riferimento nel DOM, JavaScript o CSS. Ad esempio, ecco un potenziale caso d'uso in cui un file di script viene precaricato, ma non eseguito immediatamente, come 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 qui? L'attributo href utilizzato in quell'esempio dovrebbe essere familiare agli sviluppatori web, in quanto è l'attributo standard utilizzato per specificare l'URL di qualsiasi risorsa collegata.
Tuttavia, l'attributo as è probabilmente nuovo e viene utilizzato nel contesto di un elemento <link> per fornire al browser più contesto sulla destinazione della richiesta di precaricamento in corso. Queste informazioni aggiuntive assicurano che il browser imposterà le intestazioni e la priorità delle richieste appropriate e applicherà le eventuali istruzioni pertinenti relative ai criteri di sicurezza del contenuto che potrebbero essere applicate per il corretto contesto delle risorse.
Scopri (molto) di più
Yoav Weiss ha scritto
la guida definitiva
per l'utilizzo di <link rel="preload">. Se ti incuriosisce e vuoi iniziare a usarlo sulle tue pagine, ti consiglio di leggere il suo articolo per saperne di più sui vantaggi e sui casi d'uso creativi.
A presto, <link rel="subresource">
<link rel="preload"> sostituisce <link rel="subresource">, che presenta bug e svantaggi significativi e che non è mai stato implementato in altri browser diversi da Chrome. Pertanto, Chrome 50 rimuove il supporto per <link rel="subresource">.