Threading des Webs mit Modularbeitern

Ahora es más fácil mover el trabajo pesado a subprocesos en segundo plano con los módulos de JavaScript en los trabajadores Netz.

17. Dezember 2019

JavaScript ist Single-Threaded, dh es kann jeweils nur eine Operation ausgeführt werden. Dies ist intuitiv und funktioniert in vielen Fällen im Web gut. Es kann jedoch problematisch sein, wenn wir schwere Aufgaben wie Datenverarbeitung, Analyse, Berechnung oder Analyse ausführen müssen. Da immer komplexere Anwendungen im Web bereitgestellt werden, besteht ein erhöhter Bedarf an Multithread-Verarbeitung.

Auf der Webplattform ist das Hauptprimitiv für Threading und Parallelität das Web Worker API. Arbeiter sind zusätzlich eine leichte Abstraktion Betriebssystem-Threads que exponen un mensaje que pasa API para la comunicación entre subprocesos. Esto puede ser inmensamente útil cuando se realizan cálculos costosos o se opera en grandes conjuntos de datos, lo que permite que el hilo principal se ejecute sin problemas mientras se realizan las costosas operaciones en uno o más hilos en segundo plano.

Hier ist ein typisches Beispiel für die Verwendung von Workern, bei dem ein Worker-Skript auf Nachrichten aus dem Hauptthread wartet und daraufhin eigene Nachrichten sendet:

page.js:

const Arbeiter = new Arbeiter('worker.js');
Arbeiter.addEventListener(und => {
console.Log(und.Daten);
});
Arbeiter.POST-Meldung('hello');

worker.js:

addEventListener('message', und => {
wenn (und.Daten === 'hello') {
POST-Meldung('world');
}
});

La API de Web Worker ha estado disponible en la mayoría de los Browser durante más de diez años. Si bien eso significa que los trabajadores tienen un excelente soporte de Browser y están bien optimizados, también significa que son anteriores a los módulos de JavaScript. Dado que no existía un sistema de módulos cuando se diseñaron los trabajadores, la API para cargar código en un trabajador y componer Skripte se ha mantenido similar a los enfoques de carga de scripts síncronos comunes en 2009.

Geschichte: klassische Arbeiter

Der Konstruktor Worker nimmt a klassisches Skript Url, que es relativa a la URL del documento. Inmediatamente devuelve una referencia a la nueva instancia de trabajador, que expone una interfaz de mensajería, así como una beenden () Methode, die den Arbeiter sofort stoppt und zerstört.

const Arbeiter = new Arbeiter('worker.js');

EIN importScripts () Die Funktion ist in Web-Workern verfügbar, um zusätzlichen Code zu laden, stoppt jedoch die Ausführung des Workers, um jedes Skript zu finden und auszuwerten. Es führt auch Skripte im globalen Bereich wie ein Klassiker aus. Dies bedeutet, dass Variablen aus einem Skript durch Variablen aus einem anderen Skript überschrieben werden können.

worker.js:

importScripts('greet.js');
addEventListener('message', und => {
POST-Meldung(sayHello());
});

greetr.js:

Funktion sayHello() {
Rückkehr 'world';
}

Aus diesem Grund haben Web-Worker in der Vergangenheit einen übergroßen Effekt auf die Architektur einer Anwendung ausgeübt. Entwickler mussten intelligente Tools und Lösungen entwickeln, um den Einsatz von Web-Workern zu ermöglichen, ohne auf moderne Entwicklungspraktiken zu verzichten. Beispielsweise enthalten Pakete wie das Webpack eine Implementierung eines kleinen Modulladers in den generierten Code, der verwendet wird importScripts ()
Zum Laden von Code, aber umschließen Sie Module in Funktionen, um variable Kollisionen zu vermeiden und Abhängigkeitsimporte und -exporte zu simulieren.

Geben Sie Modularbeiter ein

Ein neuer Modus für Web-Mitarbeiter mit den Ergonomie- und Leistungsvorteilen von JavaScript-Module wird in Chrome 80 ausgeliefert, das als Modularbeiter bezeichnet wird. das
Arbeiter Konstruktor akzeptiert jetzt eine neue {Typ: "Modul"} Option, die das Laden und Ausführen des Skripts entsprechend ändert .

const Arbeiter = new Arbeiter('worker.js', {
Art: 'module'
});

Dado que los trabajadores de módulo son módulos de JavaScript estándar, pueden utilizar declaraciones de importación y exportación. Al igual que con todos los módulos de JavaScript, las dependencias solo se ejecutan una vez en un contexto dado (hilo principal, trabajador, etc.), y todas las importaciones futuras hacen referencia a la instancia del módulo ya ejecutada. Los navegadores también optimizan la carga y ejecución de módulos JavaScript. Las dependencias de un módulo se pueden cargar antes de que se ejecute el módulo, lo que permite cargar árboles de módulos completos en paralelo. La carga de módulos también almacena en Zwischenspeicher el código analizado, lo que significa que los módulos que se utilizan en el hilo principal y en un trabajador solo necesitan analizarse una vez.

Das Wechseln zu JavaScript-Modulen ermöglicht auch die Verwendung von dynamischer Import für verzögertes Laden von Code ohne Blockieren der Worker-Ausführung. Der dynamische Import ist viel expliziter als die Verwendung importScripts () zum Laden von Abhängigkeiten, da die importierten Modulexporte zurückgegeben werden, anstatt sich auf globale Variablen zu verlassen.

