JavaScript Academy · Leçon

Créer un Web Worker

Lancez un thread d’arrière-plan pour effectuer des tâches.

Créer un Web Worker est une leçon JavaScript Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage JavaScript Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours JavaScript Academy comprend 4 leçons au total.

Pourquoi utiliser des traitements Web en arrière-plan ?

JavaScript s’exécute sur un seul fil principal. Un calcul long bloque tout : l’interface se fige et les clics ne répondent plus. Les traitements Web en arrière-plan exécutent des scripts sur un fil d’exécution distinct, ce qui permet à la page de rester réactive.

Créer un traitement en arrière-plan

Créez un traitement en arrière-plan en transmettant l’URL d’un script au constructeur Worker. Le navigateur charge ce fichier et l’exécute sur un fil distinct.

const worker = new Worker('worker.js');
// The code in worker.js now runs on its own thread.

Le script worker

Le fichier worker est du JavaScript ordinaire, mais il s’exécute dans sa propre portée globale (sans window, ni document). Il communique uniquement par messages.

// worker.js
console.log('worker started');
// This runs off the main thread.

Deux portées globales distinctes

La page principale et le worker disposent chacun de leur propre portée globale et de leur propre mémoire. Ils ne peuvent pas partager directement des variables ; ils échangent des copies de données par messages.

Fil principal : window, DOM, interface utilisateur
Fil du worker : self, calculs, pas de DOM

L’objet global dans le worker

Dans un worker, l’objet global est self (un DedicatedWorkerGlobalScope). Vous lui rattachez des gestionnaires et appelez ses API, même si self reste souvent implicite.

// worker.js
self.addEventListener('message', (e) => {
  console.log('worker got:', e.data);
});

Workers modulaires

Vous pouvez créer un worker qui utilise l’importation de modules ES via import en transmettant l’option type: 'module'. Cela permet au worker d’importer proprement d’autres modules.

const worker = new Worker('worker.js', { type: 'module' });
// Inside worker.js you can now use import statements.

Importer des scripts (classique)

Dans un worker classique (sans modules), utilisez importScripts pour charger des scripts supplémentaires de manière synchrone dans la portée du worker.

// Inside a classic worker:
importScripts('math-utils.js', 'helpers.js');
// Their globals are now available in the worker.

Arrêter un worker

Arrêtez un worker depuis le fil principal avec worker.terminate(), ou depuis l’intérieur avec self.close(). Cela libère le fil et sa mémoire.

// From the main thread:
worker.terminate();

// From inside the worker:
// self.close();

Gérer les erreurs du worker

Écoutez l’événement error du worker pour intercepter les exceptions non gérées qu’il génère. L’événement contient le message, le nom du fichier et le numéro de ligne.

worker.addEventListener('error', (e) => {
  console.log('worker error:', e.message, 'at line', e.lineno);
});

Exigence de même origine

Le script du worker doit être fourni depuis la même origine que la page, ou via une URL Blob. Vous ne pouvez pas charger directement un worker depuis une URL arbitraire d’une autre origine.

// Same-origin file path - works:
const w1 = new Worker('/js/worker.js');

// You can also build one from a Blob URL when needed.

Dédié ou partagé

Un Worker est dédié : il est lié à la page qui l’a créé. Un SharedWorker peut être utilisé par plusieurs pages de la même origine. Ce cours se concentre sur les traitements dédiés.

Vérification rapide

Vérifiez votre compréhension de la création de traitements Web en arrière-plan.

Récapitulatif

Vous avez appris à créer des traitements Web en arrière-plan :

new Worker('worker.js') crée un fil d’exécution en arrière-plan.
Le worker possède son propre objet global (self) et n’a pas accès au DOM.
Utilisez type: 'module' pour les importations, ou importScripts dans les workers classiques.
terminate() / self.close() l’arrêtent.
Les workers doivent être de même origine.

Ensuite, nous verrons la communication entre les fils d’exécution.

Questions Fréquemment Posées

La leçon « Créer un Web Worker » est-elle gratuite ?

Oui — le texte complet de « Créer un Web Worker » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours JavaScript Academy, passe à CoddyKit PRO. Le cours JavaScript Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Créer un Web Worker » ?

Lancez un thread d’arrière-plan pour effectuer des tâches. Tu pratiques JavaScript Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer JavaScript Academy ?

Aucune expérience préalable n'est requise. JavaScript Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.

Combien de temps prend la leçon « Créer un Web Worker » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon JavaScript Academy ?

Oui. Chaque leçon JavaScript Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

← Retour à JavaScript Academy