API des Web Workers HTML

Bases des Web Workers

Les bases des Web Workers couvrent les concepts de création, de communication et de terminaison des Web Workers. Pour créer un Web Worker, vous spécifiez le fichier script contenant le code du worker. La communication entre le script principal et le Web Worker se fait par passage de messages, en utilisant la méthode postMessage() pour envoyer des messages et le gestionnaire d'événements onmessage pour recevoir des messages. Lorsqu'un Web Worker n'est plus nécessaire, vous pouvez le terminer en utilisant la méthode terminate().

Utilisation des Web Workers

Les Web Workers offrent un mécanisme pour décharger les tâches gourmandes en CPU, exécuter des tâches en arrière-plan et gérer les scripts de longue durée sans bloquer le fil d'exécution principal. En utilisant les Web Workers, vous pouvez améliorer les performances et la réactivité de vos applications web.

Un cas d'utilisation des Web Workers est le déchargement des tâches gourmandes en CPU. Lorsque vous avez des opérations nécessitant beaucoup de calculs, comme des algorithmes complexes, du traitement d'images ou de l'analyse de données, vous pouvez déplacer ces tâches vers un Web Worker. Cela permet au fil principal de rester réactif, car les calculs intensifs sont effectués dans un fil séparé. Les utilisateurs peuvent continuer à interagir avec l'application pendant que le Web Worker gère le travail intensif en arrière-plan.

Les Web Workers sont également utiles pour effectuer des tâches en arrière-plan qui ne nécessitent pas d'interaction immédiate avec l'utilisateur.

// Fil principal
const worker = new Worker('worker.js');
worker.onmessage = function(event) {
    console.log('Données chargées:', event.data);
};
worker.postMessage('start');

// worker.js
self.onmessage = function(event) {
    if (event.data === 'start') {
        // Précharger les données ou effectuer une tâche en arrière-plan
        self.postMessage('données chargées');
    }
};

En exécutant ces tâches dans un Web Worker, vous pouvez vous assurer qu'elles n'interfèrent pas avec la réactivité du fil principal. Le Web Worker peut travailler en arrière-plan, récupérer des données ou effectuer des mises à jour, sans impacter l'expérience utilisateur.

Un autre scénario où les Web Workers excellent est la gestion des scripts de longue durée.

// Fil principal
const worker = new Worker('longTaskWorker.js');
worker.onmessage = function(event) {
    console.log('Tâche terminée:', event.data);
};
worker.postMessage('start');

// longTaskWorker.js
self.onmessage = function(event) {
    if (event.data === 'start') {
        // Effectuer une tâche de longue durée
        let result = effectuerCalculComplexe();
        self.postMessage(result);
    }
};

function effectuerCalculComplexe() {
    // Logique de calcul complexe
    return 'résultat calculé';
}

Si vous avez un script qui prend un temps considérable à s'exécuter, comme une tâche de traitement de données complexe ou une animation de longue durée, son exécution sur le fil principal peut figer l'interface utilisateur. En déplaçant le script de longue durée vers un Web Worker, vous pouvez garder le fil principal libre pour répondre aux interactions de l'utilisateur. Le Web Worker peut exécuter le script de manière asynchrone, permettant à l'application de rester réactive.

Communication avec les Web Workers

La communication avec les Web Workers implique l'envoi de messages entre le script principal et le Web Worker, ainsi que la réception de messages du Web Worker vers le script principal. La communication se fait par le biais de la méthode postMessage() et du gestionnaire d'événements onmessage.

Pour envoyer un message à un Web Worker, vous utilisez la méthode postMessage() depuis le script principal. La méthode postMessage() prend le message comme argument, qui peut être une valeur simple ou un objet.

// Script principal
const worker = new Worker('worker.js');
worker.postMessage('Bonjour du script principal');

Du côté du Web Worker, vous pouvez recevoir le message en configurant un gestionnaire d'événements onmessage. L'objet événement passé au gestionnaire contient les données du message dans sa propriété data.

// worker.js
self.onmessage = function(event) {
    console.log('Message reçu:', event.data);
};

