Web Worker : un moyen d'exécuter des scripts en arrière-plan dans un thread différent du thread principal (fenêtre) actuel.

1. Travailleurs Web vs asynchrones utilisant event_loop
2. Présentation des Web Workers
3. comment créer un web worker
4. Par exemple avec un web worker
5. limitation des Web Workers
6. opération asynchrone dans Web Workers

1. Web Workers vs opérations asynchrones utilisant la boucle d'événements

JavaScript gère généralement les opérations asynchrones en plaçant les tâches dans les files d'attente correspondantes (file d'attente de macro-tâches, file d'attente de micro-tâches), la boucle d'événements vérifiant en permanence ces files d'attente et poussant les tâches dans la pile d'appels lorsqu'elles sont prêtes à être exécutées. Cette approche garantit une exécution non bloquante mais exécute toujours tout sur un seul thread.

Web Workers, d'autre part, permettent aux scripts de s'exécuter dans un thread complètement séparé avec sa propre pile d'appels, des files d'attente asynchrones et une boucle d'événements. Cette séparation empêche le thread principal d'être bloqué par des calculs lourds ou des tâches de longue durée, car le travailleur fonctionne de manière indépendante.

2. Introduction aux Web Workers

Les travailleurs Web exécutent des scripts dans un contexte différent de celui de la fenêtre principale, permettant le parallélisme dans les applications Web. L'API Web Worker propose plusieurs types de nœuds de calcul :

• Travailleurs dédiés : utilisés par un seul script, ils sont idéaux pour décharger les tâches du thread principal.
• Travailleurs partagés : accessibles par plusieurs scripts exécutés dans différents contextes (par exemple, différentes fenêtres ou iframes).
• Service Workers : fonctionnent comme un serveur proxy entre les applications Web, le navigateur et le réseau, fournissant des fonctionnalités telles que la prise en charge hors ligne et la mise en cache.

Cet article se concentre sur les travailleurs dédiés, qui sont les plus simples à mettre en œuvre et les plus couramment utilisés.

3. Comment créer un Web Worker

Pour créer un Web Worker, vous pouvez utiliser les méthodes clés suivantes :

• new Worker() : Le constructeur pour créer un nouveau travailleur.
• postMessage() : envoie des messages du fil de discussion principal au travailleur ou vice versa.
• onmessage : une fonction de rappel définie pour gérer les messages reçus par le travailleur.
• terminate() : arrête le travailleur immédiatement.

4. Exemple simple

Créons un travailleur pour récupérer les données d'une API, en particulier les images de chiens de l'API Dog CEO.

4.1 Code des travailleurs

Voici l'implémentation du script de travail. Notez qu'à l'intérieur du travailleur, self est utilisé pour faire référence au contexte global :

if (window.Worker) {
    const worker = new Worker("/src/worker.js");
        worker.postMessage({ 
            operation: "get_dog_imgs",
            url: "https://dog.ceo/api/breeds/image/random", 
            count: 5   //number of photos
        });
        worker.onmessage = (e) => {
        console.log(e.data);
        if (e && e.data) {
            setdata((old) => [...old, e.data]); // update react state
            showCallStack(); // function to show the callstack 
        }
    };
    worker.onerror = (e) => {
        console.log(e);
    };
}

Dans ce code, le travailleur écoute les messages (onmessage) et récupère les données de l'URL donnée plusieurs fois, comme spécifié par le nombre.

Voici à quoi ressemble la pile d'appels à l'intérieur du travailleur :

4.2 Code client

Le thread principal utilise le travailleur comme ceci :

self.onmessage = (event) => {
    const data = event.data;
    if (data && data.url && data.count) {
        fetchFromUrls(data.url, data.count);
    }
}
// fetch single data 
const fetchdata = async (url) => {
    const res = await self.fetch(url);
    return await res.json();
};

const fetchFromUrls = async (url, count) => {
    showCallStack(); // showing the callstack of the worker 
    for (const i of new Array(count).fill(0)) {
        let data = await fetchdata(url);
        if (data && data.message) {
            self.postMessage({ type: "img", data: data.message });
        }
    }
};

Ce code montre comment envoyer un message au travailleur et recevoir les données récupérées dans le thread principal.

pour le code complet, accédez au code

5. Limites des Web Workers

Bien que les Web Workers s'exécutent dans un thread distinct du thread de la fenêtre principale, ils présentent certaines limitations :

• Pas d'accès au DOM : les travailleurs ne peuvent pas manipuler directement le DOM. La communication avec le thread principal est nécessaire pour mettre à jour l'interface utilisateur.
• Consommation de ressources : la surutilisation des Web Workers peut entraîner une utilisation élevée de la mémoire, car chaque travailleur a besoin de ressources supplémentaires pour fonctionner de manière indépendante.