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 Möglichkeit, ein Modul-Skript im Voraus abzurufen, zu parsen und zu kompilieren und es in der Modulkarte des Dokuments für die spätere Ausführung zu speichern.

Preloading ermöglicht es, Module und deren Abhängigkeiten frühzeitig herunterzuladen und kann auch die Gesamtzeit für den Download und die Verarbeitung erheblich reduzieren. Dies liegt daran, dass es Seiten erlaubt, Module parallel herunterzuladen, anstatt sie nacheinander zu verarbeiten, wenn jedes Modul bearbeitet wird und seine Abhängigkeiten entdeckt werden. Beachten Sie jedoch, dass Sie nicht einfach alles preloaden können! Was Sie preloaden, muss gegen andere Operationen abgewogen werden, die dadurch möglicherweise beeinträchtigt werden und die Benutzererfahrung negativ beeinflussen.

Links mit rel="modulepreload" sind ähnlich wie solche mit rel="preload". Der Hauptunterschied besteht darin, dass preload nur die Datei herunterlädt und im Cache speichert, während modulepreload das Modul erhält, es parst und kompiliert und die Ergebnisse in die Modulkarte einfügt, sodass es ausführungsbereit ist.

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

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

Ein Browser kann zusätzlich auch automatisch alle Abhängigkeiten der Modulressource abrufen. Beachten Sie jedoch, dass dies eine browser-spezifische Optimierung ist — der einzige Ansatz, um sicherzustellen, dass alle Browser versuchen, die Abhängigkeiten eines Moduls vorzuladen, besteht darin, sie einzeln anzugeben! Darüber hinaus werden die Events namens load oder error unmittelbar nach Erfolg oder Misserfolg des Ladens der spezifizierten Ressourcen ausgelöst. Wenn Abhängigkeiten automatisch abgerufen werden, werden im Hauptthread keine zusätzlichen Ereignisse ausgelöst (obwohl Sie möglicherweise zusätzliche Anfragen in einem Service Worker oder auf dem Server überwachen können).

Beispiele

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

Dies hat eine Dateistruktur, wie unten gezeigt, die aus dem obersten Modul main.js besteht, das statisch zwei Abhängigkeits-Module 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 Beispiel unten zeigt, wie main.js in einem <script>-Element abgerufen wird. Erst nachdem main.js geladen wurde, entdeckt der Browser die zwei Abhängigkeits-Module 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 unten stehende HTML aktualisiert das Beispiel, indem <link>-Elemente mit rel="modulepreload" für die Hauptdatei und jede der Abhängigkeits-Module verwendet werden. Dies ist wesentlich schneller, da alle drei Module asynchron und parallel gestartet werden, bevor sie benötigt werden. Wenn main.js geparst ist und seine Abhängigkeiten bekannt sind, sind diese 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