Was sind Web Worker und wie können sie für eine optimierte Frontend-Leistung eingesetzt werden?

Hallo Leute, Vinyl ist wieder da! ?

Willkommen zurück auf meinem Blog. Ich weiß, es ist eine Weile her, aber ich freue mich, einige meiner neuesten Erkenntnisse und Erkenntnisse aus der Arbeit an einem Projekt zu teilen, an dem ich dieses Jahr beteiligt war – ein Vorlagenspielplatz, der zum Entwerfen, Testen und Experimentieren mit intelligenten Rechtsverträgen dient und Dokumente. Heute befassen wir uns mit Web Workern was sie sind, wie sie funktionieren und wie Sie sie nutzen können, um Ihre Frontend-Projekte voranzutreiben.

Okay, stellen wir uns also vor, Sie sind in einer Bar, um das richtige Bier zuzubereiten, und der Barkeeper (Ihr Hauptthema) muss gleichzeitig Bestellungen entgegennehmen, die Bestellung vorbereiten und die Theke reinigen. Wenn sie damit beschäftigt sind, eine komplizierte Bestellung zusammenzustellen (intensive Berechnungen), müssen alle anderen in der Schlange warten – frustrierend, nicht wahr? Stellen Sie sich nun vor, der Barkeeper hat einen Assistenten (einen Web Worker), der sich im Hintergrund um die Reinigung und Organisation der Pintgläser kümmert, während der Barkeeper sich auf die Annahme und Bestellung von Bestellungen konzentriert. Diese Teamarbeit sorgt für einen reibungsloseren Betrieb.

Das ist nur ein kurzer Überblick. Ich weiß, dass Sie aufgrund der Beschreibung vielleicht an eine API denken, lol, Nein, das ist nicht der Fall! Lasst uns gleich eintauchen.

Was sind Web Worker?

Web Worker in der Webentwicklung sind genau wie diese Assistenten. Sie erledigen schwere Aufgaben im Hintergrund und entlasten den Hauptthread, damit Ihre App reaktionsfähig und reibungslos bleibt. In diesem Artikel befassen wir uns mit Web Workern, erkunden ihre Schlüsselfunktionen, erklären, wie man mit ihnen umgeht, und demonstrieren anhand von drei realen Szenarien ihre Leistungsfähigkeit in der Frontend-Entwicklung. Ich gebe auch Tipps für die Verwendung von Web Workern in anderen Frameworks wie Vue, da der primäre Anwendungsfall hier React wäre.

Die drei Arten von Web Workern

Bevor wir uns mit der Verwendung von Web Workern befassen, wollen wir uns mit den drei Haupttypen befassen:

Dedizierte Worker: Diese sind spezifisch für ein einzelnes Skript und werden am häufigsten verwendet. Sie eignen sich perfekt für Aufgaben wie Hintergrundberechnungen oder die Verarbeitung von API-Aufrufen für eine App-Instanz.

Beispiel: Komprimieren von Daten für eine bestimmte Benutzersitzung.

Geteilte Worker:Diese können von mehreren Skripten oder Browser-Registerkarten gemeinsam genutzt werden, was sie ideal für Aufgaben macht, die tabübergreifende Kommunikation erfordern, wie z. B. das Synchronisieren von Daten über Tabs hinweg.

Beispiel: Konsistenz der Benutzersitzungsdaten über mehrere Browser-Registerkarten hinweg gewährleisten.

Service Worker: Im Gegensatz zu dedizierten und geteilten Workern fangen diese Netzwerkanfragen ab und fungieren als Proxy zwischen Ihrer App und dem Netzwerk. Sie werden häufig für Caching und Offline-Unterstützung verwendet.

Beispiel: Bereitstellung zwischengespeicherter Vorlagen, wenn ein Benutzer offline ist.

Weitere Informationen zu diesen Typen finden Sie in der Web Workers-Dokumentation von MDN.

Um zu wissen, welchen Arbeiter Sie einsetzen sollten, berücksichtigen Sie den Umfang Ihrer Aufgabe:

• Verwenden Sie dedizierte Worker für isolierte Einzelskriptaufgaben.

• Verwenden Sie Shared Worker für die Kommunikation mit mehreren Registerkarten.

