Que sont les Web Workers et comment les exploiter pour optimiser les performances du frontend

Bonjour les gars, Vinyle encore ici ! ?

Bienvenue sur mon blog. Je sais que cela fait longtemps, mais je suis ravi de partager certaines de mes dernières découvertes et apprentissages tout en travaillant sur l'un des projets sur lesquels j'ai participé cette année : un terrain de jeu de modèles utilisé pour rédiger, tester et expérimenter des contrats juridiques intelligents. et documents. Aujourd'hui, nous allons nous pencher sur les Web Workers : ce qu'ils sont, comment ils fonctionnent et comment vous pouvez les utiliser pour dynamiser vos projets frontend.

D'accord, imaginons que vous êtes dans un bar pour déguster une bonne bière, et que le barman (votre fil principal) doit prendre les commandes, préparer la commande et nettoyer le comptoir en même temps. S’ils sont occupés à préparer une commande compliquée (calculs lourds), tous les autres doivent attendre, ce qui est frustrant, non ? Imaginez maintenant que le barman ait un assistant (un Web Worker) qui s'occupe de nettoyer et d'organiser les verres à pinte en arrière-plan pendant que le barman se concentre sur la prise et la préparation des commandes. Ce travail d'équipe garantit des opérations plus fluides.

Ce n’est qu’un bref aperçu. Je sais que vous pensez peut-être à une API d'après la description mdr, non, ce n'est pas le cas ! Allons-y directement.

Que sont les travailleurs du Web ?

Les Web Workers dans le développement Web sont exactement comme cet assistant. Ils gèrent des tâches lourdes en arrière-plan, libérant le fil principal pour que votre application reste réactive et fluide. Dans cet article, nous allons nous plonger dans les Web Workers, explorer leurs fonctions clés, expliquer comment les naviguer et utiliser trois scénarios réels pour démontrer leur puissance dans le développement front-end. Je donnerai également des conseils pour utiliser les Web Workers dans d'autres frameworks comme Vue, car le cas d'utilisation principal ici serait React.

Les trois types de travailleurs Web

Avant de découvrir comment utiliser les Web Workers, comprenons les trois principaux types :

Travailleurs dédiés : Ceux-ci sont spécifiques à un seul script et sont les travailleurs les plus couramment utilisés. Ils sont parfaits pour des tâches telles que les calculs en arrière-plan ou la gestion des appels d'API pour une instance d'application.

Exemple : compression de données pour une session utilisateur spécifique.

Travailleurs partagés : Ceux-ci peuvent être partagés entre plusieurs scripts ou onglets de navigateur, ce qui les rend idéaux pour les tâches nécessitant une communication entre onglets, telles que la synchronisation des données entre les onglets.

Exemple : Garder la cohérence des données de session utilisateur sur plusieurs onglets du navigateur.

Service Workers : Contrairement aux travailleurs dédiés et partagés, ceux-ci interceptent les requêtes réseau et agissent comme un proxy entre votre application et le réseau. Ils sont couramment utilisés pour la mise en cache et le support hors ligne.

Exemple : diffusion de modèles mis en cache lorsqu'un utilisateur est hors ligne.

Vous pouvez en savoir plus sur ces types dans la documentation Web Workers de MDN.

Pour savoir quel travailleur utiliser, considérez l'étendue de votre tâche :

• Utilisez des travailleurs dédiés pour des tâches isolées à script unique.

• Utilisez Shared Workers pour la communication multi-onglets.

• Utilisez les Service Workers pour les tâches liées au réseau telles que la mise en cache ou les fonctionnalités hors ligne.

Le principal avantage des Web Workers est leur capacité à décharger ces tâches du thread principal, garantissant ainsi une expérience utilisateur fluide. La communication entre le thread principal et le travailleur s'effectue via un système de messagerie utilisant les API postMessage et onmessage.

Fonctions clés du travailleur Web

• onmessage : gère les messages envoyés du thread principal au travailleur.

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

• postMessage : renvoie les messages du travailleur au fil de discussion principal.

self.postMessage('Task completed');

• terminer : empêche le travailleur de s'exécuter.

worker.terminate();

• Gestion des erreurs : détecte les erreurs dans le travailleur.

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

D'autres fonctions utiles incluent importScripts pour charger des scripts externes, self.close pour arrêter le travailleur et setTimeout/setInterval pour les opérations chronométrées. Reportez-vous à la documentation pour plus de détails si nécessaire.

Exemples de cas d'utilisation dans un projet Web Playground

Voici trois scénarios pratiques dans lesquels les Web Workers peuvent améliorer considérablement l'exemple de projet Template Playground :

Cas 1 : appels API pour les données de modèles

La récupération des données de modèles à partir des API peut donner lieu à d'énormes ensembles de données qui doivent être analysés avant utilisation. Cela peut bloquer le fil de discussion de l'interface utilisateur si cela est effectué directement.

1. Créez le fichier Worker : Créez 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. Utilisez le Worker dans 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)}

); }

Copier après la connexion

Cas 2 : compression et décompression d'URL

Pour permettre aux utilisateurs de partager leurs modèles via des URL compactes, Web Workers peut gérer efficacement la compression et la décompression.

1. Créez le fichier Worker : Créez 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. Utilisez le Worker dans 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}

); }

Copier après la connexion