Sitzungsaufgaben II – High Performance JavaScript: Web Worker

Aufgabe 1

Erstellen Sie ein neues HTML-Dokument, das mit Modernizr und jQuery verknüpft ist. Ergänzen Sie den Inhaltsbereich Ihres neu erstellten Dokumentes um einen Div-Container mit der ID „ausgabe“.

Aufgabe 2

Binden Sie die folgenden JavaScript-Anweisungen in den Inhaltsbereich Ihres HTML-Dokumentes ein:

var startTime = Date.now(),
startRange = 0, endRange = 999999999;
for (var i = startRange; i < endRange; i++) {}
var endTime = Date.now();
             
document.write("<br />Das Hochzählen von " + startRange + " bis " + endRange + " dauerte " + (endTime-startTime) + " Millisekunden.");

Öffnen Sie Ihre Webseite im Browser und schauen Sie, was geschieht.

Aufgabe 3

Prüfen Sie mit Modernizr, ob Ihr Browser Web Worker unterstützt. Wenn Web Worker unterstützt werden, lassen Sie die folgenden JavaScript-Anweisungen ausführen:

var worker = new Worker("js/worker.js");
 
worker.addEventListener("message", function(event) {
$("#ausgabe").append(event.data);
$("#ausgabe").append("<br />");
});
 
// Übergabe von Daten an den Web Worker
var data = "Hallo Web Worker!";
worker.postMessage(data);

Geben Sie eine entsprechende Nachricht in Ihrem HTML-Dokument aus, wenn Web Worker nicht unterstützt werden.

Aufgabe 4

Erstellen Sie die JavaScript-Datei worker.js im Ordner js und füllen Sie die Datei mit dem folgenden Inhalt:

function msgHandler(e) {

    // Zum Test: Uebergebene Nachricht ausgeben
    postMessage(e.data);

    var startTime = Date.now(),
        startRange = 0, endRange = 999999999;

    postMessage("Ich lege los.");

    for (var i = startRange; i < endRange; i++) {}
    var endTime = Date.now();

    postMessage("Fertiggestellt in " + (endTime-startTime) + " Millisekunden.");

    close();
}

// Der Web Worker horcht auf ein message-Event
addEventListener("message", msgHandler);

Aufgabe 5

Erstellen Sie eine neue Funktion oder ändern Sie den JavaScript-Quelltext des Web Workers, um eine bestimmte Zahl der Fibonacci-Reihe zu berechnen. Tipp: http://de.wikipedia.org/wiki/Fibonacci-Folge und http://en.literateprograms.org/Fibonacci_numbers_%28JavaScript%29.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.