• Verwenden Sie Servicemitarbeiter für netzwerkbezogene Aufgaben wie Caching oder Offline-Funktionen.

Der Hauptvorteil von Web Workern ist ihre Fähigkeit, diese Aufgaben aus dem Hauptthread auszulagern und so ein reibungsloses Benutzererlebnis zu gewährleisten. Die Kommunikation zwischen dem Hauptthread und dem Worker erfolgt über ein Nachrichtensystem unter Verwendung der APIs postMessage und onmessage.

Wichtige Web-Worker-Funktionen

• onmessage: Verarbeitet Nachrichten, die vom Hauptthread an den Worker gesendet werden.

self.onmessage = (event) => {
  console.log('Message received from main thread:', event.data);
};

• postMessage: Sendet Nachrichten vom Worker zurück an den Hauptthread.

self.postMessage('Task completed');

• Beenden: Stoppt die Ausführung des Workers.

worker.terminate();

• Fehlerbehandlung: Fängt Fehler im Worker ab.

self.onerror = (error) => {
  console.error('Worker error:', error.message);
};

Zu den weiteren nützlichen Funktionen gehören importScripts zum Laden externer Skripte, self.close zum Herunterfahren des Workers und setTimeout/setInterval für zeitgesteuerte Vorgänge. Weitere Einzelheiten finden Sie bei Bedarf in der Dokumentation.

Beispielanwendungsfälle in einem Web-Playground-Projekt

Hier sind drei praktische Szenarien, in denen Web Worker das Beispielprojekt „Template Playground“ erheblich verbessern können:

Fall 1: API-Aufrufe für Vorlagendaten

Das Abrufen von Vorlagendaten von APIs kann zu riesigen Datensätzen führen, die vor der Verwendung analysiert werden müssen. Dies kann den UI-Thread blockieren, wenn es direkt durchgeführt wird.

1. Erstellen Sie die Worker-Datei: Erstellen Sie dataParser.worker.js.

// dataParser.worker.js
self.onmessage = (event) => {
  const { rawData } = event.data;
  const parsedData = rawData.map((template) => ({
    name: template.name,
    tag: template.tag,
  }));

  self.postMessage(parsedData);
};

2. Verwenden Sie den Worker in React:

import React, { useState } from 'react';

export default function templateDataParser({ rawData }) {
  const [parsedData, setParsedData] = useState([]);

  const parseData = () => {
    const worker = new Worker(new URL('./dataParser.worker.js', import.meta.url));
    worker.postMessage({ rawData });

    worker.onmessage = (event) => {
      setParsedData(event.data);
      worker.terminate();
    };
  };

  return (
    <div>
      <button onClick={parseData}>Template Parsed Data</button>
      <pre class="brush:php;toolbar:false">{JSON.stringify(parsedData, null, 2)}

); }

Nach dem Login kopieren

Fall 2: URL-Komprimierung und Dekomprimierung

Damit Benutzer ihre Vorlagen über kompakte URLs teilen können, können Web Worker die Komprimierung und Dekomprimierung effizient durchführen.

1. Erstellen Sie die Worker-Datei: Erstellen Sie urlCompressor.worker.js.

// urlCompressor.worker.js
import LZString from 'lz-string';

self.onmessage = (event) => {
  const { action, data } = event.data;
  let result;

  if (action === 'compress') {
    result = LZString.compressToEncodedURIComponent(data);
  } else if (action === 'decompress') {
    result = LZString.decompressFromEncodedURIComponent(data);
  }

  self.postMessage(result);
};

2. Verwenden Sie den Worker in React:

import React, { useState } from 'react';

export default function URLCompressor({ template }) {
  const [compressedURL, setCompressedURL] = useState('');

  const compressTemplate = () => {
    const worker = new Worker(new URL('./urlCompressor.worker.js', import.meta.url));
    worker.postMessage({ action: 'compress', data: template });

    worker.onmessage = (event) => {
      setCompressedURL(event.data);
      worker.terminate();
    };
  };

  return (
    <div>
      <button onClick={compressTemplate}>Compress Template</button>
      <pre class="brush:php;toolbar:false">{compressedURL}

); }

Nach dem Login kopieren