Was sind Web Worker?

In diesem Artikel geht es ausschließlich um die Verwendung von Web Workern und deren Bedeutung in der HTML5.Java-Skript-Engine, die mit einem einzelnen Thread erstellt wurde, und es gibt keinen gleichzeitigen Prozess dahinter (kein anderer Prozess wird ausgeführt, bis der erste Prozess abgeschlossen ist). Da läuft Javascript im Vordergrund und macht die Webseite zeitaufwändig. Um dieses Problem zu umgehen, hat HTML5 eine neue Technologie namens Web Worker entwickelt. Es ist ein kleines Hintergrundskript, das bei teuren Aufgaben Berechnungen durchführt, ohne in die Benutzeroberfläche oder die Leistung der Webseite einzugreifen. Dieser isolierte Thread ist relativ leicht und wird in allen Webbrowsern unterstützt. Dadurch startet HTML zusätzliche Threads.

Arten von Web-Workern in HTML5

Web-Worker werden auch als "engagierte Mitarbeiter" bezeichnet. Sie haben ein separates Shared-Memory-Modell. Mit anderen Worten, wir können sagen, dass ein ganzer Javascript-Bereich zufällig auf einem einzelnen Thread ausgeführt wurde. Während der Arbeit in einem Webbrowser ist aufgrund der starken Verarbeitung der Seite eine Runway-Dialogmeldung aufgetreten. Um eine gute Lösung zu bieten, hat der Webbrowser HTML API verschiedene Berechnungen gleichzeitig festgelegt.

Im Folgenden werden drei wichtige Arten von Web-Workern aufgeführt:

1. Shared Web Worker

Bei diesem Typ wird die API verwendet, und jede Arbeitseinheit verfügt über mehrere Verbindungen, während eine Nachricht gesendet wird (mehrere Skripts), vorausgesetzt, jeder Kontext hat denselben Ursprung. Die Browserunterstützung für diesen Worker ist begrenzt. Sie werden mit dem Konstruktor shared worker () aufgerufen.

2. Dedicated Web Worker

Das Erstellen einer Datei ist sehr einfach, indem Sie einen Konstruktor mit seinem Quellpfad aufrufen. Sie verwenden während der Nachrichtenübertragung die Nachrichtenkommunikation, die als post message () -Methode bezeichnet wird. Sogar die Event-Handler werden verwendet, wenn ein Listener stattfindet. Mit dem Handler onmessage () wird eine Nachricht empfangen.

3. Service Arbeiter

Dieser Worker interagiert nicht direkt mit der Webseite und wird im Hintergrund ausgeführt. Sie können bei Bedarf wiederhergestellt werden und fungieren als Proxy. Auf sie können mehrere Threads zugreifen.

Wie erstelle ich eine Web Workers-Datei?

Sie unterstützen einige Funktionen wie das Fensterobjekt, das DOM und das übergeordnete Objekt nicht. Alle Funktionen werden ausgeführt, indem eine Kopie davon übergeben wird.

Schritt 1: So erstellen Sie einen Dateiimport: Worker () - Konstruktor Eine Datei wird mit einem neuen Objekt erstellt, und das Skript sieht folgendermaßen aus.

var worker = new Worker(sample.js);

Schritt 2: Erstellung der Beitragsnachricht (). Die erstellten Worker-Dateien rufen automatisch die Methode post message () auf. Die post message () -Methoden leiten die Nachricht an den Haupt-Thread weiter. Ebenso können wir eine Nachricht vom Haupt-Thread an den Worker-Thread senden. Hier fängt der Arbeiter an.

worker. postMessage();

Schritt 3: Weiter, um die Ereignisbehandlungsroutine auszulösen und die Nachricht vom Web-Worker zuzulassen.

worker. onmessage = function(event)

Von nun an haben wir gesehen, wie man Nachrichten sendet und empfängt. Nun wollen wir sehen, wie man den Worker mitten im Prozess beendet.

