Web-Worker

In Internet Explorer 10 und Windows Store-Apps mit JavaScript werden jetzt auch Web-Worker unterstützt. Die Web-Worker-API definiert eine Möglichkeit zum Ausführen von Skripts im Hintergrund. Web-Worker sind in der Web-Worker-Spezifikation des World Wide Web Consortium (W3C) definiert.

Browser waren in der Regel Singlethread-Steuerelemente und zwangen das Skript in der Anwendung zur Ausführung in einem einzigen UI-Thread. Obwohl Sie mit DOM-Ereignissen und der setTimeout -API den Anschein erwecken können, dass mehrere Dinge gleichzeitig geschehen, braucht es nur eine rechenintensive Aufgabe, um die Benutzererfahrung abrupt zu unterbrechen.

Die Web-Worker-API bietet eine Möglichkeit für Autoren von Webanwendungen, Hintergrundskripts zu erzeugen, die parallel mit der Hauptseite ausgeführt werden. Sie können mehrere Threads gleichzeitig erzeugen, die für langfristige Aufgaben verwendet werden. Ein neues Workerobjekt benötigt eine .js-Datei, die über eine asynchrone Anfrage an den Server enthalten ist.


var myWorker = new Worker('worker.js');

Jegliche Kommunikation mit dem Workerthread wird über Nachrichten verwaltet. Der Hostworker und das Workerskript können Nachrichten mit postMessage senden und mit dem onmessage-Ereignis auf Antworten warten. Der Inhalt der Nachricht wird als data-Eigenschaft des Ereignisses gesendet.

Im folgenden Beispiel wird ein Workerthread erstellt und auf eine Nachricht gewartet.


var hello = new Worker('hello.js');
hello.onmessage = function(e) {
  alert(e.data);
};

Der Workerthread sendet die anzuzeigende Nachricht.


postMessage('Hello world!');

Bilaterale Kommunikation mit Web-Workern

Um eine bilaterale Kommunikation einzurichten, müssen die Hauptseite und der Workerthread das onmessage-Ereignis überwachen. Im folgenden Beispiel wird die Nachricht vom Workerthread nach einer angegebenen Verzögerung zurückgegeben.

Zunächst wird der Workerthread vom Skript erstellt.


var echo = new Worker('echo.js'); 
echo.onmessage = function(e) {
  alert(e.data); 
}

Der Nachrichtentext und die Zeitüberschreitungswerte werden in einem Formular angegeben. Wenn der Benutzer auf die Schaltfläche zum Senden klickt, übergibt das Skript zwei Informationselemente in einem JavaScript-Objektliteral an den Worker. Um zu verhindern, dass Formularwerte von der Seite in einer neuen HTTP-Anforderung gesendet werden, ruft der Ereignishandler auch preventDefault für das Ereignisobjekt auf. Beachten Sie, dass das Senden von Verweisen auf DOM-Objekte in einem Workerthread nicht möglich ist. Web-Worker weisen einige Einschränkungen hinsichtlich der Datenzugriffsmöglichkeiten auf. Zulässig sind nur JavaScript-Grundtypen wie Object- oder String-Werte.


<script>
window.onload = function() {
  var echoForm = document.getElementById('echoForm'); 
  echoForm.addEventListener('submit', function(e) {
    echo.postMessage({
      message : e.target.message.value,
      timeout : e.target.timeout.value
    }); 
    e.preventDefault();
  }, false); 
  }
</script>
<form id="echoForm">
  <p>Echo the following message after a delay.</p>
  <input type="text" name="message" value="Input message here."/><br/>
  <input type="number" name="timeout" max="10" value="2"/> seconds.<br/>
  <button type="submit">Send Message</button>
</form>


Anschließend überwacht der Worker die Nachricht und gibt diese nach dem angegebenen Zeitüberschreitungsintervall zurück.


onmessage = function(e) 
{
  setTimeout(function() 
  {
    postMessage(e.data.message);
  }, 
  e.data.timeout * 1000);
}

In Internet Explorer 10 und Windows Store-Apps mit JavaScript unterstützt die Web-Worker-API die folgenden Methoden.

MethodeBeschreibung

void close();

Beendet den Workerthread.

void importScripts(inDOMString... urls);