worker.js:

importieren { sayHello } desde './greet.js';
addEventListener('message', und => {
POST-Meldung(sayHello());
});

greetr.js:

importieren greetings desde './data.js';
Export Funktion sayHello() {
Rückkehr greetings.hello;
}

Um eine gute Leistung zu gewährleisten, ist das alte importScripts () Die Methode ist in den Modularbeitern nicht verfügbar. Wenn Sie die Worker ändern, um JavaScript-Module zu verwenden, wird der gesamte Code geladen Strikter Modus. Eine weitere bemerkenswerte Änderung ist, dass der Wert von Este Auf der obersten Ebene befindet sich ein JavaScript-Modul
nicht definiert, mientras que en los trabajadores clásicos el valor es el Umfang global del trabajador. Afortunadamente, siempre ha habido una selbst global, das einen Verweis auf den globalen Bereich bereitstellt. Es steht allen Arten von Arbeitnehmern zur Verfügung, einschließlich Servicemitarbeitern sowie dem DOM.

Laden Sie die Arbeiter mit vor Modulvorladung

Eine wesentliche Leistungsverbesserung, die mit Modularbeitern einhergeht, ist die Möglichkeit, Mitarbeiter und ihre Abhängigkeiten vorab zu laden. Mit Modularbeitern werden Skripte geladen und als Standard-JavaScript-Module ausgeführt. Dies bedeutet, dass sie vorinstalliert und sogar vorab analysiert werden können Modulvorladung:

<Verknüpfung rel="Modulvorladung" href="worker.js">
<Skript>
addEventListener('load', () => {
const Arbeiter = new Arbeiter('worker.js', { Art: 'module' });
});
</Skript>

Die vorinstallierten Module können sowohl vom Hauptthread als auch von den Modularbeitern verwendet werden. Dies ist nützlich für Module, die in beiden Kontexten importiert werden, oder in Fällen, in denen nicht im Voraus bekannt ist, ob ein Modul im Hauptthread oder in einem Worker verwendet wird.

Bisher waren die verfügbaren Optionen zum Vorladen von Web-Worker-Skripten begrenzt und nicht unbedingt zuverlässig. Klassische Worker hatten einen eigenen Ressourcentyp "Worker" zum Vorladen, aber es wurden keine Browser implementiert . Infolgedessen war die Haupttechnik, die zum Vorladen von Web-Workern verfügbar war, die Verwendung , que se basó completamente en la caché HTTP. Cuando se usa en combinación con los Überschriften de almacenamiento en caché correctos, esto hizo posible evitar que la instanciación del trabajador tuviera que esperar para descargar el script del trabajador. Sin embargo, a diferencia de
Modulvorladung Diese Technik unterstützte das Vorladen oder Vorparsen von Abhängigkeiten nicht.

Was ist mit geteilten Arbeitern?

Geteilte Arbeiter wurden mit Unterstützung für JavaScript-Module ab Chrome 83 aktualisiert. Erstellen Sie wie dedizierte Worker einen gemeinsam genutzten Worker mit dem {Typ: "Modul"} Die Option lädt jetzt das Jobskript als Modul anstelle eines klassischen Skripts:

const Arbeiter = new SharedWorker('/worker.js', {
Art: 'module'
});

Vor der Kompatibilität mit JavaScript-Modulen SharedWorker () Der Konstruktor erwartete nur eine URL und eine Option Süßkartoffel Streit. Dies funktioniert weiterhin für die klassische Nutzung von Worker-Sharing. Das Erstellen von Shared Worker-Modulen erfordert jedoch die Verwendung des neuen Optionen Streit. das Verfügbare Optionen
sind die gleichen wie die eines engagierten Arbeiters, einschließlich der Süßkartoffel Option, die die vorherige ersetzt Süßkartoffel Streit.

Was ist mit dem Servicemitarbeiter?

Die Spezifikation des Servicemitarbeiters wurde bereits aktualisiert Unterstützung beim Akzeptieren eines JavaScript-Moduls als Einstiegspunkt unter Verwendung desselben {Typ: "Modul"} Option als Modularbeiter, diese Änderung wurde jedoch noch nicht in Browsern implementiert. In diesem Fall kann ein Servicemitarbeiter mithilfe eines JavaScript-Moduls mithilfe des folgenden Codes instanziiert werden:

Navigator.serviceWorker.registrieren('/sw.js', {
Art: 'module'
});

Nachdem die Spezifikation aktualisiert wurde, beginnen die Browser, das neue Verhalten zu implementieren. Dies nimmt Zeit in Anspruch, da mit der Integration von JavaScript-Modulen in den Service Worker einige zusätzliche Komplikationen verbunden sind. Der Servicemitarbeiterdatensatz muss Vergleichen Sie importierte Skripte mit ihren vorherigen zwischengespeicherten Versionen Wenn Sie festlegen, ob ein Update ausgelöst werden soll, sollte dies für JavaScript-Module implementiert werden, wenn es für Servicemitarbeiter verwendet wird. Darüber hinaus müssen Servicemitarbeiter in der Lage sein Cache überspringen für Skripte in bestimmten Fällen bei der Suche nach Updates.

Zusätzliche Ressourcen und weiterführende Literatur