Verwenden Sie Web-Worker, um JavaScript über den Hauptbrowser-Thread auszuführen

Eine Off-the-Thread-Architektur kann die Zuverlässigkeit und Benutzererfahrung Ihrer Anwendung erheblich verbessern.

5. Dezember 2019

En los últimos 20 años, la web ha evolucionado drásticamente desde documentos estáticos con algunos estilos e imágenes hasta aplicaciones complejas y dinámicas. Sin embargo, una cosa se ha mantenido prácticamente sin cambios: solo tenemos un hilo por pestaña del 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 (con algunas excepciones) para hacer el trabajo de renderizar nuestros sitios y ejecutar nuestro 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.

Infolgedessen ist der Hauptfaden unglaublich überarbeitet. Und mit zunehmender Komplexität von Webanwendungen wird der Hauptthread zu einem erheblichen Leistungsengpass. Um die Sache noch schlimmer zu machen, dauert es für einen bestimmten Benutzer so lange, bis der Code im Hauptthread ausgeführt ist fast völlig unvorhersehbar
weil die Fähigkeiten des Geräts einen großen Einfluss auf die Leistung haben. Diese Unvorhersehbarkeit wird nur zunehmen, wenn Benutzer von einer immer vielfältigeren Gruppe von Geräten auf das Internet zugreifen, von Telefonen mit eingeschränkten Funktionen bis hin zu leistungsstarken Flaggschiff-Maschinen mit hoher Bildwiederholfrequenz.

Wenn wir möchten, dass anspruchsvolle Webanwendungen die Leistungsrichtlinien wie z RAIL-Modell- Was auf empirischen Daten zur menschlichen Wahrnehmung und Psychologie basiert - wir brauchen Wege, um unseren Code auszuführen außerhalb des Hauptfadens (OMT).

Threads mit Web-Workern

Native Plattformen unterstützen im Allgemeinen die parallele Arbeit, indem Sie einem Thread eine Funktion zuweisen können, die parallel zum Rest Ihres Programms ausgeführt wird. Sie können von beiden Threads aus auf dieselben Variablen zugreifen, und der Zugriff auf diese Freigaben kann mit Mutex und Semaphoren synchronisiert werden, um Race-Bedingungen zu vermeiden.

En JavaScript, podemos obtener una funcionalidad similar de los trabajadores web, que existen desde 2007 y son compatibles con los principales 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 desde 2012. Los trabajadores web se ejecutan en paralelo con el hilo principal, pero a diferencia del hilo nativo, no pueden compartir variables.

Übergeben Sie zum Erstellen eines Web-Workers eine Datei an den Konstruktor des Workers, der diese Datei in einem separaten Thread ausführt:

const Arbeiter = new Arbeiter("./worker.js");

Kommunizieren Sie mit dem Web Worker, indem Sie Nachrichten über das senden
POST-Meldung API. Übergeben Sie den Nachrichtenwert als Parameter in der POST-Meldung Rufen Sie an und fügen Sie dem Worker einen Listener für Nachrichtenereignisse hinzu:

main.js

const Arbeiter = new Arbeiter("./worker.js");
Arbeiter.POST-Meldung([40, 2]);

worker.js

addEventListener("message", Veranstaltung => {
const [zu, b] = Veranstaltung.Daten;
});

Verwenden Sie dasselbe, um eine Nachricht an den Hauptthread zu senden POST-Meldung 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 en el trabajador web y configure un detector de eventos en el hilo principal:

main.js

const Arbeiter = new Arbeiter("./worker.js");
Arbeiter.POST-Meldung([40, 2]);
Arbeiter.addEventListener("message", Veranstaltung => {
  console.Log(Veranstaltung.Daten);
});

worker.js

addEventListener("message", Veranstaltung => {
  const [zu, b] = Veranstaltung.Daten;
  
  POST-Meldung(zu+b);
});

Es ist wahr, dass dieser Ansatz etwas begrenzt ist. In der Vergangenheit wurden Web-Worker hauptsächlich verwendet, um ein einzelnes Hochleistungsstück vom Hauptfaden abzuziehen. Der Versuch, mehrere Vorgänge mit einem einzigen Web-Worker abzuwickeln, wird schnell unhandlich. Sie müssen nicht nur die Parameter, sondern auch den Vorgang in der Nachricht codieren und die Abrechnung durchführen, um die Antworten mit den Anforderungen abzugleichen. Diese Komplexität ist wahrscheinlich der Grund, warum Web-Worker nicht weiter verbreitet sind.

