HTML Web Workers
Zuvor verschob oder beschriftete Drag and Drop DOM-Nutzlasten mit Zeigerevents. Diese Lektion verlässt Zeigergesten und stellt Web Workers vor: JavaScript in einem Hintergrund-Thread, damit eine lange Schleife die UI nicht einfriert. Praxis — erzeugen, messagen, kein DOM im Worker — keine SharedWorker-Flotten oder voller Concurrency-Kurs.
Warum Web Workers in einem HTML-Kurs
Anfänger sehen eine eingefrorene Seite bei einer busy loop auf dem Main-Thread. Worker sind die übliche erste API für Hintergrund-Compute. Nach DnD ist die Trennung anders: Seitenskript besitzt DOM/UI; Worker besitzt schwere Berechnung und spricht nur über Messages.
Direkte Antwort
1) new Worker("worker.js") oder Blob. 2) postMessage von der Seite. 3) Im Worker onmessage, rechnen, postMessage zurück. 4) DOM nur auf der Seite aktualisieren. 5) Kein direkter DOM-Zugriff. 6) http(s) oder Blob bevorzugen.
📊 main thread vs worker
| Topic | Main page script | Dedicated worker |
|---|---|---|
| Typical role | UI, DOM, create Worker | Heavy compute off UI thread |
| Talks via | postMessage / onmessage | postMessage / onmessage |
| Can touch DOM? | Yes | No — return data instead |
| Beginner entry | new Worker(url or Blob) | onmessage + compute + postMessage |
| This course depth | Required | Required (simple round-trip) |
| Not this lesson | Drag-and-drop gestures | SharedWorker / Service Worker products |
Winziges Blob-Worker-Hin-und-zurück
Eine HTML-Datei baut einen Worker aus einem Blob ohne separate worker.js. Die Seite sendet eine Zahl; der Worker liefert eine Summenschleife.
<button id="go" type="button">Run in worker</button>
<pre id="out"></pre>
<script>
const out = document.getElementById("out");
const src =
"onmessage=function(e){" +
"var n=e.data,s=0,i;" +
"for(i=1;i<=n;i++){s+=i;}" +
"postMessage(s);" +
"};";
const blob = new Blob([src], { type: "application/javascript" });
const w = new Worker(URL.createObjectURL(blob));
w.onmessage = function (e) {
out.textContent = "Sum 1..40 = " + e.data;
};
document.getElementById("go").onclick = function () {
out.textContent = "Working…";
w.postMessage(40);
};
</script>
Die Round-Trip-Aufrufe lesen
- Blob + createObjectURL ohne zweite Datei
- new Worker startet Hintergrundskript
- postMessage sendet die Zahl
- Worker rechnet und antwortet
- Seite schreibt ins pre — DOM bleibt Main-Thread
- Anders als DnD: kein draggable
- Demo klein halten
UI bleibt auf dem Main-Thread
Worker liefern Daten; das Seitenskript entscheidet, was der Nutzer sieht. Diese Demo fragt einen String ab; onmessage der Seite aktualisiert den Absatz.
<button id="ask" type="button">Ask worker</button>
<p id="msg">Waiting…</p>
<script>
const msg = document.getElementById("msg");
const src =
"onmessage=function(e){" +
"postMessage('Worker got: ' + e.data);" +
"};";
const w = new Worker(
URL.createObjectURL(new Blob([src], { type: "application/javascript" }))
);
w.onmessage = function (e) {
msg.textContent = e.data;
};
document.getElementById("ask").onclick = function () {
w.postMessage("hello");
};
</script>
Die UI-Ownership-Idee lesen
- Worker echoed nur einen String — kein document
- Seite setzt textContent
- Dieselbe Message-Brücke
- Kein DnD
- Kein Service-Worker-Kurs
- Worker nutzen wenn Arbeit UI-Freeze riskiert
- Als Nächstes: SSE
Wann einen Worker nutzen
- Lange CPU-Schleife: guter Intro-Fit
- Winzige String-Änderung: meist Main-Thread
- Karte in Zone: war DnD
- GPS: war Geolocation
- SharedWorker/Service-Worker-Produkte: jenseits dieses Intros
- Buttons aus dem Worker: nicht erlaubt
Übung — erzeugen, messagen, malen
- Summen-Demo testen.
- 40 ändern.
- Echo-Demo testen.
- Optional worker.js über http(s).
- Satz: DnD mit Zeiger; Worker off-thread per Messages.
- http(s)/Blob bevorzugen.
- Ausblick: SSE.
Typische Fehler
- querySelector im Worker erwarten
- Worker für Mini-Aufgaben
- Mit DnD verwechseln
- Fragile file://-Pfade
- onmessage auf der Seite vergessen
- Blob als einziges Prod-Muster nehmen
- Intro als vollen SharedWorker-Kurs nehmen
Zusammenfassung
- Worker führen JS vom UI-Thread weg aus
- postMessage/onmessage; DOM nur auf der Seite
- Klassische Worker ohne document/window
- Blob für Demos; http(s) für worker.js
- DnD war Zeiger-Verschieben/Beschriften; diese Lektion Hintergrund-Compute + Messages
- Als Nächstes: SSE
🧠 Testen Sie Ihr Wissen
Testen Sie Ihr Wissen
Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen
📝 Anweisungen
- Lesen Sie jede Frage sorgfältig
- Wählen Sie die beste Antwort für jede Frage
- Sie können das Quiz so oft wiederholen, wie Sie möchten
- Ihr Fortschritt wird oben angezeigt