Importiert eine durch Kommas getrennte Liste mit zusätzlichen JavaScript-Dateien.

void postMessage(in sämtlichen Daten);

Sendet eine Nachricht an einen oder von einem Workerthread.

 

Internet Explorer 10 und Windows Store-Apps mit JavaScript unterstützen die folgenden Attribute der Web-Worker-API:

AttributTypBeschreibung
locationWorkerLocationStellt eine absolute URL einschließlich der Komponenten protocol, host, port, hostname, pathname, search und hash dar.
navigatorWorkerNavigatorStellt die Identität und den onLine-Zustand des Benutzer-Agenten-Clients dar.
selfWorkerGlobalScopeDer Workerbereich des WorkerLocation- und des WorkerNavigator-Objekts.

 

Internet Explorer 10 und Windows Store-Apps mit JavaScript unterstützen die folgenden Ereignisse der Web-Worker-API:

EreignisBeschreibung

onerror

Laufzeitfehler.

onmessage

Nachrichtendaten empfangen.

 

WindowTimers

Die Web-Worker-API unterstützt auch die aktualisierte  WindowTimers-Funktion von HTML5.

MethodeBeschreibung

void clearInterval(inlonghandle);

Bricht eine Zeitüberschreitung ab, die von einem Handle identifiziert wurde.

void clearTimeout(inlonghandle);

Bricht eine Zeitüberschreitung ab, die von einem Handle identifiziert wurde.

long setInterval(inanyhandler, inoptionalanytimeout, inany... args);

Plant die wiederholte Ausführung einer Zeitüberschreitung nach Ablauf der angegebenen Anzahl an Millisekunden. Beachten Sie, dass zusätzliche Elemente jetzt direkt an den Handler übergeben werden können. Wenn der Handler eine DOMString ist, wird er als JavaScript kompiliert. Gibt einen Handle an die Zeitüberschreitung zurück. Verwenden Sie clearInterval zum Löschen.

long setTimeout(inanyhandler, in optional any timeout, in any... args);

Plant die Ausführung einer Zeitüberschreitung nach Ablauf der angegebenen Anzahl an Millisekunden. Beachten Sie, dass zusätzliche Elemente jetzt direkt an den Handler übergeben werden können. Wenn der Handler ein DOMString ist, wird er als JavaScript kompiliert. Gibt einen Handle an die Zeitüberschreitung zurück. Verwenden Sie clearTimeout zum Löschen.

 

Updates für Web-Worker in IE10 Platform Preview Build 4

Internet Explorer 10 Platform Preview Build 4 begrenzt die Anzahl der Web-Worker auf 25 pro Prozess. Sie können auch eine höhere Anzahl an Workern erstellen. Es sind jedoch immer nur maximal 25 gleichzeitig aktiv.

Wenn Sie einen Worker erstellen und die maximal mögliche Anzahl an Threads bereits erreicht ist, wird keine Ausnahme ausgelöst. Der Aufruf ist immer erfolgreich, und Sie können dem Aufruf Handler hinzufügen und Nachrichten an diesen senden. Es kann jedoch sein, dass der Worker erst gestartet wird, wenn einer der bestehenden 25 Threads verfügbar ist.


// Coding pattern before IE10 Platform Preview Build 4
try {
    var worker = new Worker(url);
} catch(ex) {
    // IE might throw...?
}

// After IE10 Platform Preview Build 4
var worker = new Worker(url);
// Continue with confidence...

API-Referenz

Web Workers

Beispiele und Lernprogramme

Web-Worker-Beispiel
Untersuchen der Mandelbrotmenge mithilfe von HTML5

Demos für die Internet Explorer-Testversion

Mandelbrot-Explorer
The Web Worker Fountains
Web Worker Harness for test262

IEBlog-Beiträge

Debuggen von Web-Workern in IE10
Web-Worker in IE10: JavaScript im Hintergrund beschleunigt Web Apps

Spezifikation

Web-Worker

Verwandte Themen

HTML5-Threading mit Webworkern und Datenspeicherung mit IndexedDB
Einführung in HTML5-Web-Worker: der Multithreading-Ansatz in JavaScript

 

 

Anzeigen:
© 2014 Microsoft