Web worker aka Event loop en anglais simple

JavaScript est un langage de programmation à thread unique, ce qui signifie qu'il ne peut traiter qu'une seule tâche à la fois. Cela peut être une limitation pour certains types d'applications, car cela peut entraîner des goulots d'étranglement des performances si la tâche en cours de traitement prend beaucoup de temps.

Un exemple de ceci peut être vu dans une page Web qui utilise JavaScript pour effectuer une opération fastidieuse, telle que la récupération de données à partir d'un serveur ou le rendu d'une grande quantité de données à l'écran. Pendant que cette opération est en cours, l'interface utilisateur de la page Web ne répondra pas et tout autre code JavaScript qui tente de s'exécuter devra attendre que la tâche en cours soit terminée.

Pour contourner cette limitation, les développeurs peuvent utiliser des techniques telles que les web workers, qui permettent au code JavaScript de s'exécuter en arrière-plan sur un thread séparé, ou ils peuvent utiliser des bibliothèques telles que Async.js, qui permettent d'écrire du code asynchrone dans un style plus synchrone.

Cependant, JavaScript dispose également d'un mécanisme appelé Event Loop, qui lui permet de gérer plusieurs tâches de manière asynchrone. La boucle d'événements vérifie la file d'attente des messages pour les nouveaux messages (c'est-à-dire les tâches) et les traite un par un. Par conséquent, JavaScript peut gérer plusieurs tâches en même temps, même s'il s'agit d'un seul thread.

En conclusion, JavaScript est monothread, ce qui signifie qu'il ne peut traiter qu'une seule tâche à la fois. Cela peut entraîner des goulots d'étranglement des performances, mais peut être atténué par l'utilisation de web workers et de bibliothèques asynchrones ou en utilisant le mécanisme de boucle d'événements.

Voici un exemple d'utilisation de web workers en JavaScript pour effectuer une tâche chronophage en arrière-plan :

// main.js
// Create a new web worker and pass it the path to the worker script
const worker = new Worker('worker.js');
// Send data to the worker
worker.postMessage({ data: 'Hello, Worker!' });
// Listen for messages from the worker
worker.onmessage = (event) => {
 console.log(event.data);
}
// worker.js

// Listen for messages from the main thread
self.onmessage = (event) => {
  // Perform a time-consuming task
  const result = performExpensiveTask(event.data);
  
  // Send the result back to the main thread
  self.postMessage(result);
}

Voici un autre exemple d'utilisation de async/wait pour effectuer une opération asynchrone dans un style synchrone :

async function getData() {
  const response = await fetch('http://example.com/data');
  const data = await response.json();
  console.log(data);
}

getData();