Ressourcen mit link rel='preload' priorisieren

Jeff Posnick

Wollten Sie den Browser schon einmal über wichtige Schriftart, Skripte oder Ressourcen, die von der Seite benötigt werden, ohne die onload Ereignis? <link rel="preload"> bietet Webentwicklern die Möglichkeit, die Verwendung einer bekannten Syntax für HTML-Elemente mit einigen Schlüsselattributen, um das genaue Verhalten zu bestimmen. Es ist ein Standardentwurf, der als Teil des Version von Chrome 50.

Über <link rel="preload"> geladene Ressourcen werden lokal im Browser gespeichert. und inaktiv sind, bis im DOM, JavaScript oder anderen Preisvergleichsportal. Hier ist ein möglicher Anwendungsfall, bei dem eine Skriptdatei vorab geladen, aber nicht sofort ausgeführt werden, über ein <script>-Tag im DOM enthalten ist.

<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 passiert hier also? Das in diesem Beispiel verwendete href-Attribut sollte kennen, da es sich dabei um das Standardattribut handelt, Die URL einer verknüpften Ressource.

Das Attribut as ist wahrscheinlich neu für Sie, und es wird im Kontext eines <link>-Elements verwendet. um dem Browser mehr Kontext zur Ziel von eine Anfrage zum Vorabladen. Mit diesen zusätzlichen Informationen wird sichergestellt, legt der Browser entsprechende Anfrageheader, die Anfragepriorität fest und alle relevanten Content Security Policy für den richtigen Ressourcenkontext.

Weitere Informationen

Yoav Weiß schrieb: ausführlicher Leitfaden zur Verwendung von <link rel="preload">. Wenn Sie interessiert sind und die App verwenden möchten, auf euren eigenen Seiten findet, solltet ihr seinen Artikel lesen, und kreative Anwendungsfälle.

<link rel="preload"> ersetzt <link rel="subresource">. Dieses Feld hat erhebliche Fehler und Nachteile und die nie in anderen Browsern als Chrome implementiert wurde. Daher ist Chrome 50 keine Unterstützung für <link rel="subresource">