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 Stichwort für das rel Attribut des <link>-Elements bietet eine deklarative Möglichkeit, ein Modulskript vorab abzurufen, zu parsen und zu kompilieren, und es in der Modul-Map des Dokuments für die spätere Ausführung zu speichern.
Preloading ermöglicht es, Module und deren Abhängigkeiten frühzeitig herunterzuladen, was die Gesamtzeit für den Download und die Verarbeitung erheblich reduzieren kann. Dies liegt daran, dass es Seiten erlaubt, Module parallel anstatt sequentiell zu laden, also nicht erst dann, wenn jedes Modul verarbeitet wurde und dessen Abhängigkeiten entdeckt worden sind. Beachten Sie jedoch, dass Sie nicht einfach alles preloaden können! Was Sie preloaden möchten, muss gegen andere Vorgänge abgewogen werden, die dann möglicherweise verhungern und die Benutzererfahrung negativ beeinflussen könnten.
Links mit rel="modulepreload" sind denjenigen mit rel="preload" ähnlich. Der Hauptunterschied besteht darin, dass preload nur die Datei herunterlädt und im Cache speichert, während modulepreload das Modul abruft, parst und kompiliert und die Ergebnisse in die Modul-Map einfügt, sodass es bereit zur Ausführung ist.
Beim Verwenden von modulepreload ist der Modus des Abrufauftrags immer cors, und das crossorigin Attribut wird verwendet, um den Anmeldemodus der Anfrage zu bestimmen. Wenn crossorigin auf anonymous oder "" (Standard) gesetzt ist, dann ist der Anmeldemodus same-origin, und Benutzeranmeldungen wie Cookies und Authentifizierung werden nur für Anfragen mit same-origin gesendet. Wenn crossorigin auf use-credentials gesetzt ist, dann ist der Anmeldemodus include, und Benutzeranmeldungen werden für Anfragen sowohl gleicher als auch unterschiedlicher Herkunft gesendet.
Das as Attribut ist optional für Links mit rel="modulepreload", und standardmäßig auf "script" gesetzt. Es kann auf "script", "style", "json" oder jedes skriptähnliche Ziel, wie "audioworklet", "paintworklet", "serviceworker", "sharedworker" oder "worker" gesetzt werden. Ein Event mit dem Namen "error" wird auf dem Element ausgelöst, wenn ein anderes Ziel verwendet wird.
Ein Browser kann darüber hinaus auch wählen, alle Abhängigkeiten der Modulressource automatisch abzurufen. Beachten Sie jedoch, dass dies eine browserspezifische Optimierung ist – der einzige Ansatz, um sicherzustellen, dass alle Browser versuchen, die Abhängigkeiten eines Moduls vorab zu laden, ist, sie individuell anzugeben! Weiterhin werden die Events load oder error sofort nach Erfolg oder Fehlschlag des Ladens der spezifizierten Ressourcen ausgelöst. Wenn Abhängigkeiten automatisch abgerufen werden, werden keine zusätzlichen Events im Hauptthread ausgelöst (obwohl Sie zusätzliche Anfragen in einem Service Worker oder auf dem Server überwachen könnten).
Beispiele
Betrachten Sie das basic-modules Beispiel (Live-Version), eingeführt im JavaScript-Module Leitfaden.
Dieses hat eine Dateistruktur wie unten gezeigt, bestehend aus dem Modul der obersten Ebene main.js, welches zwei Abhängigkeitsmodule statisch importiert: modules/canvas.js und modules/square.js unter Verwendung des import Befehls.
index.html
main.js
modules/
canvas.js
square.js
Das HTML für das unten stehende Beispiel zeigt, wie main.js in einem <script> Element abgerufen wird. Erst nachdem main.js geladen wurde, entdeckt und holt 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 unten stehende HTML 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 zu laden beginnen, bevor sie benötigt werden. Wenn main.js geparst wurde 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 Leistungsverbesserungsfunktionen. - Preloading modules auf web.dev