rel="modulepreload" HTML-Attributwert
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit September 2023 browserübergreifend verfügbar.
Das modulepreload Schlüsselwort für das rel-Attribut des <link>-Elements bietet eine deklarative Möglichkeit, ein Modulskript vorzeitig zu laden, zu parsen, zu kompilieren und im Modul-Map des Dokuments für die spätere Ausführung zu speichern.
Durch das Vorladen können Module und ihre Abhängigkeiten frühzeitig heruntergeladen werden, was die gesamte Download- und Verarbeitungszeit erheblich reduzieren kann. Dies liegt daran, dass es Seiten ermöglicht, Module parallel zu laden, anstatt sie hintereinander zu verarbeiten, während ihre Abhängigkeiten entdeckt werden. Beachten Sie jedoch, dass Sie nicht einfach alles vorladen können! Was Sie zum Vorladen auswählen, muss gegen andere Operationen abgewogen werden, die möglicherweise vernachlässigt werden, was die Benutzererfahrung negativ beeinflussen könnte.
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, parst, kompiliert und das Ergebnis in die Modul-Map setzt, sodass es bereit ist zur Ausführung.
Beim Verwenden von modulepreload ist der Abrufmodus immer cors, und die crossorigin-Eigenschaft wird verwendet, um den Anforderungs-Credential-Modus zu bestimmen.
Wenn crossorigin auf anonymous oder "" (Standard) gesetzt ist, ist der Credentials-Modus same-origin, und Benutzeranmeldeinformationen wie Cookies und Authentifizierung werden nur für Anfragen mit demselben Ursprung gesendet.
Wenn crossorigin auf use-credentials gesetzt ist, dann ist der Credentials-Modus include, und Benutzeranmeldeinformationen für sowohl Single- als auch Cross-Origin-Anfragen werden gesendet.
Das as-Attribut ist optional für Links mit rel="modulepreload" und hat standardmäßig den Wert "script".
Es kann auf "script", "style", "json", "text" oder ein beliebiges skriptähnliches Ziel wie "audioworklet", "paintworklet", "serviceworker", "sharedworker" oder "worker" gesetzt werden. Die vollständige Liste der zulässigen Werte ist in der HTML-Spezifikation unter module preload destination mapping definiert. Für die Liste der skriptähnlichen Ziele siehe den Fetch-Spezifikation.
Ein Event namens "error" wird auf dem Element ausgelöst, wenn ein anderes Ziel verwendet wird.
Ein Browser kann zusätzlich auch entscheiden, automatisch alle Abhängigkeiten der Modulressource abzurufen.
Beachten Sie jedoch, dass dies eine browserspezifische Optimierung ist — die einzige Methode, um sicherzustellen, dass alle Browser versuchen, die Abhängigkeiten eines Moduls vorzuladen, besteht darin, sie einzeln anzugeben!
Darüber hinaus werden Ereignisse mit den Namen load oder error sofort nach Erfolg oder Scheitern des Ladens der spezifizierten Ressourcen ausgelöst.
Wenn Abhängigkeiten automatisch abgerufen werden, werden keine zusätzlichen Ereignisse im Hauptthread 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-Module Leitfaden vorgestellt wird.
Dieses Beispiel hat eine Dateistruktur wie unten gezeigt, die aus dem obersten Modul main.js besteht, das zwei Abhängigkeitsmodule modules/canvas.js und modules/square.js mithilfe der import-Anweisung statisch importiert.
index.html
main.js
modules/
canvas.js
square.js
Das HTML des unten stehenden Beispiels zeigt, wie main.js in einem <script>-Element abgerufen wird.
Erst nachdem main.js geladen wurde, entdeckt und lädt der Browser die beiden Abhängigkeitsmodule.
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<title>Basic JavaScript module example</title>
<script type="module" src="main.js"></script>
</head>
<body></body>
</html>
Das HTML unten aktualisiert das Beispiel, um <link>-Elemente mit rel="modulepreload" für die Hauptdatei und jedes der Abhängigkeitsmodule zu verwenden.
Dies ist viel schneller, da die drei Module alle asynchron und parallel heruntergeladen werden, bevor sie benötigt werden.
Sobald main.js geparst und seine Abhängigkeiten bekannt sind, wurden sie bereits abgerufen und heruntergeladen.
<!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" />
<script type="module" src="main.js"></script>
</head>
<body></body>
</html>
Spezifikationen
| Spezifikation |
|---|
| HTML # link-type-modulepreload |
Browser-Kompatibilität
Siehe auch
- Spekulatives Laden für einen Vergleich von
<link rel="modulepreload">und anderen ähnlichen Leistungsverbesserungsmerkmalen. - Preloading modules auf web.dev