Web Worker

Bisher haben sich die meisten Inhalte dieses Kurses auf Konzepte wie allgemeine Überlegungen zur HTML-Leistung, Hinweise auf Ressourcen, Optimierung verschiedener Ressourcentypen, um die anfängliche Seitenladezeit und die Reaktionsschnelligkeit für Nutzer zu verbessern Eingaben sowie Lazy Loading für spezifische Ressourcen.

Es gibt jedoch einen Aspekt der Leistung in Bezug auf JavaScript, der bisher noch nicht die in diesem Kurs behandelt wurden, und das ist die Rolle von Web Workern bei der Verbesserung die in diesem und im nächsten Modul behandelt werden.

JavaScript wird oft als Single-Threaded-Sprache beschrieben. In der Praxis bedeutet das bezieht sich auf den Hauptthread, d. h. den einzelnen Thread, in dem der Browser den Großteil der Arbeit, die Sie im Browser sehen. Diese Arbeit umfasst Aufgaben, in Dingen wie Scripting, einigen Rendering-Arbeiten, HTML- und CSS-Parsing, und andere Arten von nutzungsorientierter Arbeit, die die User Experience fördert. Tatsächlich Browser nutzen andere Threads für Aufgaben, die Sie als Entwickler haben normalerweise direkten Zugriff auf GPU-Threads.

Bei JavaScript sind Sie im Allgemeinen darauf beschränkt, Hauptthreads – aber nur standardmäßig. Es ist möglich, sich zu registrieren und zusätzliche Threads in JavaScript hinzufügen. Die Funktion, die Multithreading ermöglicht, JavaScript wird als Web Workers API bezeichnet.

Web Worker sind nützlich, wenn Sie rechenintensive Arbeit haben, die nur kann nicht im Hauptthread ausgeführt werden, ohne lange Aufgaben zu verursachen, reagiert nicht. Derartige Aufgaben können sich sicherlich auf die Interaktion mit den Next Paint (INP), sodass es hilfreich sein kann, zu wissen, wann Sie Arbeit haben, vollständig aus dem Hauptthread entfernt wird. Dadurch schaffen Sie mehr Platz für Aufgaben im Hauptthread ausführen, damit die Interaktionen der Nutzer schneller ablaufen.

In diesem Modul und in der folgenden Demo zu einem konkreten Anwendungsfall geht es um Web- Arbeiter. Die Demo selbst zeigt, wie Sie die Arbeit mit einem Web Worker ausführen können. das Lesen von Bildmetadaten aus einer JPEG-Datei aus dem Hauptthread diese Metadaten zurück in den Hauptthread zurückholen, damit der Nutzer sie sehen kann.

So wird ein Web Worker gestartet

Ein Web Worker wird durch Instanziieren der Worker-Klasse registriert. Wenn Sie Also geben Sie an, wo sich der Web Worker-Code befindet, der vom Browser geladen wird. und erstellt anschließend einen neuen Thread. Der sich daraus ergebende Thread wird oft als einen Worker-Thread.

const myWebWorker = new Worker('/js/my-web-worker.js');

In der JavaScript-Datei des Workers – in diesem Fall my-web-worker.js – können Sie dann Schreiben Sie Code, der dann in einem separaten Worker-Thread ausgeführt wird.

Einschränkungen für Web Worker

Im Gegensatz zu JavaScript, das im Hauptthread ausgeführt wird, haben Web Worker keinen direkten Zugriff in den window-Kontext. und haben eingeschränkten Zugriff auf die von ihm bereitgestellten APIs. Web- Für Worker gelten die folgenden Einschränkungen:

• Web Worker können nicht direkt auf das DOM zugreifen.
• Web Worker können über eine Nachricht mit dem window-Kontext kommunizieren. , das heißt, dass ein Web Worker indirekt auf das DOM zugreifen kann.
• Der Web-Worker-Bereich ist self und nicht window.
• Der Web Worker-Bereich hat Zugriff auf JavaScript-Primitive und sowie APIs wie fetch und eine relativ große Anzahl von anderen APIs.

Kommunikation von Web Workern mit window

Ein Web Worker kann mit dem window des Hauptthreads kommunizieren. und Kontext durch eine Messaging-Pipeline an. Mit dieser Pipeline können Sie Daten Hauptthread und aus dem Web Worker entfernt. Um Daten von einem Web Worker an den Haupt-Thread haben Sie ein message-Ereignis im Kontext des Web Workers (self) eingerichtet.

// my-web-worker.js
self.addEventListener("message", () => {
  // Sends a message of "Hellow, window!" from the web worker:
  self.postMessage("Hello, window!");
});

Anschließend können Sie in einem Skript im window-Kontext im Hauptthread das aus dem Web Worker-Thread mit einem weiteren message-Ereignis:

// scripts.js

// Creates the web worker:
const myWebWorker = new Worker('/js/my-web-worker.js');

// Adds an event listener on the web worker instance that listens for messages:
myWebWorker.addEventListener("message", ({ data }) => {
  // Echoes "Hello, window!" to the console from the worker.
  console.log(data);
});

Die Messaging-Pipeline eines Web Workers ist eine Art Notlösung vom Web aus. Worker-Kontext. Damit können Sie Daten vom Web Worker an den window senden. mit der Sie das DOM aktualisieren oder andere Aufgaben ausführen können, im Hauptthread.

Wissen testen

Nächster Schritt: ein konkreter Anwendungsfall für Web Worker

Im nächsten Modul wird ein konkreter Anwendungsfall für Web Worker beschrieben. demonstriert wird. In diesem Modul wird ein Web Worker verwendet, um eine JPEG-Datei von einem und lesen ihre EXIF-Metadaten in einem Web Worker. Diese Daten werden dann zurück zum Hauptthread, der dem Nutzer angezeigt wird.