De même, le Web Worker peut envoyer des messages au script principal en utilisant la méthode postMessage(). Le script principal peut recevoir ces messages en configurant son propre gestionnaire d'événements onmessage.

// worker.js
self.postMessage('Bonjour du Web Worker');

// Script principal
worker.onmessage = function(event) {
    console.log('Message reçu du worker:', event.data);
};

En plus d'envoyer des valeurs ou des objets simples, vous pouvez également transférer des données en utilisant des objets transférables. Les objets transférables vous permettent de passer de grandes quantités de données, telles que ArrayBuffer ou MessagePort, entre le script principal et le Web Worker sans copier les données. Cela peut aider à améliorer les performances lors du traitement de grands ensembles de données. Pour transférer des données, vous passez un tableau d'objets transférables comme deuxième argument à la méthode postMessage().

// Script principal
const largeData = new ArrayBuffer(1024 * 1024); // Données de 1 Mo
worker.postMessage({ data: largeData }, [largeData]);

// Script principal
worker.onmessage = function(event) {
    console.log('Message reçu du worker:', event.data);
    // Traiter le message et effectuer des actions
};

// worker.js
self.onmessage = function(event) {
    console.log('Message reçu:', event.data);
    // Traiter le message et effectuer des actions
    self.postMessage('Message traité');
};

Gestion des erreurs des Web Workers

La gestion des erreurs est un aspect important du travail avec les Web Workers. Elle implique la gestion des erreurs qui peuvent survenir dans le script du Web Worker et l'envoi de ces erreurs au script principal pour action.

Pour gérer les erreurs dans les Web Workers, vous devez écouter les événements d'erreur. Le script du Web Worker peut déclencher un événement d'erreur en utilisant le gestionnaire d'événements self.onerror. Ce gestionnaire d'événements est appelé lorsqu'une erreur se produit dans le script du Web Worker.

// worker.js
self.onerror = function(event) {
    console.error('Erreur dans le Web Worker:', event.message);
    // Gérer l'erreur ou effectuer des tâches de nettoyage
    self.postMessage({ error: event.message });
};

Dans l'exemple ci-dessus, le gestionnaire d'événements self.onerror est utilisé pour capturer toutes les erreurs qui se produisent dans le script du Web Worker. Vous pouvez enregistrer le message d'erreur, gérer l'erreur ou effectuer les tâches de nettoyage nécessaires.

Pour envoyer l'erreur au script principal, vous pouvez envoyer un message d'erreur en utilisant self.postMessage(). Le script principal peut alors écouter ce message d'erreur et prendre les mesures appropriées.

// Script principal
worker.onmessage = function(event) {
    if (event.data.error) {
        console.error('Erreur reçue du Web Worker:', event.data.error);
        // Gérer l'erreur dans le script principal
    }
};

Dans le script principal, vous pouvez vérifier si le message reçu contient une propriété d'erreur. Si une erreur est reçue, vous pouvez enregistrer le message d'erreur et le gérer.

// Script principal
const worker = new Worker('script-inexistant.js'); // Génère une erreur

// worker.js
console.log('Bonjour depuis le Web Worker') // Point-virgule manquant

// worker.js
const donneesVolumineuses = new Array(1000000000); // Allocation d'un grand tableau

Techniques avancées pour les Web Workers

Les Web Workers offrent des techniques avancées qui vous permettent d'étendre leur fonctionnalité et de les utiliser avec d'autres fonctionnalités et API JavaScript. Examinons certaines de ces techniques avancées.

L'importation de scripts dans les Web Workers est un moyen de modulariser et de réutiliser du code au sein d'un Web Worker. En utilisant la fonction importScripts(), vous pouvez charger des fichiers JavaScript externes dans la portée du Web Worker. Cela vous permet de diviser votre code de worker en fichiers séparés pour une meilleure organisation et maintenabilité.

// worker.js
importScripts('utility.js', 'math.js');

self.onmessage = function(event) {
    // Utiliser des fonctions ou des variables des scripts importés
    const result = performCalculation(event.data);
    self.postMessage(result);
};

