Avete mai desiderato comunicare al browser la presenza di caratteri, script o altre risorse importanti che saranno necessari per la pagina, senza ritardare l'evento onload
della pagina? <link rel="preload">
consente agli sviluppatori web di farlo, utilizzando una familiare sintassi degli elementi HTML con alcuni attributi chiave per determinare il comportamento esatto. Si tratta di una bozza standard fornita 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 viene fatto riferimento a queste nel DOM, in JavaScript o CSS. Ad esempio, di seguito è riportato un potenziale caso d'uso in cui un file di script viene
precaricato, ma non eseguito immediatamente, come lo sarebbe 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 dovrebbe
essere familiare agli sviluppatori web, poiché è l'attributo standard utilizzato per specificare
l'URL di qualsiasi risorsa collegata.
Tuttavia, l'attributo as
è
probabilmente nuovo per te e viene utilizzato nel contesto di un elemento <link>
per fornire al browser maggiore contesto sulla
destinazione
della richiesta di precaricamento effettuata. Queste informazioni aggiuntive assicurano che il browser imposti le intestazioni delle richieste e la priorità delle richieste appropriate, nonché che applichi le eventuali direttive dei Criteri di sicurezza del contenuto pertinenti che potrebbero essere in atto per il corretto contesto delle risorse.
Scopri (molto) di più
Yoav Weiss ha scritto
la guida definitiva
all'utilizzo di <link rel="preload">
. Se ti interessa e vuoi iniziare a utilizzarlo
sulle tue pagine, ti consiglio di leggere il suo articolo per saperne di più
sui vantaggi e sui casi d'uso delle creatività.
Arrivederci <link rel="subresource">
<link rel="preload">
sostituisce <link rel="subresource">
, che presenta
bug e svantaggi significativi, e
che non è mai stato implementato in browser diversi da Chrome. Di conseguenza, Chrome 50 rimuove il supporto per <link rel="subresource">
.