Wenn wir jedoch einige der Kommunikationsschwierigkeiten zwischen dem Hauptthread und den Web-Workern beseitigen könnten, könnte dieses Modell für viele Anwendungsfälle ideal sein. Und zum Glück gibt es eine Bibliothek, die genau das tut!

Comlink: Web-Worker weniger arbeiten lassen

Comlink es una biblioteca cuyo Ziel¿Qué es un objetivo?En marketing, un objetivo es el resultado que se pretende alcanzar en un periodo de tiempo, a través el uso de los recursos disponibles. Por tanto, se debe formular de una forma clara y hace falta que sea accesible y medible. Plus es permitirle utilizar trabajadores web sin tener que pensar en los detalles de POST-Meldung. Comlink le permite compartir variables entre los trabajadores web y el hilo principal casi como lenguajes de ProgrammierungConcepto de Programación¿Qué es la Programación?La Programación es el procedimiento al que se recurre para crear algún tipo de aplicación o software, para materializar un concepto o proyecto que requiere de la utilización de un lenguaje informático para poder llevarse a cabo. Es algo que está absolutamente ligado a la figura del programador, y que cada vez está cobrando más relevancia dentro del mundo del marketing.Decimos que tanto esta figura Plus que soportan de forma nativa el hilo.

Sie konfigurieren Comlink, indem Sie es in einen Web Worker importieren und eine Reihe von Funktionen definieren, die für den Hauptthread verfügbar gemacht werden sollen. Anschließend importieren Sie Comlink in den Hauptthread, wickeln den Worker ein und erhalten Zugriff auf die bereitgestellten Funktionen:

worker.js

importieren {expose} desde "comlink";
const api = {
someMethod() {  }
}
expose(api);

main.js

importieren {wrap} desde "comlink";
const Arbeiter = new Arbeiter("./worker.js");
const api = wrap(Arbeiter);

das api Die Variable im Hauptthread verhält sich genauso wie die im Webworker, außer dass jede Funktion ein Versprechen eines Werts anstelle des Werts selbst zurückgibt.

Welchen Code soll ich an einen Webworker übertragen?

Web-Worker haben keinen Zugriff auf das DOM und viele APIs wie WebUSB,
WebRTCoder
Web AudioSie können also keine Teile Ihrer Anwendung, die von einem solchen Zugriff abhängen, einem Mitarbeiter zuweisen. Dennoch erzeugt jeder kleine Code, der an einen Mitarbeiter übergeben wird, mehr Kopffreiheit im Hauptthread für die Dinge, die Es hat estar allí, como actualizar la Benutzeroberfläche  Una interfaz de usuario es un medio por medio de del cual una persona puede controlar un software o hardware específico. Lo ideal es que las interfaces de usuario sean fáciles de utilizar para que la interacción sea lo más instintiva e intuitiva factible. En el caso de los programas informáticos, esto se denomina interfaz gráfica de usuario. Desarrollo y tipos de interfaces de usuario A diferencia de la Plus.

Ein Problem für Webentwickler besteht darin, dass die meisten Webanwendungen auf einem Benutzeroberflächen-Framework wie Vue oder React basieren, um alles in der Anwendung zu orchestrieren. Alles ist Bestandteil des Frameworks und daher inhärent an das DOM gebunden. Dies scheint die Migration auf eine OMT-Architektur schwierig zu machen.

Wenn wir jedoch zu einem Modell wechseln, bei dem Bedenken hinsichtlich der Benutzeroberfläche von anderen Belangen wie der Statusverwaltung getrennt sind, können Web-Worker selbst bei Framework-basierten Anwendungen sehr nützlich sein. Genau das ist der Ansatz von PROXX.

PROXX: eine OMT-Fallstudie

Das Google Chrome-Team hat PROXX als konformen Minesweeper-Klon entwickelt
Progressive Web-App requisitos, incluido trabajar sin conexión y tener una BenutzererfahrungEl término experiencia de usuario (UX) se refiere a la experiencia que un usuario tiene con un producto o servicio. En cuanto a Internet, el término se usa frecuentemente al examinar la experiencia que los usuarios disponen con una web. Esto además puede ser en referencia al uso de un dispositivo smartphone (UX smartphone). Items de la experiencia del usuario La experiencia del usuario y la usabilidad se usan frecuentemente Plus atractiva. Desafortunadamente, las primeras versiones del juego funcionaron mal en dispositivos restringidos como los teléfonos con funciones, lo que llevó al equipo a darse cuenta de que el hilo principal era un cuello de botella.

