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.
Arrivederci <link rel="subresource">
<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">.