rel="modulepreload"

Baseline 2023
Newly available

Since September 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Das modulepreload Schlüsselwort für das rel Attribut des <link> Elements bietet eine deklarative Methode, um ein Modul-Skript vorab abzurufen, zu parsen, zu kompilieren und es in der Modulkarte des Dokuments zu speichern, damit es später ausgeführt werden kann.

Vorladen ermöglicht es Modulen und ihren Abhängigkeiten, frühzeitig heruntergeladen zu werden, und kann die gesamte Download- und Verarbeitungszeit erheblich verkürzen. Dies liegt daran, dass Seiten Module parallel laden können, anstatt sie sequentiell zu verarbeiten, wenn jedes Modul bearbeitet wird und seine Abhängigkeiten entdeckt werden. Beachten Sie jedoch, dass Sie nicht einfach alles vorladen können! Was Sie vorab laden möchten, muss gegen andere Vorgänge abgewogen werden, die dann möglicherweise behindert werden und die Benutzererfahrung negativ beeinflussen.

Links mit rel="modulepreload" sind ähnlich wie jene mit rel="preload". Der Hauptunterschied besteht darin, dass preload nur die Datei herunterlädt und im Cache speichert, während modulepreload das Modul erfasst, parst, kompiliert und die Ergebnisse in die Modulkarte einträgt, sodass es bereit ist zur Ausführung.

Beim Einsatz von modulepreload ist der Anfragemodus immer cors, und die crossorigin Eigenschaft wird verwendet, um den Anfragemodus für Credentials zu bestimmen. Wenn crossorigin auf anonymous oder "" (Standard) gesetzt ist, dann ist der Credenitals-Modus same-origin, und Benutzer-Credentials wie Cookies und Authentifizierung werden nur für Anfragen mit same-origin gesendet. Wenn crossorigin auf use-credentials gesetzt ist, dann ist der Credentials-Modus include, und Benutzer-Credentials werden sowohl für Einzeleinheits- als auch für Cross-Origin-Anfragen gesendet.

Das as Attribut ist für Links mit rel="modulepreload" optional und standardmäßig auf "script" gesetzt. Es kann auf "script" oder jedes skriptartige Ziel gesetzt werden, wie zum Beispiel "audioworklet", "paintworklet", "serviceworker", "sharedworker" oder "worker". Ein Event namens "error" wird auf dem Element ausgelöst, wenn ein anderes Ziel verwendet wird.

Ein Browser kann sich zusätzlich auch dafür entscheiden, automatisch alle Abhängigkeiten der Modulressource abzurufen. Beachten Sie jedoch, dass dies eine browserspezifische Optimierung ist — der einzige Ansatz, um sicherzustellen, dass alle Browser versuchen, die Abhängigkeiten eines Moduls vorzuladen, besteht darin, sie einzeln anzugeben! Weiterhin werden die Ereignisse load oder error sofort nach Erfolg oder Misserfolg des Ladens der angegebenen Ressourcen ausgelöst. Wenn Abhängigkeiten automatisch abgerufen werden, werden keine zusätzlichen Ereignisse im Haupt-Thread ausgelöst (obwohl Sie möglicherweise zusätzliche Anfragen in einem Service Worker oder auf dem Server überwachen).

Beispiele

Betrachten Sie das basic-modules Beispiel (Live-Version), eingeführt im JavaScript-Module Leitfaden.

Dies hat eine Dateistruktur wie unten gezeigt, bestehend aus dem Top-Level-Modul main.js, das statisch zwei Abhängigkeitsmodule modules/canvas.js und modules/square.js mit der import Anweisung importiert.

index.html
main.js
modules/
    canvas.js
    square.js

Das HTML für das untenstehende Beispiel zeigt, wie main.js in einem <script> Element abgerufen wird. Erst nachdem main.js geladen wurde, entdeckt der Browser die beiden Abhängigkeitsmodule und lädt sie.

html
<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <title>Basic JavaScript module example</title>
    <style>
      canvas {
        border: 1px solid black;
      }
    </style>
    <script type="module" src="main.js"></script>
  </head>
  <body></body>
</html>

Das untenstehende HTML aktualisiert das Beispiel zur Nutzung von <link> Elementen mit rel="modulepreload" für die Hauptdatei und jedes der Abhängigkeitsmodule. Dies ist wesentlich schneller, weil die drei Module alle asynchron und parallel heruntergeladen werden, bevor sie benötigt werden. Zu dem Zeitpunkt, an dem main.js geparst wurde und seine Abhängigkeiten bekannt sind, wurden sie bereits abgerufen und heruntergeladen.

html
<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <title>Basic JavaScript module example</title>
    <link rel="modulepreload" href="main.js" />
    <link rel="modulepreload" href="modules/canvas.js" />
    <link rel="modulepreload" href="modules/square.js" />
    <style>
      canvas {
        border: 1px solid black;
      }
    </style>

    <script type="module" src="main.js"></script>
  </head>
  <body></body>
</html>

Spezifikationen

Specification
HTML
# link-type-modulepreload

Browser-Kompatibilität

Siehe auch