Das Team entschied sich für die Verwendung von Web-Workern, um den visuellen Status des Spiels von seiner Logik zu trennen:

• Der Haupt-Thread behandelt das Rendern von Animationen und Übergängen.
• Ein Web-Worker kümmert sich um die Logik des Spiels, die rein rechnerisch ist.

OMT hatte interessante Auswirkungen auf die Leistung des PROXX-Funktionstelefons. In der Nicht-OMT-Version friert die Benutzeroberfläche sechs Sekunden lang ein, nachdem der Benutzer mit ihr interagiert hat. Es gibt keine Kommentare und der Benutzer muss die vollen sechs Sekunden warten, bevor er etwas anderes tun kann.

In der OMT-Version dauert das Spiel jedoch zwölf Sekunden, um ein Update der Benutzeroberfläche abzuschließen. Dies scheint zwar ein Leistungsverlust zu sein, führt jedoch zu mehr Benutzerfeedback. Die Verlangsamung tritt auf, weil die Anwendung mehr Frames sendet als die Nicht-OMT-Version, die keine Frames sendet. Daher weiß der Benutzer, dass etwas passiert, und kann weiter spielen, wenn die Benutzeroberfläche aktualisiert wird, wodurch sich das Spiel erheblich besser anfühlt.

Dies ist ein bewusster Kompromiss: Wir bieten Benutzern eingeschränkter Geräte eine Erfahrung, die Gefühl besser, ohne Benutzer von High-End-Geräten zu bestrafen.

Implikationen einer OMT-Architektur

Wie das PROXX-Beispiel zeigt, sorgt OMT dafür, dass Ihre Anwendung auf einer größeren Anzahl von Geräten zuverlässig ausgeführt wird, aber Ihre Anwendung wird dadurch nicht schneller:

• Sie verschieben einfach die Arbeit aus dem Hauptfaden, ohne die Arbeit zu reduzieren.
• Der zusätzliche Kommunikationsaufwand zwischen dem Web-Worker und dem Haupt-Thread kann die Dinge manchmal etwas verlangsamen.

Berücksichtigung der Kompromisse

Da der Hauptthread Benutzerinteraktionen wie das Scrollen während der Ausführung von JavaScript frei verarbeiten kann, werden weniger Frames gelöscht, obwohl die Gesamtwartezeit möglicherweise etwas länger ist. Es ist vorzuziehen, den Benutzer ein wenig warten zu lassen, anstatt einen Frame zu löschen, da die Fehlerquote bei verworfenen Frames geringer ist: Das Löschen eines Frames erfolgt in Millisekunden Hunderte Millisekunden, bevor ein Benutzer das Zeitlimit wahrnimmt.

Aufgrund der Unvorhersehbarkeit der Leistung zwischen Geräten ist das Ziel der OMT-Architektur wirklich wichtig Risikominderung- Machen Sie Ihre Anwendung robuster gegen sehr variable Laufzeitbedingungen - nicht über die Leistungsvorteile der Parallelisierung. Die verbesserte Wiederherstellbarkeit und UX-Verbesserungen sind einen kleinen Kompromiss bei der Geschwindigkeit wert.

Ein Hinweis zu Werkzeugen

Web-Worker sind noch kein Mainstream, weshalb die meisten Modul-Tools wie z WebPack
y Aufrollen"Unterstütze sie nicht von Anfang an." ((Packen oder packen Obwohl ja!) Glücklicherweise gibt es Plugins, mit denen Web-Worker erstellt werden können. Job mit WebPack und Rollup:

zusammenfassend

Um sicherzustellen, dass unsere Anwendungen insbesondere in einem zunehmend globalen Markt so zuverlässig und zugänglich wie möglich sind, müssen wir eingeschränkte Geräte unterstützen. Auf diese Weise greifen die meisten Benutzer weltweit auf das Web zu. OMT bietet eine vielversprechende Möglichkeit, die Leistung auf solchen Geräten zu steigern, ohne die Benutzer von High-End-Geräten zu beeinträchtigen.

Darüber hinaus hat OMT sekundäre Vorteile:

Web-Mitarbeiter müssen nicht beängstigend sein. Tools wie Comlink entlasten die Mitarbeiter und machen sie zu einer praktikablen Option für eine Vielzahl von Webanwendungen.