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 JavaScriptJavaScript es un lenguaje de programación que funciona en el lado del cliente y con el que las webs pueden ser más funcionales. Incorporación en código HTML El código JavaScript puede ser incrustado en las páginas HTML, para que adquieran funcionalidad. Existen varias opciones. Puede estar entre las etiquetas <SCRIPT> y </SCRIPT>, puede estar contenido en un archivo externo, puede ser un parámetro de las etiquetas HTML, y puede estar Plus en los trabajadores web.

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 APIConcepto de API¿Qué es una API?Una API, siglas de Application Programming Interface o Interfaz de Programación de Apps, es un recopilatorio de código que se puede emplear para que varias apps se comuniquen entre ellas. Es algo que realiza una tarea equivalente a la interfaz de usuario al momento de promover la interacción entre persona y programa, solo que aplicado única y exclusivamente dentro del entorno del software.Aún cuando suene Plus 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 BrowserConcepto de Navegadores¿Qué son los Navegadores?Los Navegadores son herramientas informáticas que utilizamos para, normalmente, navegar por Internet y visitar cualquier página web, al mismo tiempo de para hacer otras tareas como ver documentos, observar vídeos o reproducir contenido multimedia de cualquier tipo. Son un tipo de software sencillamente usual y bastante utilizado hoy en día.Insistimos en que es algo que se utiliza con mucha frecuencia, puesto que moverse por Internet Plus durante más de diez años. Si bien eso significa que los trabajadores tienen un excelente soporte de BrowserUn navegador (además: browser) es una herramienta informática que te permite ver documentos y datos y navegar por la red. Los navegadores pueden mostrar distintos tipos de recursos de información; principalmente documentos HTML, a pesar de todo, además son posibles otros tipos de archivos y contenido multimedia, como PDF, JPEG, MPEG, GIF o el lenguaje de meta marcado. A través el uso de complementos especiales y la configuración respectivo, los Plus 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 SkripteConcepto de Scripts¿Qué son los Scripts?Los Scripts son fragmentos de código que se usan para dar forma a herramientas tanto en Internet como en el sector de la informática en general. Son una parte crucial del software, puesto que se trata exactamente del código que conforma a una aplicación en su totalidad o a una de sus funciones, como además el que puedes hallar explorando cómo está hecha una web.Desde Plus 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 UrlEl URL (Localizador Uniforme de Recursos), es una dirección definida que apunta a la posición de un archivo en un servidor y lo recupera. Las URL se introducen en un navegador web para ingresar a documentos en la web o se incrustan como hipervínculos dentro de un documento. Se puede usar un Permalink para que una URL esté disponible de forma permanente. Componentes de una URL • prefijo de protocolo Plus, 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 ZwischenspeicherUn caché es un tipo de memoria auxiliar de la que se puede recuperar a alta velocidad con una capacidad de almacenamiento relativamente pequeña. Se encuentra entre la unidad central de procesamiento (CPU) y la memoria principal. Ayuda a evitar el acceso al disco duro o los recálculos complejos almacenando temporalmente ciertos datos y haciéndolos disponibles rápidamente cuando sea necesario. El caché almacena una copia de la petición actual y Plus 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 definiertWährend bei klassischen Arbeitern der Wert die globale Reichweite des Arbeiters ist. Zum Glück gab es schon immer eine 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é HTTPEl HTTP (Hyper Text Transfer Protocol) es un protocolo que se usa para transmitir datos en redes. HTTP es un estándar técnico generalmente aceptado que establece cómo un cliente web se comunica con un servidor para que los datos solicitados por el cliente puedan ser cargados y mostrados. Información general Junto con el URL y el HTML, HTTP es uno de los conceptos más importantes de Internet (www). Fue desarrollado Plus. Cuando se usa en combinación con los ÜberschriftenConcepto de Encabezados¿Qué son los Encabezados?Los Encabezados, además conocidos como headers en inglés, son una parte fundamental del diseño de cualquier web, dado que consiste en la parte principal que se ve de esta al acceder, la parte de arriba de cualquier página. El lugar más visible y al que todos los usuarios que visitan un lugar de Internet acceden cuando entran en él, pudiendo tener así una imagen rápida Plus 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