javascript / expert
Snippet
Rechenlast-Auslagerung via Web Workers in Angular
Um die Benutzeroberfläche bei intensiven Berechnungen (z. B. Datenverarbeitung oder Bildmanipulation) reaktionsschnell zu halten, kann Angular Aufgaben an Web Worker auslagern. Dies verschiebt die Berechnung in einen Hintergrund-Thread, verhindert das Einfrieren des Haupt-Threads und gewährleistet eine reibungslose Change Detection und Animationen.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
computeHeavyTask() {if (typeof Worker !== 'undefined') {const worker = new Worker(new URL('./app.worker', import.meta.url));worker.onmessage = ({ data }) => {this.result = data;worker.terminate();};worker.postMessage(this.inputData);} else {// Fallback logic for environments without Web Workers}}
angular
Erklärung
1
new Worker(new URL('./app.worker', import.meta.url));
Erstellt eine neue Web-Worker-Instanz unter Verwendung eines relativen Pfads, kompatibel mit dem Build-System von Angular (Webpack/Esbuild).
2
worker.onmessage = ({ data }) => {
Richtet einen Listener ein, um das berechnete Ergebnis asynchron vom Worker-Thread zu empfangen.
3
worker.postMessage(this.inputData);
Sendet Daten an den Worker-Thread, um die Hintergrundberechnung zu starten.