HTML5 Web Worker

In diesem Tutorial erfahren Sie, wie Sie mit HTML5 Web Worker JavaScript-Code im Hintergrund ausführen.

Was ist Web Worker?

Wenn Sie versuchen, intensive Aufgaben mit JavaScript zu erledigen, die zeitaufwändig sind und umfangreiche Berechnungen erfordern, friert der Browser die Webseite ein und verhindert, dass der Benutzer etwas tut, bis der Auftrag abgeschlossen ist. Dies geschieht, weil JavaScript-Code immer im Vordergrund ausgeführt wird.

HTML5 führt eine neue Technologie namens Web Worker ein , die speziell für die Hintergrundarbeit unabhängig von anderen Skripten der Benutzeroberfläche entwickelt wurde, ohne die Leistung der Seite zu beeinträchtigen. Im Gegensatz zu normalen JavaScript-Vorgängen unterbricht der Web Worker den Benutzer nicht und die Webseite reagiert weiterhin, da die Aufgaben im Hintergrund ausgeführt werden.

Tipp: Die Web Worker-Funktion von HTML5 wird in allen wichtigen modernen Webbrowsern wie Firefox, Chrome, Opera, Safari und Internet Explorer 10 und höher unterstützt.

Erstellen Sie eine Web Worker-Datei

Die einfachste Verwendung von Web-Workern ist die Ausführung einer zeitaufwändigen Aufgabe. Hier erstellen wir eine einfache JavaScript-Aufgabe, die von null bis 100.000 zählt.

Erstellen Sie eine externe JavaScript-Datei mit dem Namen "worker.js" und geben Sie den folgenden Code ein.

Beispiel

var i = 0;
function countNumbers() {
    if(i < 100000) {
        i = i + 1;
        postMessage(i);
    }
 
    // Wait for sometime before running this script again
    setTimeout("countNumbers()", 500);
}
countNumbers();

Hinweis: Web-Worker haben keinen Zugriff auf das DOM. Das bedeutet, dass Sie auf keine DOM-Elemente im JavaScript-Code zugreifen können, die Sie mit Web Workern ausführen möchten.

Tipp: Mit der postMessage()Methode des Worker-Objekts wird eine Nachricht (wie die Zahlen im obigen Beispiel) aus der Web-Worker-Datei an die Webseite zurückgesendet.

Arbeiten im Hintergrund mit Web Worker

Nachdem wir unsere Web-Worker-Datei erstellt haben. In diesem Abschnitt initiieren wir den Web Worker aus einem HTML-Dokument, das den Code in der Datei "worker.js" im Hintergrund ausführt und das Ergebnis schrittweise auf der Webseite anzeigt. Mal sehen, wie es funktioniert:

Beispiel

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Using Web Worker</title>
<script>
    if(window.Worker) {
        // Create a new web worker
        var worker = new Worker("worker.js");
        
        // Fire onMessage event handler
        worker.onmessage = function(event) {
            document.getElementById("result").innerHTML = event.data;
        };
    } else {
        alert("Sorry, your browser do not support web worker.");
    }
</script>
</head>
<body>
    <div id="result">
        <!--Received messages will be inserted here-->
    </div>
</body>
</html>

Beispiel erklärt:

Der JavaScript-Code im obigen Beispiel hat folgende Bedeutung:

Die Anweisung var worker = new Worker ("worker.js"); Erstellt ein neues Web-Worker-Objekt, mit dem mit dem Web-Worker kommuniziert wird.
Wenn der Worker eine Nachricht veröffentlicht, wird der Ereignishandler onmessage ( Zeile Nr. 14 ) ausgelöst , mit dem der Code Nachrichten vom Webworker empfangen kann.
Das Element event.data enthält die vom Webworker gesendete Nachricht.

Hinweis: Der von einem Worker ausgeführte Code wird immer in einer separaten JavaScript-Datei gespeichert. Dies soll verhindern, dass Webentwickler den Webworker-Code schreiben, der versucht, globale Variablen zu verwenden oder direkt auf die Elemente auf der Webseite zuzugreifen.

Beenden Sie einen Web Worker

Bisher haben Sie gelernt, wie Sie Worker erstellen und Nachrichten empfangen. Sie können einen laufenden Worker jedoch auch mitten in der Ausführung beenden.

Das folgende Beispiel zeigt Ihnen, wie Sie Worker von einer Webseite aus starten und stoppen, indem Sie auf die HTML-Schaltflächen klicken. Es verwendet dieselbe JavaScript-Datei 'worker.js', die wir im vorherigen Beispiel verwendet haben, um die Zahlen von null bis 100000 zu zählen. Probieren wir es aus:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Start/Stop Web Worker</title>
<script>
    // Set up global variable
    var worker;
    
    function startWorker() {
        // Initialize web worker
        worker = new Worker("worker.js");
        
        // Run update function, when we get a message from worker
        worker.onmessage = update;
        
        // Tell worker to get started
        worker.postMessage("start");
    }
    
    function update(event) {
        // Update the page with current message from worker
        document.getElementById("result").innerHTML = event.data;
    }
    
    function stopWorker() {
        // Stop the worker
        worker.terminate();
    }
</script>
</head>
<body>
    <h1>Web Worker Demo</h1>
    <button onclick="startWorker();" type="button">Start web worker</button>
    <button type="button" onclick="stopWorker();">Stop web worker</button>
    <div id="result">
        <!--Received messages will be inserted here-->
    </div>
</body>
</html>

Tipp: Verwenden Sie die Web-Worker, um nur schwere JavaScript-Aufgaben auszuführen, die die Benutzeroberflächenskripte nicht unterbrechen (dh Skripte, die auf Klicks oder andere Benutzerinteraktionen reagieren). Es wird nicht empfohlen, Web-Worker für kurze Aufgaben zu verwenden.