Wollten Sie den Browser schon einmal über eine wichtige Schriftart, ein Skript oder eine andere Ressource informieren, die von der Seite benötigt wird, ohne das onload-Ereignis der Seite zu verzögern? Mit <link rel="preload"> können Webentwickler genau das tun. Dazu verwenden sie eine vertraute HTML-Element-Syntax mit einigen wichtigen Attributen, um das genaue Verhalten zu bestimmen. Es ist ein Standardentwurf, der im Rahmen der Version von Chrome 50 veröffentlicht wird.
Über <link rel="preload"> geladene Ressourcen werden lokal im Browser gespeichert und sind inaktiv, bis sie im DOM, in JavaScript oder in CSS referenziert werden. Hier ist beispielsweise ein potenzieller Anwendungsfall, bei dem eine Scriptdatei vorab geladen, aber nicht sofort ausgeführt wird, wie es der Fall wäre, wenn sie über ein <script>-Tag in das DOM eingefügt würde.
<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>
Was ist hier los? Das in diesem Beispiel verwendete href-Attribut sollte Webentwicklern bekannt sein, da es das Standardattribut ist, mit dem die URL einer verknüpften Ressource angegeben wird.
Das as-Attribut ist Ihnen wahrscheinlich neu. Es wird im Kontext eines <link>-Elements verwendet, um dem Browser mehr Kontext zum Ziel der Preloading-Anfrage zu geben. Durch diese zusätzlichen Informationen wird sichergestellt, dass der Browser geeignete Anfrageheader und die Anfragepriorität festlegt sowie alle relevanten Content Security Policy-Anweisungen anwendet, die für den richtigen Ressourcenkontext vorhanden sind.
Weitere Informationen
Yoav Weiss hat einen umfassenden Leitfaden zur Verwendung von <link rel="preload"> verfasst. Wenn Sie ihn auf Ihren eigenen Seiten einsetzen möchten, empfehle ich Ihnen, seinen Artikel zu lesen, um mehr über die Vorteile und kreativen Anwendungsfälle zu erfahren.
Viele Grüße<link rel="subresource">
<link rel="preload"> ersetzt <link rel="subresource">, das erhebliche Fehler und Nachteile aufweist und nie in anderen Browsern als Chrome implementiert wurde. Daher wird in Chrome 50 die Unterstützung für <link rel="subresource"> entfernt.