Haben Sie schon einmal den Browser über eine wichtige Schriftart, ein wichtiges Script oder eine andere Ressource informieren wollen, die für die 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 Entwurfsstandard, der im Rahmen der Veröffentlichung von Chrome 50 ausgeliefert 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. Diese zusätzlichen Informationen sorgen dafür, dass der Browser die entsprechenden Anfrageheader und die Anfragepriorität festlegt und alle relevanten Content Security Policy-Richtlinien anwendet, die für den richtigen Ressourcenkontext gelten.
Weitere Informationen
Yoav Weiss hat einen umfassenden Leitfaden zur Verwendung von <link rel="preload"> verfasst. Wenn Sie neugierig sind und die Funktion auf Ihren eigenen Seiten verwenden möchten, lesen Sie den Artikel, 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.