Wie genau funktioniert link rel=”preload”?

Lesezeit: 4 Minuten

Benutzer-Avatar
Ilja Tschernomordik

Die neue Version von Chrome hat Unterstützung für hinzugefügt <link rel="preload">. Sie haben viele Informationen mit Verweisen auf die Originaldokumentation veröffentlicht. Kann jemand eine einfache Erklärung geben, wie es funktioniert und was der Unterschied im Vergleich zu dem Fall ohne ist rel="preload".

Benutzer-Avatar
Sonny Prince

In seiner grundlegendsten Form setzt es die link das hat rel="preload" Im Gegensatz zum Prefetching, bei dem der Browser entscheiden kann, ob es eine gute Idee ist oder nicht, zwingt das Preload den Browser dazu.

===Ein tieferer Blick:===

Hier ist ein Ausschnitt von W3c

Viele Anwendungen erfordern eine genaue Kontrolle darüber, wann Ressourcen abgerufen, verarbeitet und auf das Dokument angewendet werden. Beispielsweise kann das Laden und Verarbeiten einiger Ressourcen durch die Anwendung verzögert werden, um Ressourcenkonflikte zu reduzieren und die Leistung des anfänglichen Ladens zu verbessern. Dieses Verhalten wird normalerweise erreicht, indem der Ressourcenabruf in eine benutzerdefinierte Ressourcenladelogik verschoben wird, die von der Anwendung definiert wird – dh Ressourcenabrufe werden über eingefügte Elemente oder über XMLHttpRequest initiiert, wenn bestimmte Anwendungsbedingungen erfüllt sind.

Es gibt jedoch auch Fälle, in denen einige Ressourcen so früh wie möglich abgerufen werden müssen, deren Verarbeitungs- und Ausführungslogik jedoch anwendungsspezifischen Anforderungen unterliegt – z. B. Abhängigkeitsmanagement, bedingtes Laden, Ordnungsgarantien usw. Derzeit ist es nicht möglich, dieses Verhalten ohne Leistungseinbußen bereitzustellen.

Das Deklarieren einer Ressource über eines der vorhandenen Elemente (z. B. img, script, link) koppelt das Abrufen und Ausführen der Ressource. Dagegen möchte eine Anwendung möglicherweise abrufen, aber die Ausführung der Ressource verzögern, bis eine Bedingung erfüllt ist. Das Abrufen von Ressourcen mit XMLHttpRequest, um das obige Verhalten zu vermeiden, führt zu einer ernsthaften Leistungseinbuße, da Ressourcendeklarationen vor dem DOM des Benutzeragenten und Preload-Parsern verborgen werden. Die Ressourcenabrufe werden nur gesendet, wenn das relevante JavaScript ausgeführt wird, was aufgrund der Fülle von Blockierungsskripts auf den meisten Seiten zu erheblichen Verzögerungen führt und die Anwendungsleistung beeinträchtigt. Das Schlüsselwort preload für Link-Elemente stellt ein deklaratives Abrufelement bereit, das den obigen Anwendungsfall des Einleitens eines frühen Abrufs und des Trennens des Abrufs von der Ressourcenausführung adressiert. Als solches dient das Schlüsselwort preload als Grundelement auf niedriger Ebene, das es Anwendungen ermöglicht, benutzerdefinierte Verhaltensweisen zum Laden und Ausführen von Ressourcen zu erstellen, ohne Ressourcen vor dem Benutzeragenten zu verbergen und Strafen für das verzögerte Abrufen von Ressourcen zu verursachen.

Beispielsweise kann die Anwendung das Schlüsselwort preload verwenden, um einen frühen Abruf einer CSS-Ressource mit hoher Priorität und ohne Rendering-Blockierung zu initiieren, die dann von der Anwendung zu einem geeigneten Zeitpunkt angewendet werden kann:

<!-- preload stylesheet resource via declarative markup -->
<link rel="preload" href="/styles/other.css" as="style">
<!-- or, preload stylesheet resource via JavaScript -->
<script>
var res = document.createElement("link");
res.rel = "preload";
res.as = "style";
res.href = "styles/other.css";
document.head.appendChild(res);
</script>

Hier ist ein wirklich ausführliche Beschreibung aus der W3C-Spezifikation.

Globale Unterstützung ist gut in modernen Browsernbei ~93% (Stand: Juni 2022).

  • Der Browser lädt CSS sowieso, also lädt er nur das vorherige js, zB? Ihm eine höhere Priorität einräumen als anderen?

    – Ilja Tschernomordik

    15. April 2016 um 8:45 Uhr

  • @IlyaChernomordik schließlich wird natürlich alles geladen, setze dies einfach auf die Datei, die du hinzugefügt hast rel="preload" an die Spitze dieser Warteschlange.

    – Sonny Prince

    15. April 2016 um 8:47 Uhr

  • Verstehe nicht wirklich, warum es nicht überall so einfach erklärt wird, sie schreiben stattdessen Tonnen von Zeug 🙂

    – Ilja Tschernomordik

    15. April 2016 um 9:20 Uhr

  • @IlyaChernomordik haha! Ich stimme zu – freut mich, dass ich helfen konnte!

    – Sonny Prince

    15. April 2016 um 9:21 Uhr

  • Es fügt es nicht nur am Anfang der Warteschlange hinzu, sondern bringt es früher in die Warteschlange (und ermöglicht dem Browser daher, früher mit dem Herunterladen zu beginnen). Es ist auch nicht nötig, beim Hinzufügen “vorsichtig” zu sein, es gibt keinen Nachteil – Browser, die dies nicht unterstützen, werden den Link ignorieren, aber Browser, die dies tun, werden davon profitieren. Sie werden ältere Browser nicht kaputt machen, indem Sie neuere unterstützen.

    – El Yobo

    19. Februar 2017 um 22:11 Uhr

Google-Entwickler empfehlen rel="preload" verwendet werden, um Schriftarten früher anzufordern, damit sie verfügbar sind, wenn das CSSOM bereit ist.

Das verzögerte Laden von Schriftarten hat eine wichtige versteckte Implikation, die das Rendern von Text verzögern kann: Der Browser muss den Renderbaum erstellen, der von den DOM- und CSSOM-Bäumen abhängig ist, bevor er weiß, welche Schriftartressourcen er zum Rendern des Textes benötigt. Infolgedessen werden Schriftartanforderungen weit hinter anderen kritischen Ressourcen verzögert, und der Browser kann daran gehindert werden, Text wiederzugeben, bis die Ressource abgerufen ist.

Benutzen als:

<link rel="preload" href="https://stackoverflow.com/fonts/my-font.woff2" as="font">
<link rel="stylesheet" href="http://stackoverflow.com/styles.min.css">

Beachten Sie außerdem:

Nicht alle Browser unterstützen <link rel="preload">, und in diesen Browsern, werden einfach ignoriert. Aber jeder Browser, der das Vorladen unterstützt, unterstützt auch WOFF2, also ist das immer das Format, das Sie vorladen sollten.

1180010cookie-checkWie genau funktioniert link rel=”preload”?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy