Heeft u ooit de browser op de hoogte willen stellen van een belangrijk lettertype, script of andere bron die de pagina nodig heeft, zonder de onload gebeurtenis van de pagina te vertragen? <link rel="preload"> geeft webontwikkelaars de mogelijkheid om precies dat te doen, door gebruik te maken van een bekende HTML-elementsyntaxis met een paar belangrijke attributen om het exacte gedrag te bepalen. Het is een conceptstandaard die wordt geleverd als onderdeel van de Chrome 50-release .
Bronnen die via <link rel="preload"> worden geladen, worden lokaal in de browser opgeslagen en zijn feitelijk inert totdat er naar wordt verwezen in de DOM, JavaScript of CSS. Hier is bijvoorbeeld een mogelijk gebruiksscenario waarin een scriptbestand vooraf wordt geladen, maar niet onmiddellijk wordt uitgevoerd, zoals het geval zou zijn geweest als het via een <script> -tag in de DOM was opgenomen.
<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>
Dus wat gebeurt hier? Het href attribuut dat in dat voorbeeld wordt gebruikt, zou bekend moeten zijn bij webontwikkelaars, omdat het het standaardattribuut is dat wordt gebruikt om de URL van een gekoppelde bron op te geven.
Het as attribuut is echter waarschijnlijk nieuw voor u en wordt gebruikt in de context van een <link> -element om de browser meer context te geven over de bestemming van het preload-verzoek dat wordt gedaan. Deze aanvullende informatie zorgt ervoor dat de browser de juiste verzoekheaders en verzoekprioriteit instelt en alle relevante Content Security Policy- richtlijnen toepast die mogelijk van kracht zijn voor de juiste broncontext.
Leer (veel) meer
Yoav Weiss schreef de definitieve handleiding voor het gebruik van <link rel="preload"> . Als je geïntrigeerd bent en het op je eigen pagina's wilt gaan gebruiken, raad ik je aan zijn artikel te lezen om meer te weten te komen over de voordelen en creatieve gebruiksscenario's.
Tot ziens <link rel="subresource">
<link rel="preload"> vervangt <link rel="subresource"> , dat aanzienlijke bugs en nadelen bevat, en dat nooit in andere browsers dan Chrome is geïmplementeerd. Daarom verwijdert Chrome 50 de ondersteuning voor <link rel="subresource"> .