Schritt 4: Um den Prozess zu stoppen.

worker.terminate()

Schritt 5: Um ein Fehlerbehandlungsszenario zu implementieren, verwendet Worker.

Worker.onerror();

Die neun wichtigsten Funktionen von HTML5-Web-Workern

  1. Als asynchrones Protokoll für Web-Worker waren sie am besten für die Ausführung von Rechenaufgaben geeignet und wurden als die professionellen Merkmale von Javascript angesehen.
  2. Web-Worker zahlen eine strikte Ausführungsplattform für mobile und Desktop-Fenster und können die Webseite ausführen, ohne die Webseite in den Browsern einzufrieren.
  3. Der Hauptvorteil ist, dass wir teure Prozesse in einem einzelnen Thread ausführen können, ohne den laufenden Haupt-Thread zu unterbrechen.
  4. Bei Web-Workern handelt es sich um kleine, leichtgewichtige Threads, die die Benutzeroberfläche einzeln verschachteln.
  5. Web-Worker, die kernelorientierte Threads sind, helfen dabei, die hohe Leistung der Browserseite zu erreichen.
  6. Web-Worker helfen beim Erstellen von paralleler Programmierung und führen Multithreading-Aktionen aus.
  7. Web-Worker beschleunigen Java-JScript-Anwendungen.
  8. Web-Worker wird als clientseitiges Skript betrachtet und in Spieleanwendungen höher eingesetzt.
  9. Web-Worker-Threads kommunizieren unter Verwendung der post Message () - Rückrufmethode miteinander.

Beispiele für HTML5-Web-Worker

Web-Worker haben aufgrund ihrer Mehrfachverarbeitungsaktivitäten Zugriff auf den Navigator, die XMLHTTP-Anforderung und den Navigator. Das folgende Beispiel konzentriert sich auf bestimmte Arbeitnehmertypen.

Beispiel 1

Zeigt eine Beispiel-Worker-Datei an, die die Funktionsweise des Browsers demonstriert.

Code:



Web Worker Demo

Validating the browser compatibility of Web Browsers

Submit
function worker_demo()
(
if(typeof(Worker)!=="undefined")(
document.getElementById("yes").innerHTML=" Browser Supports";
)
else
(
document.getElementById("NO").innerHTML="Browser Not Supporting the workers";)
)



Web Worker Demo

Validating the browser compatibility of Web Browsers

Submit
function worker_demo()
(
if(typeof(Worker)!=="undefined")(
document.getElementById("yes").innerHTML=" Browser Supports";
)
else
(
document.getElementById("NO").innerHTML="Browser Not Supporting the workers";)
)



Web Worker Demo

Validating the browser compatibility of Web Browsers

Submit
function worker_demo()
(
if(typeof(Worker)!=="undefined")(
document.getElementById("yes").innerHTML=" Browser Supports";
)
else
(
document.getElementById("NO").innerHTML="Browser Not Supporting the workers";)
)

Ausgabe:

Beispiel # 2

Das folgende Beispiel zeigt, wie die Worker-Aufgaben unter Verwendung der Klasse hinter der Aufgabe ausgeführt werden und die Zählung für die Worker-Aufgaben durchgeführt wird. Die Arbeitstasks aktualisieren die Webseite automatisch in jeder Schleife, bis die Schleife endet. Um die Ausführung des Workers zu beenden, wurde hier terminate () verwendet.

Die Arbeit, die der Web-Worker im Hintergrund erledigt hat:

Code:

wrk.html




Web Workers Demo
body (padding-top:18px;)
.output-cont (margin-left:12%; margin-top:28px;)
.output-cont h2 (width:150px; height:95%;)
.output-cont button (padding:3px 7px; font-size:1.3rem; font-family:sans-serif; )

start worker terminate

start blocking thread

