Share
Ein Web-Worker ist ein JS-Skript, das getrennt von anderen Skripts im Hintergrund ausgeführt wird, sodass Threads in unsere Web-Apps eingeführt werden können. Web-Worker können zwar mit HTML5-Apps verwendet werden, sind jedoch nicht Teil der HTML5-Spezifikation. In diesem Schnelltipp erfahren Sie, wie Sie diese verwenden.
Im Land von HTML5 haben wir einige sehr interessante APIs zur Verfügung. Einige von ihnen - wie Web Workers - sind nützlich, um die Leistung zu steigern, was sowohl für Apps als auch für Spiele von großer Bedeutung ist. Aber wie funktionieren Web Worker… gut??
Jede Instanz eines Web Workers erstellt einen anderen Thread, in dem Ihr JavaScript ausgeführt wird. Du instanziierst einen so:
Accentsconagua
var worker = neuer Arbeiter ('dateiname.js'); Hier ist 'Dateiname.js' der Name der Datei, die Ihr Skript enthält. Da es sich bei Workers um individuelle Umgebungen handelt, können Sie keinen Code verwenden, der direkt in HTML eingebettet ist. Sie müssen eine separate Datei verwenden.
Arbeiter haben keinen Zugriff auf das Seitendom oder das globale Objekt. Wie kommunizieren sie mit der Site? Es ist einfach. Wenn Sie Daten von Ihrer Seite an einen Worker senden möchten, rufen Sie auf POST-Meldung().
Hierfür ist ein Parameter erforderlich: zu sendende Daten, bei denen es sich entweder um einen String oder ein parsbares JSON-Objekt handeln kann (was bedeutet, dass Sie keine Funktionen oder Zirkelverweise übergeben können, oder Sie erhalten ein DOM_EXCEPTION). Bei einigen Browsern gibt es ein Problem mit Objekten. Daher ist es immer besser, das Objekt manuell zu analysieren JSON.parse () Sie müssen sich also keine Gedanken über unvollständige Implementierungen machen.
Dasselbe gilt, wenn Sie Daten von einem Worker an die Seite senden: Rufen Sie einfach auf POST-Meldung() auf selbst, was sich auf den globalen Geltungsbereich des Arbeitnehmers bezieht. (Das tun Sie natürlich im Worker's Script).
Um die Daten zu erhalten, müssen Sie eine eine Nachricht Eventhandler. Es gibt zwei Möglichkeiten, dies zu tun, genau wie bei regulären Ereignissen für DOM-Elemente. Sie können dem Worker entweder eine Funktion direkt zuweisen eine Nachricht Eigenschaft, oder Sie können verwenden addEventListener ().
// Erster Weg: worker.onmessage = function (e) console.log (e.data); // Übergebene Daten protokollieren // Zweiter Weg: worker.addEventListener ('message', function (e) console.log (e.data); // Übergebene Daten protokollieren); Sie haben die Wahl, welche Methode verwendet werden soll. In beiden Fällen ist der Parameter der Funktion ein Veranstaltung Objekt und die Daten, die Sie mit gesendet haben POST-Meldung() wird über die weitergegeben Daten Eigenschaft dieser Veranstaltung.
Okay, aber was ist, wenn wir eine externe Bibliothek verwenden müssen? Wir haben keinen Zugriff auf das DOM oder den globalen Gültigkeitsbereich, sodass wir das Skript nicht einfach einfügen können.
Natürlich brauchen wir das nicht - dafür gibt es eine Funktion. Es wird genannt importScripts () und es akzeptiert ein oder mehrere Argumente: Skriptnamen, die im Arbeitsbereich des Workers geladen werden sollen. Sie sollten wissen, dass die an diese Funktion übergebenen Skripts in zufälliger Reihenfolge geladen werden. Sie werden jedoch wie angegeben ausgeführt und die Skriptausführung wird angehalten, bis sie geladen werden.
importScripts ('one-lib.js'); // Lädt ein Skript importScripts ('first-lib.js', 'second-lib.js', 'third-lib.js'); // Lädt drei Skripte Sie können verwenden importScripts an beliebiger Stelle in Ihrem Code, wodurch das Erstellen von JSONP-Anforderungen in Workers vereinfacht wird, wie im folgenden Beispiel beschrieben.
Richtig, jetzt möchten Sie wahrscheinlich einen Arbeiter in Aktion sehen. Anstatt etwas ziemlich Nutzloses zu zeigen, wie das Erhalten von Primzahlen oder Fibonacci-Zahlen, habe ich mich entschieden, etwas zu machen, das Sie nach einigen Änderungen vielleicht verwenden werden.
Das Beispielskript (ich habe nur den Code des Arbeiters enthalten, der Rest ist einfach zu erledigen) erhält die letzten 100 Tweets von @envatoactive (wir müssen die Anzahl auf 121 anstatt auf 100 setzen, da die Tweeter-API weniger Tweets sendet als gefragt - frag mich nicht warum, ich weiß es nicht).
Hier ist der Code, der in die eigentliche Web Worker-Skriptdatei gehen würde:
// Hilfsfunktion zur Verarbeitung der Daten var process = Funktion (Daten) // Iteriere durch die Daten; Wir wissen, dass es sich um ein Array handelt, also ist es sicher für (var i = 0, v; v = data [i]; i ++) // Und übergeben Sie den Text von Tweet an die Seite self.postMessage (text: v.text); // Lassen Sie die Seite nach der Arbeit wissen self.postMessage ("done"); // Event-Listener zur Verarbeitung von Nachrichten anhängen self.addEventListener ('message', function (event) // Prüfen, ob der gesendete Befehl 'start' war // hier nicht erforderlich, kann jedoch später nützlich sein, wenn (event.data == "start") // Antwort auf die Seite, auf der die Arbeit gestartet wurde self.postMessage ("started"); // Kern des Skripts, Tweets abrufen // Der Parameter callback gibt an, welche Funktion ausgeführt werden soll, nachdem die Anforderung ausgeführt wurde // (Wir rufen die oben definierte Funktion process () auf.) // Count muss 121 sein, da die Tweeter-API eine geringere Datenmenge sendet als angeforderte importScripts ("http://twitter.com/statuses/user_timeline/envatoactive"). json? callback = process & count = 121 ");); Es sollte leicht zu verstehen sein, wie dies anhand der Kommentare funktioniert. Dadurch kann Ihre App alle Tweets im Hintergrund mithilfe eines separaten Threads laden.
Versuchen Sie nun den folgenden äquivalenten Code einzufügen tut nicht Verwenden Sie Webworker stattdessen in den Kopf einer leeren Seite und beachten Sie die Verzögerung. (Es ist immer noch klein, aber stellen Sie sich vor, wenn Sie nicht 100, sondern 100.000 Tweets erhalten würden):
Wie Sie sehen, bieten Web-Worker eine einfache Möglichkeit, um Verzögerungen von Ihrer GUI zu entfernen und komplizierte Berechnungen oder Netzwerke in separate Threads zu verschieben.
Ich hoffe, Sie haben aus diesem Artikel etwas Neues gelernt - vielleicht werden Sie Workers in Ihrem nächsten Projekt verwenden? Wenn Sie Fragen oder Probleme haben, kommentieren Sie bitte unten.
