Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

HTML5 Grundkurs

Code im Hintergrund (Webworker)

Testen Sie unsere 2021 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Je komplexer JavaScript-Code wird, desto länger dauert meist dessen Ausführung. Aus diesem Grund gibt es mit Webworker einen Ansatz, aufwändige Berechnungen im Hintergrund abarbeiten zu lassen, so dass der Rest des Browsers davon nicht in Mitleidenschaft gezogen wird.
07:10

Transkript

Je mehr wir mit JavaScript machen, desto aufwändiger wird der Code, das heißt, dass auch Perfomance- Erwägungen stärker Gewicht gewinnen im Vergleich vor allem zu früher, wo, ja, JavaScript-Performance jetzt nicht unsere Hauptsorge war. Und es ist in der Tat so, dass einige Browser Schutzmaßnahmen eingebaut haben, falls JavaScript-Code nicht performant laufen sollte. Liegt ein bisschen daran, dass, na ja, JavaScript die Inhalte einer Seite verändern kann, das Rendern an der Seite, also dass darstellte Inhalte und die Ausführung von JavaScript-Code sehr eng gekoppelt sind. Wenn also JavaScript-Code das Rendern blockiert, dadurch das JavaScript-Code zum Beispiel so lange braucht, heißt es, dass vielleicht der Browser sich nicht bedienen lässt oder eben das Rendern verlangsamt wird. Und dafür gibt es eine eingebaute Schutzmaßnahme, und ich möchte zuerst diese Schutzmaßnahme zeigen, und zwar erstelle ich eine Datei, ich nenne die "webworker". Und das hat damit zu tun, dass der Name der Datei sich an der Lösung für das Problem orientiert, aber erst müssen wir das Problem zeigen. Also, machen ein JavaScript-Block und machen dann eine unsinnige Berechnung. Ich erzeuge einfach mal eine Zahl und mache dann sehr, sehr viele Instruktionen. Also, sagen wir mal und lassen eine Variable laufen bis 500 Millionen. Ja, sieht ganz gut aus. Ich hoffe, das dauert lang genug. Und bei jedem Durchlauf erhöhe ich diese Variable j, und zwar um das Produkt von zwei Zufallszahlen, dann kann nämlich auch JavaScript relativ schlecht optimieren, weil diese Zufallszahlen jedes Mal gezogen werden sollen, und am Ende gebe ich das Ergebnis aus. Soweit ja eigentlich so gut, aber das dauert natürlich. Das sind 500 Millionen Instruktionen, und es werden eine Milliarde Zufallszahlen gezogen. Na, vielleicht dauert es ein bisschen, ich führe das eben im Firefox Browser mal aus. Also starte ich den Firefox Browser und rufe dann die Datei "webworker.html" mal auf. Und ja, sie sehen jetzt, ich klicke hier in die Adressezeile, zum Beispiel, nichts passiert. Jetzt kommt hier schon keine Rückmeldung. Der Browser steht, weil der zieht jetzt wie wild Zufallszahlen, und irgendwann sorgt der Hintergrund-Prozess dafür, dass so eine Warnmeldung kommt. Ein Script auf dieser Seite antwortet nicht mehr. Jetzt könnten wir stoppen oder fortsetzen. Führen wir es weiter aus. Passiert immer noch nichts. Wenn ich hier mehrere Tabs hätte, ich könnte auf eines dieser Tabs zugreifen. Andere Browser machen das ein bisschen besser, aber haben teilweise auch solche Schutzmaßnahmen. Na ja, irgendwann gebe ich auf, ich brauche eine andere Lösung. Mich interessiert nämlich das Ergebnis, aber der Weg dahin ist ein wenig mühsam, also schließen wir das Ganze wieder und schauen uns das Thema "Webworker" an. Webworker ist eine Möglichkeit, eine Code-Ausführung, sozusagen in den Hintergrund zu legen separat vom Render, das heißt, ich könnte das in einen, ja, Art Hintergrund-Prozess verlagern und würde dann damit nicht mehr die Bedienung des Browsers torpedieren. Machen wir das einfach mal, ich erstelle dazu eine JavaScript-Datei. Also neue Datei. Ich nenne sie "webworker.js", und zunächst verschiebe ich diesen Code mal in diese Webworker-JavaScript-Datei. Und das klingt jetzt eigentlich schon relativ gut, aber die Tücke steht im Detail. Rufe ich den Code jetzt auf, ich erstelle ein Webworker, so heißt nämlich dieses Feature, "new Worker", und gebe dann den Namen der Datei an "webworker.js". Und jetzt würde diese Datei geladen und ausgeführt werden. Da das aber im Hintergrund läuft, habe ich hier keinen Zugriff auf das DOM, und habe auch keinen Zugriff auf die meisten JavaScript-Objekte, wie etwa 'Window'. Ich kann also nicht die alert-Methode aufrufen, denn an 'Window' komme ich nicht heran, innerhalb von so einem Webworker. Müssen wir anders überlegen, und was jetzt die Spezifikation vorsieht, ist eine Art Kommunikationsmechanismus zwischen Aufrufen der Seite, also der HTML-Seite, und der aufgerufenen Seite, also der JavaScript-Datei. Ich kann zum einen Nachrichten von HTML zum JavaScript schicken. Das geht mit der Methode 'postMessage', also "Leg los!". Diese Nachricht kann ich schicken. Und in der JavaScript-Datei kann ich auf diese Nachricht lauschen. Es gibt dazu das Ereignis 'Message', also 'self.onmessage' ist gleich und in diesem 'e', also in dem Funktionsparameter steckt dann die Nachricht drin, also wenn die Nachricht selber den Wert "Leg los!" hat, dann liegen wir mit der Berechnung los. Könnten wir jetzt machen. Na ja, da wir eigentlich eh loslegen wollen, so oder so nicht zwischen verschiedenen Nachrichten unterscheiden, ist es hier zunächst entbehrlich. Ich würde sagen, wenn wir die Nachricht kriegen, egal welche es ist, legen wir los mit der Berechnung. Aber, was machen wir mit dem Ergebnis hier? Das schicken wir zurück. Wie schicken wir es zurück ebenfalls mit Post-Message? Das heißt, mit dieser Post-Message-Methode können wir Daten zurückschicken an die aufrufende Datei, an den Webworker sozusagen innerhalb des HTML-File. Was muss jetzt im HTML-File noch machen? Ich muss im HTML-File entsprechend wieder auf das Ereignis regieren, also sobald eine Nachricht ankommt, schaue ich mir Nachricht an, und, na ja, in dem Fall gebe ich sie einfach aus. Ist also eigentlich gar nicht viel Code, der hier fabriziert wird, und die Funktionsweise ist auch relativ simpel. Ich erzeuge einen Webworker, indem ich diese JavaScript-Datei hier lade. Dann schicke ich dieser JavaScript-Datei sozusagen eine Nachricht. In der JavaScript-Datei warte ich auf diese Nachricht. Wenn sie eintrifft, dann rechne ich und schicke irgendwann das Ergebnis, wenn ich es denn mal habe zurück. In der HTML-Datei warte ich sehnsüchtig auf dieses Ergebnis und gebe es dann einfach aus. Probieren es mal! Firefox geht wieder auf, die Datei heißt "webworker.html", und Sie sehen, Adresszeile reagiert, das heißt, die rechnet jetzt tatsächlich, zieht also eine Milliarde Zufallszahlen, multipliziert, addiert, und irgendwann erhalten wir dann ein Ergebnis. Das Feature heißt eben "Webworker", und diese Schnittstelle, die wir haben, diese Programmier-Schnittstelle ist die Messaging-API. Eben auf praktisch genau dem selben Weg können Sie zwischen Browser-Fenstern und Browser-Tabs Daten hin und her schicken, also per Post-Message Daten schicken und per Message-Ereignis auf diese Daten zugreifen. Und gibt es da noch so ein paar Sicherheitsbeschränkungen aber vom Prinzip her genau dasselbe. Und wir haben gesehen, Tatsache, haben jetzt ein Ergebnis erhalten, und das haut sogar einigermaßen hin, müssten ungefähr 125 Millionen sein. Passt perfekt! Das heißt, tatsächlich die Berechnung wurde durchgeführt, die Berechnung wird wieder ausgegeben, das Ergebnis der Berechnung erscheint, aber der Browser war währenddessen bedienbar. Der Einsatzzweck für so was, ist natürlich nur dann gegeben wenn man tatsächlich komplexe Berechnungen hat. Gibt also diverse Möglichkeiten und diverse Nachrichten, wo man das hat, etwa beim Verarbeiten von komplexen Daten. Und solange man keinen DOM-Zugriff braucht, zumindest keinen direkten Zugriff, ist es eine sehr, sehr gute Möglichkeit, und muss es nur dann erreichen, dass das Ergebnis der Berechnung dann über diesem Post-Message plus Message-Ereignis-Mechanismus an die eigentliche Seite wieder übermittelt werden kann, damit diese Seite dann die Daten zum Beispiel per DOM ausgeben kann.

HTML5 Grundkurs

Machen Sie sich mit HTML5 fit für das Webdesign von morgen, angefangen vom Erstellen einfacher HTML-Dokumente bis hin zur Gestaltung anspruchsvoller Layouts.

3 Std. 11 min (29 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!