test responsiveness
var worker;
function testWork() (
if (typeof(Worker) !== "undefined") (
if (typeof(worker) == "undefined") (
worker = new Worker("demo.js");
)
worker.onmessage = function(event) (
document.getElementById("wOutput").innerHTML = event.data;
);
) else (
document.getElementById("wOutput").innerHTML = "Web Workers are unsupported";
)
)
function stopWorker() (
worker.terminate();
worker = undefined;
)
function test() (
for (var j = 0; j < 20000; j++) (
document.getElementById("mainThreadOutput").innerHTML = "Main Thread Counter: " + j;
)
)

Next creating an separate external javascript file demo.js and the code comes as shown.
demo.js
j = 0;
while (j < 200000)
( postMessage("Web Worker Counter: " + j);
j++;
)


Web Workers Demo
body (padding-top:18px;)
.output-cont (margin-left:12%; margin-top:28px;)
.output-cont h2 (width:150px; height:95%;)
.output-cont button (padding:3px 7px; font-size:1.3rem; font-family:sans-serif; )

start worker terminate

start blocking thread

test responsiveness
var worker;
function testWork() (
if (typeof(Worker) !== "undefined") (
if (typeof(worker) == "undefined") (
worker = new Worker("demo.js");
)
worker.onmessage = function(event) (
document.getElementById("wOutput").innerHTML = event.data;
);
) else (
document.getElementById("wOutput").innerHTML = "Web Workers are unsupported";
)
)
function stopWorker() (
worker.terminate();
worker = undefined;
)
function test() (
for (var j = 0; j < 20000; j++) (
document.getElementById("mainThreadOutput").innerHTML = "Main Thread Counter: " + j;
)
)

Next creating an separate external javascript file demo.js and the code comes as shown.
demo.js
j = 0;
while (j < 200000)
( postMessage("Web Worker Counter: " + j);
j++;
)


Web Workers Demo
body (padding-top:18px;)
.output-cont (margin-left:12%; margin-top:28px;)
.output-cont h2 (width:150px; height:95%;)
.output-cont button (padding:3px 7px; font-size:1.3rem; font-family:sans-serif; )

start worker terminate

start blocking thread

test responsiveness
var worker;
function testWork() (
if (typeof(Worker) !== "undefined") (
if (typeof(worker) == "undefined") (
worker = new Worker("demo.js");
)
worker.onmessage = function(event) (
document.getElementById("wOutput").innerHTML = event.data;
);
) else (
document.getElementById("wOutput").innerHTML = "Web Workers are unsupported";
)
)
function stopWorker() (
worker.terminate();
worker = undefined;
)
function test() (
for (var j = 0; j < 20000; j++) (
document.getElementById("mainThreadOutput").innerHTML = "Main Thread Counter: " + j;
)
)

Next creating an separate external javascript file demo.js and the code comes as shown.
demo.js
j = 0;
while (j < 200000)
( postMessage("Web Worker Counter: " + j);
j++;
)

Ausgabe:

Fazit

Am Ende haben wir gesehen, wie Web-Worker unabhängig vom Haupt-Thread arbeiten, der den Web-Organisationen hilft, anspruchsvolle Apps zu erstellen. Es wird dringend empfohlen, Web-Worker in Javascript für schwere Aufgaben zu verwenden. Es wird empfohlen, den Webbrowser zu schließen, wenn er nicht mehr verwendet wird, um die Systemressourcen zu verbrauchen.

Empfohlener Artikel

Dies ist eine Anleitung für HTML5-Web-Worker. Hier besprechen wir die neun wichtigsten Funktionen von HTML5 Web Workers und deren Beispiele mit Codeimplementierung. Sie können auch unsere Artikelvorschläge durchgehen, um mehr zu erfahren -

  1. HTML5 Neue Elemente | Top 10
  2. HTML-Frames mit Syntax
  3. Einführung in die Vorteile von HTML
  4. Top 10 HTML5 Interview Fragen und Antworten

Kategorie:

Web-Entwicklungstools