L'utilisation des Web Workers avec des promesses est une autre technique puissante. Les promesses offrent un moyen de gérer les opérations asynchrones et d'améliorer la lisibilité du code. En enveloppant la communication entre le script principal et le Web Worker dans des promesses, vous pouvez créer un flux de données plus structuré et intuitif.

// Script principal
function performTask(data) {
    return new Promise((resolve, reject) => {
        const worker = new Worker('worker.js');
        worker.onmessage = function(event) {
            resolve(event.data);
        };
        worker.onerror = function(error) {
            reject(error);
        };
        worker.postMessage(data);
    });
}

// Utilisation
performTask('Données de la tâche')
    .then(result => {
        console.log('Résultat de la tâche:', result);
    })
    .catch(error => {
        console.error('Erreur de la tâche:', error);
    });

Combiner les Web Workers avec d'autres API ouvre de nouvelles possibilités. Par exemple, vous pouvez utiliser les Web Workers avec l'API File pour effectuer des tâches de traitement de fichiers en arrière-plan. Cela vous permet de lire et de modifier des fichiers sans bloquer le thread principal.

// Script principal
const fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', function(event) {
    const file = event.target.files[0];
    const worker = new Worker('fileWorker.js');
    worker.onmessage = function(event) {
        console.log('Fichier traité:', event.data);
    };
    worker.postMessage(file);
});

// fileWorker.js
self.onmessage = function(event) {
    const file = event.data;
    // Traiter le fichier dans le Web Worker
    // ...
    self.postMessage('Traitement du fichier terminé');
};

Exemples de Web Workers

Les Web Workers offrent un moyen de déplacer des tâches du thread principal et d'améliorer les performances des applications web. Examinons quelques exemples qui montrent l'utilisation des Web Workers dans différentes situations.

// Script principal (main.js)
const worker = new Worker('worker.js');
worker.onmessage = function(event) {
  console.log('Résultat reçu du worker :', event.data);
};
worker.postMessage(5);

// Script du worker (worker.js)
self.onmessage = function(event) {
  const number = event.data;
  const result = fibonacci(number);
  self.postMessage(result);
};

function fibonacci(n) {
  if (n <= 1) {
    return n;
  }
  return fibonacci(n - 1) + fibonacci(n - 2);
}

Dans cet exemple simple, le script principal crée un nouveau Web Worker et lui envoie un nombre en utilisant postMessage(). Le script du worker reçoit le message, calcule le nombre de Fibonacci en utilisant une fonction récursive, et renvoie le résultat au script principal en utilisant postMessage(). Le script principal affiche le résultat reçu dans la console.

// Script principal (main.js)
const worker = new Worker('worker.js');
worker.onmessage = function(event) {
  const { type, data } = event.data;
  if (type === 'progress') {
    updateProgressBar(data.progress);
  } else if (type === 'result') {
    displayResult(data.result);
  }
};
worker.postMessage({ type: 'start', data: { /* données complexes */ } });

// Script du worker (worker.js)
self.onmessage = function(event) {
  const { type, data } = event.data;
  if (type === 'start') {
    processData(data);
  }
};

function processData(data) {
  // Effectuer un traitement de données complexe
  for (let i = 0; i < data.length; i++) {
    // Traiter l'élément de données
    const progress = ((i + 1) / data.length) * 100;
    self.postMessage({ type: 'progress', data: { progress } });
  }
  const result = { /* données traitées */ };
  self.postMessage({ type: 'result', data: { result } });
}

Dans cet exemple plus complexe, le script principal envoie un message au worker avec un type et des données spécifiques. Le script du worker reçoit le message, vérifie le type du message et effectue l'action appropriée. Dans ce cas, lorsque le type de message est 'start', le worker traite les données reçues. Pendant le traitement, le worker envoie des mises à jour de progression au script principal en utilisant postMessage(). Une fois le traitement terminé, le worker envoie le résultat final au script principal. Le script principal gère les messages reçus en fonction de leur type, en mettant à jour la barre de progression ou en affichant le résultat.