Web Workers pour les calculs lourds

Imagine que le laboratoire du parc séquence l'ADN du T-Rex et que, pendant ce temps, la salle de contrôle se fige : les caméras sont bloquées et le bouton d'alarme ne répond plus. C'est ainsi que se comporte le navigateur quand des calculs lourds atterrissent dans le thread principal. Les Web Workers sont une technologie qui permet d'exécuter du JavaScript dans des threads séparés, indépendamment du thread principal de l'UI (User Interface), ce qui garde l'interface réactive.

Ce que tu vas apprendre :

• déplacer des calculs vers un thread séparé et dialoguer avec lui via postMessage
• reconnaître les limites d'un worker et distinguer Dedicated, Shared et Service Worker
• construire un pool de workers et partager de la mémoire grâce à SharedArrayBuffer
• mesurer les performances et gérer les pannes des workers

Pourquoi les Web Workers sont-ils nécessaires ?

Le problème de la nature monothread de JavaScript

Ton code s'exécute dans un seul thread principal, qui gère aussi les clics, le défilement et le dessin de la page. Regarde ce qu'une longue boucle lui fait subir :

1// Problème : des calculs bloquants dans le thread principal
2function heavyCalculation(n) {
3  console.log('Début des calculs lourds...');
4
5  // Simulation de calculs intensifs
6  let result = 0;
7  for (let i = 0; i < n; i++) {
8    for (let j = 0; j < 1000000; j++) {
9      result += Math.sqrt(i * j);
10    }
11  }
12
13  console.log('Calculs terminés');
14  return result;
15}
16
17// Cela va bloquer l'UI pendant plusieurs secondes !
18document.getElementById('calculate-button').addEventListener('click', () => {
19  const result = heavyCalculation(5000);
20  document.getElementById('result').textContent = result;
21});
22
23// Pendant les calculs, l'utilisateur ne peut pas :
24// - Cliquer sur d'autres boutons
25// - Faire défiler la page
26// - Profiter des animations
27// - Saisir du texte dans les formulaires

Tant que les calculs durent, la boucle d'événements (event loop) ne traite ni clic ni image d'animation. C'est précisément ce problème que résolvent les Web Workers.

Comparaison des performances

Un worker ne calcule pas plus vite, car c'est le même moteur JavaScript. La différence tient à qui attend. Cette ébauche de benchmark compare les deux approches :

1// Benchmark: Main Thread vs Web Worker
2const performanceTest = {
3  // Test sans Web Worker - bloque l'UI
4  async testMainThread() {
5    console.time('Main Thread Calculation');
6
7    const start = performance.now();
8    const result = this.calculatePrimes(100000);
9    const end = performance.now();
10
11    console.timeEnd('Main Thread Calculation');
12
13    return {
14      result: result.length,
15      time: end - start,
16      blocked: true
17    };
18  },
19
20  // Test avec Web Worker - ne bloque pas l'UI
21  async testWebWorker() {
22    console.time('Web Worker Calculation');
23
24    const start = performance.now();
25    const result = await this.calculatePrimesWorker(100000);
26    const end = performance.now();
27
28    console.timeEnd('Web Worker Calculation');
29
30    return {
31      result: result.length,
32      time: end - start,
33      blocked: false
34    };
35  },
36
37  calculatePrimes(max) {
38    const primes = [];
39    for (let i = 2; i <= max; i++) {
40      if (this.isPrime(i)) {
41        primes.push(i);
42      }
43    }
44    return primes;
45  },
46
47  isPrime(num) {
48    for (let i = 2; i <= Math.sqrt(num); i++) {
49      if (num % i === 0) return false;
50    }
51    return true;
52  }
53};

Le temps est parfois similaire, mais avec un worker, l'interface continue de réagir du début à la fin.

Implémentations de base des Web Workers

Créer un Web Worker simple

Tu crées un worker avec le constructeur new Worker('worker.js'), qui lance le script dans un thread séparé. L'ordre compte : installe d'abord l'écoute onmessage, envoie ensuite les données avec postMessage, et termine enfin le travail avec la méthode terminate() :

1// main.js - le thread principal
2class WebWorkerManager {
3  constructor() {
4    this.worker = null;
5    this.setupWorker();
6  }
7
8  setupWorker() {
9    // Vérification de la prise en charge des Web Workers
10    if (typeof Worker !== 'undefined') {
11      this.worker = new Worker('worker.js');
12
13      // Gestion des messages venant du worker
14      this.worker.onmessage = (event) => {
15        this.handleWorkerMessage(event.data);
16      };
17
18      // Gestion des erreurs
19      this.worker.onerror = (error) => {
20        console.error('Worker error:', error);
21      };
22
23      console.log('Le Web Worker a été créé');
24    } else {
25      console.warn('Les Web Workers ne sont pas pris en charge par ce navigateur');
26    }
27  }
28
29  // Envoi d'une tâche au worker
30  sendTask(taskType, data) {
31    if (this.worker) {
32      this.worker.postMessage({
33        type: taskType,
34        data: data,
35        timestamp: Date.now()
36      });
37    }
38  }
39
40  // Gestion des réponses du worker
41  handleWorkerMessage(message) {
42    switch (message.type) {
43      case 'CALCULATION_COMPLETE':
44        this.displayResult(message.result);
45        break;
46      case 'PROGRESS_UPDATE':
47        this.updateProgress(message.progress);
48        break;
49      case 'ERROR':
50        this.handleError(message.error);
51        break;
52    }
53  }
54
55  // Fin du travail du worker
56  terminateWorker() {
57    if (this.worker) {
58      this.worker.terminate();
59      this.worker = null;
60      console.log('Le Web Worker a été arrêté');
61    }
62  }
63}
64
65// Utilisation
66const workerManager = new WebWorkerManager();
67
68// Envoi d'une tâche de calcul
69document.getElementById('start-calculation').addEventListener('click', () => {
70  workerManager.sendTask('CALCULATE_PRIMES', { max: 100000 });
71});

Tu lis la réponse dans event.data, en affectant une fonction à onmessage ou avec addEventListener('message', ...). Les données ne sont pas partagées : le navigateur les copie avec l'algorithme structured clone, donc tu ne peux envoyer ni fonctions ni éléments du DOM.

Implémentation de worker.js

De l'autre côté, le worker écoute via self.onmessage, répond via self.postMessage et peut signaler sa progression :

1// worker.js - le code exécuté dans un thread séparé
2class WorkerCalculations {
3  constructor() {
4    this.setupMessageHandler();
5  }
6
7  setupMessageHandler() {
8    // Handler principal des messages venant du thread principal
9    self.onmessage = (event) => {
10      const { type, data, timestamp } = event.data;
11
12      try {
13        this.handleTask(type, data, timestamp);
14      } catch (error) {
15        this.sendError(error.message);
16      }
17    };
18  }
19
20  handleTask(type, data, timestamp) {
21    switch (type) {
22      case 'CALCULATE_PRIMES':
23        this.calculatePrimes(data.max);
24        break;
25      case 'PROCESS_IMAGE':
26        this.processImage(data.imageData);
27        break;
28      case 'SORT_LARGE_ARRAY':
29        this.sortArray(data.array);
30        break;
31      case 'MONTE_CARLO_PI':
32        this.calculatePiMonteCarlo(data.iterations);
33        break;
34      default:
35        this.sendError(`Unknown task type: ${type}`);
36    }
37  }
38
39  // Calcul des nombres premiers avec suivi de la progression
40  calculatePrimes(max) {
41    const primes = [];
42    const updateInterval = Math.floor(max / 100); // Mise à jour tous les 1 %
43
44    for (let i = 2; i <= max; i++) {
45      if (this.isPrime(i)) {
46        primes.push(i);
47      }
48
49      // Signalement de la progression
50      if (i % updateInterval === 0) {
51        const progress = (i / max) * 100;
52        this.sendProgress(progress);
53      }
54    }
55
56    this.sendResult('CALCULATION_COMPLETE', {
57      primes: primes,
58      count: primes.length,
59      executionTime: performance.now()
60    });
61  }
62
63  isPrime(num) {
64    if (num < 2) return false;
65    for (let i = 2; i <= Math.sqrt(num); i++) {
66      if (num % i === 0) return false;
67    }
68    return true;
69  }
70
71  // Traitement d'image (filtrage, transformations)
72  processImage(imageData) {
73    const { data, width, height, filterType } = imageData;
74
75    switch (filterType) {
76      case 'grayscale':
77        this.applyGrayscaleFilter(data);
78        break;
79      case 'blur':
80        this.applyBlurFilter(data, width, height);
81        break;
82      case 'edge':
83        this.applyEdgeDetection(data, width, height);
84        break;
85    }
86
87    this.sendResult('IMAGE_PROCESSED', {
88      processedData: data,
89      filterApplied: filterType
90    });
91  }
92
93  applyGrayscaleFilter(data) {
94    for (let i = 0; i < data.length; i += 4) {
95      const gray = data[i] * 0.299 + data[i + 1] * 0.587 + data[i + 2] * 0.114;
96      data[i] = gray;     // Red
97      data[i + 1] = gray; // Green
98      data[i + 2] = gray; // Blue
99      // Alpha (i + 3) remains unchanged
100    }
101  }
102
103  // Tri de grands tableaux
104  sortArray(array) {
105    const startTime = performance.now();
106
107    // Implémentation du merge sort pour de meilleures performances
108    const sortedArray = this.mergeSort(array);
109
110    const endTime = performance.now();
111
112    this.sendResult('SORT_COMPLETE', {
113      sortedArray: sortedArray,
114      originalLength: array.length,
115      executionTime: endTime - startTime
116    });
117  }
118
119  mergeSort(arr) {
120    if (arr.length <= 1) return arr;
121
122    const mid = Math.floor(arr.length / 2);
123    const left = this.mergeSort(arr.slice(0, mid));
124    const right = this.mergeSort(arr.slice(mid));
125
126    return this.merge(left, right);
127  }
128
129  merge(left, right) {
130    const result = [];
131    let leftIndex = 0;
132    let rightIndex = 0;
133
134    while (leftIndex < left.length && rightIndex < right.length) {
135      if (left[leftIndex] <= right[rightIndex]) {
136        result.push(left[leftIndex]);
137        leftIndex++;
138      } else {
139        result.push(right[rightIndex]);
140        rightIndex++;
141      }
142    }
143
144    return result.concat(left.slice(leftIndex), right.slice(rightIndex));
145  }
146
147  // Calcul de Pi par la méthode de Monte-Carlo
148  calculatePiMonteCarlo(iterations) {
149    let pointsInCircle = 0;
150    const updateInterval = Math.floor(iterations / 100);
151
152    for (let i = 0; i < iterations; i++) {
153      const x = Math.random() * 2 - 1; // de -1 à 1
154      const y = Math.random() * 2 - 1; // de -1 à 1
155
156      if (x * x + y * y <= 1) {
157        pointsInCircle++;
158      }
159
160      if (i % updateInterval === 0) {
161        const currentPi = (pointsInCircle / i) * 4;
162        const progress = (i / iterations) * 100;
163
164        this.sendProgress(progress, { currentPi, iteration: i });
165      }
166    }
167
168    const finalPi = (pointsInCircle / iterations) * 4;
169
170    this.sendResult('PI_CALCULATION_COMPLETE', {
171      pi: finalPi,
172      iterations: iterations,
173      accuracy: Math.abs(Math.PI - finalPi)
174    });
175  }
176
177  // Méthodes auxiliaires pour la communication
178  sendResult(type, result) {
179    self.postMessage({
180      type: type,
181      result: result,
182      timestamp: Date.now()
183    });
184  }
185
186  sendProgress(progress, additionalData = {}) {
187    self.postMessage({
188      type: 'PROGRESS_UPDATE',
189      progress: progress,
190      ...additionalData,
191      timestamp: Date.now()
192    });
193  }
194
195  sendError(errorMessage) {
196    self.postMessage({
197      type: 'ERROR',
198      error: errorMessage,
199      timestamp: Date.now()
200    });
201  }
202}
203
204// Initialisation du worker
205new WorkerCalculations();

Le worker a sa propre portée globale (self) et n'a accès ni au DOM, ni à document, ni à window. En revanche, il peut utiliser fetch, XMLHttpRequest, setTimeout, setInterval et IndexedDB. Le cycle de vie se présente donc ainsi : création, postMessage(), travail dans le thread du worker et réception du résultat dans onmessage.

Patterns avancés des Web Workers

Worker Pool pour les calculs parallèles

Un pool crée plusieurs workers, généralement autant que de cœurs indiqués par navigator.hardwareConcurrency, et leur répartit les tâches d'une file d'attente :

1// WorkerPool.js - gestion de plusieurs workers
2class WorkerPool {
3  constructor(workerScript, poolSize = navigator.hardwareConcurrency || 4) {
4    this.workerScript = workerScript;
5    this.poolSize = poolSize;
6    this.workers = [];
7    this.taskQueue = [];
8    this.activeTasksCount = 0;
9
10    this.initializePool();
11  }
12
13  initializePool() {
14    for (let i = 0; i < this.poolSize; i++) {
15      const worker = {
16        instance: new Worker(this.workerScript),
17        busy: false,
18        id: i
19      };
20
21      worker.instance.onmessage = (event) => {
22        this.handleWorkerMessage(worker, event.data);
23      };
24
25      worker.instance.onerror = (error) => {
26        this.handleWorkerError(worker, error);
27      };
28
29      this.workers.push(worker);
30    }
31
32    console.log(`Worker pool initialized with ${this.poolSize} workers`);
33  }
34
35  // Exécution d'une tâche à l'aide du pool
36  execute(taskData) {
37    return new Promise((resolve, reject) => {
38      const task = {
39        data: taskData,
40        resolve: resolve,
41        reject: reject,
42        id: this.generateTaskId()
43      };
44
45      const availableWorker = this.getAvailableWorker();
46
47      if (availableWorker) {
48        this.assignTaskToWorker(availableWorker, task);
49      } else {
50        this.taskQueue.push(task);
51      }
52    });
53  }
54
55  getAvailableWorker() {
56    return this.workers.find(worker => !worker.busy);
57  }
58
59  assignTaskToWorker(worker, task) {
60    worker.busy = true;
61    worker.currentTask = task;
62    this.activeTasksCount++;
63
64    worker.instance.postMessage({
65      taskId: task.id,
66      ...task.data
67    });
68  }
69
70  handleWorkerMessage(worker, message) {
71    const task = worker.currentTask;
72
73    if (message.type === 'TASK_COMPLETE') {
74      task.resolve(message.result);
75      this.releaseWorker(worker);
76    } else if (message.type === 'TASK_ERROR') {
77      task.reject(new Error(message.error));
78      this.releaseWorker(worker);
79    } else if (message.type === 'PROGRESS_UPDATE') {
80      // Transmission de la mise à jour de progression (optionnel)
81      if (task.onProgress) {
82        task.onProgress(message.progress);
83      }
84    }
85  }
86
87  releaseWorker(worker) {
88    worker.busy = false;
89    worker.currentTask = null;
90    this.activeTasksCount--;
91
92    // Vérifier s'il reste des tâches dans la file
93    if (this.taskQueue.length > 0) {
94      const nextTask = this.taskQueue.shift();
95      this.assignTaskToWorker(worker, nextTask);
96    }
97  }
98
99  handleWorkerError(worker, error) {
100    console.error(`Worker ${worker.id} error:`, error);
101
102    if (worker.currentTask) {
103      worker.currentTask.reject(error);
104      this.releaseWorker(worker);
105    }
106  }
107
108  // Traitement parallèle de grands ensembles de données
109  async processInParallel(dataArray, chunkProcessor) {
110    const chunkSize = Math.ceil(dataArray.length / this.poolSize);
111    const chunks = [];
112
113    // Découpage des données en chunks
114    for (let i = 0; i < dataArray.length; i += chunkSize) {
115      chunks.push(dataArray.slice(i, i + chunkSize));
116    }
117
118    // Traitement parallèle des chunks
119    const promises = chunks.map(chunk =>
120      this.execute({
121        type: 'PROCESS_CHUNK',
122        chunk: chunk,
123        processor: chunkProcessor.toString()
124      })
125    );
126
127    const results = await Promise.all(promises);
128
129    // Fusion des résultats
130    return results.flat();
131  }
132
133  generateTaskId() {
134    return `task_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
135  }
136
137  // Arrêt de tous les workers
138  terminate() {
139    this.workers.forEach(worker => {
140      worker.instance.terminate();
141    });
142
143    this.workers = [];
144    this.taskQueue = [];
145    console.log('Worker pool terminated');
146  }
147
148  // Statistiques du pool
149  getStats() {
150    return {
151      poolSize: this.poolSize,
152      activeWorkers: this.workers.filter(w => w.busy).length,
153      queueLength: this.taskQueue.length,
154      activeTasks: this.activeTasksCount
155    };
156  }
157}
158
159// Utilisation du Worker Pool
160const workerPool = new WorkerPool('calculation-worker.js', 8);
161
162// Exemple de traitement parallèle
163async function processLargeDataset() {
164  const largeArray = Array.from({ length: 1000000 }, (_, i) => Math.random() * 1000);
165
166  try {
167    const results = await workerPool.processInParallel(largeArray, (chunk) => {
168      // La fonction de traitement sera exécutée dans un worker
169      return chunk.map(x => Math.sqrt(x * x + 1));
170    });
171
172    console.log('Traitement terminé :', results.length);
173    console.log('Stats:', workerPool.getStats());
174  } catch (error) {
175    console.error('Erreur de traitement :', error);
176  }
177}

Quand tous les workers sont occupés, la tâche attend dans la file, et releaseWorker transmet aussitôt la suivante. chunkProcessor arrive dans le worker sous forme de texte, car postMessage ne transporte pas les fonctions.

Shared Array Buffer pour une communication efficace

SharedArrayBuffer est une mémoire visible par plusieurs threads à la fois, donc les workers écrivent les résultats de la multiplication de matrices directement dans le tampon commun, sans copie :

1// SharedArrayBufferWorker.js - mémoire partagée entre les workers
2class SharedArrayBufferManager {
3  constructor() {
4    this.checkSupport();
5  }
6
7  checkSupport() {
8    if (typeof SharedArrayBuffer === 'undefined') {
9      console.warn("SharedArrayBuffer n'est pas pris en charge");
10      this.fallbackToTransferableObjects();
11      return false;
12    }
13    return true;
14  }
15
16  // Création d'une mémoire partagée pour les calculs de matrices
17  createSharedMatrixBuffer(rows, cols) {
18    const bufferSize = rows * cols * Float64Array.BYTES_PER_ELEMENT;
19    const sharedBuffer = new SharedArrayBuffer(bufferSize);
20    const matrix = new Float64Array(sharedBuffer);
21
22    return {
23      buffer: sharedBuffer,
24      matrix: matrix,
25      rows: rows,
26      cols: cols,
27
28      // Méthodes auxiliaires (elles utilisent la variable matrix, car dans une fonction fléchée, this désigne le gestionnaire)
29      get: (row, col) => {
30        return matrix[row * cols + col];
31      },
32
33      set: (row, col, value) => {
34        matrix[row * cols + col] = value;
35      },
36
37      fill: (value) => {
38        matrix.fill(value);
39      }
40    };
41  }
42
43  // Multiplication de matrices en parallèle
44  async parallelMatrixMultiply(matrixA, matrixB, workerCount = 4) {
45    const rowsA = matrixA.rows;
46    const colsA = matrixA.cols;
47    const colsB = matrixB.cols;
48
49    // Création de la matrice de résultat partagée
50    const resultMatrix = this.createSharedMatrixBuffer(rowsA, colsB);
51
52    // Répartition du travail entre les workers
53    const rowsPerWorker = Math.ceil(rowsA / workerCount);
54    const workers = [];
55
56    for (let i = 0; i < workerCount; i++) {
57      const startRow = i * rowsPerWorker;
58      const endRow = Math.min(startRow + rowsPerWorker, rowsA);
59
60      if (startRow < rowsA) {
61        const worker = new Worker('matrix-worker.js');
62
63        const promise = new Promise((resolve, reject) => {
64          worker.onmessage = (event) => {
65            if (event.data.type === 'MATRIX_COMPLETE') {
66              worker.terminate();
67              resolve(event.data.result);
68            }
69          };
70
71          worker.onerror = reject;
72        });
73
74        worker.postMessage({
75          type: 'MULTIPLY_MATRIX_ROWS',
76          matrixABuffer: matrixA.buffer,
77          matrixBBuffer: matrixB.buffer,
78          resultBuffer: resultMatrix.buffer,
79          dimensions: {
80            rowsA: rowsA,
81            colsA: colsA,
82            colsB: colsB
83          },
84          rowRange: { start: startRow, end: endRow }
85        });
86
87        workers.push(promise);
88      }
89    }
90
91    await Promise.all(workers);
92    return resultMatrix;
93  }
94
95  fallbackToTransferableObjects() {
96    console.log('Utilisation des Transferable Objects comme alternative');
97    // Implémentation avec des Transferable Objects
98  }
99}
100
101// matrix-worker.js - worker pour les calculs de matrices
102self.onmessage = function(event) {
103  const { type, matrixABuffer, matrixBBuffer, resultBuffer, dimensions, rowRange } = event.data;
104
105  if (type === 'MULTIPLY_MATRIX_ROWS') {
106    const matrixA = new Float64Array(matrixABuffer);
107    const matrixB = new Float64Array(matrixBBuffer);
108    const result = new Float64Array(resultBuffer);
109
110    const { rowsA, colsA, colsB } = dimensions;
111    const { start, end } = rowRange;
112
113    // Multiplication de matrices pour les lignes attribuées
114    for (let i = start; i < end; i++) {
115      for (let j = 0; j < colsB; j++) {
116        let sum = 0;
117        for (let k = 0; k < colsA; k++) {
118          sum += matrixA[i * colsA + k] * matrixB[k * colsB + j];
119        }
120        result[i * colsB + j] = sum;
121      }
122    }
123
124    self.postMessage({
125      type: 'MATRIX_COMPLETE',
126      result: `Rows ${start}-${end} completed`
127    });
128  }
129};

Chaque worker calcule des lignes différentes, ils ne se marchent donc pas sur les pieds. Quand des threads modifient les mêmes cellules, utilise Atomics (par exemple Atomics.add et Atomics.wait), dont les opérations sont indivisibles. Les navigateurs ne donnent accès à SharedArrayBuffer qu'aux pages isolées par les en-têtes Cross-Origin-Opener-Policy: same-origin et Cross-Origin-Embedder-Policy: require-corp.

Service Worker pour le Background Processing

En plus du worker ordinaire (dedicated), il en existe deux autres types. Le Shared Worker, créé avec new SharedWorker(), est partagé par les onglets et les fenêtres de la même origine (origin). Le Service Worker se place entre la page et le réseau, et gère le cache, le mode hors ligne ainsi que la synchronisation en arrière-plan :

1// ServiceWorkerManager.js - gestion des tâches longues en arrière-plan
2class ServiceWorkerManager {
3  constructor() {
4    this.serviceWorker = null;
5    this.messageChannel = null;
6    this.setupServiceWorker();
7  }
8
9  async setupServiceWorker() {
10    if ('serviceWorker' in navigator) {
11      try {
12        const registration = await navigator.serviceWorker.register('background-worker.js');
13
14        // Attente de l'activation du service worker
15        await navigator.serviceWorker.ready;
16
17        this.serviceWorker = registration.active || registration.waiting || registration.installing;
18        this.setupMessageChannel();
19
20        console.log('Service Worker enregistré et prêt');
21      } catch (error) {
22        console.error("Erreur d'enregistrement du Service Worker :", error);
23      }
24    }
25  }
26
27  setupMessageChannel() {
28    this.messageChannel = new MessageChannel();
29
30    // Gestion des messages venant du Service Worker
31    this.messageChannel.port1.onmessage = (event) => {
32      this.handleServiceWorkerMessage(event.data);
33    };
34
35    // Envoi du port au Service Worker
36    navigator.serviceWorker.controller?.postMessage(
37      { type: 'INIT_PORT' },
38      [this.messageChannel.port2]
39    );
40  }
41
42  // Confier une tâche longue au Service Worker
43  scheduleBackgroundTask(taskConfig) {
44    if (this.messageChannel) {
45      this.messageChannel.port1.postMessage({
46        type: 'SCHEDULE_TASK',
47        task: {
48          id: this.generateTaskId(),
49          ...taskConfig,
50          scheduledAt: Date.now()
51        }
52      });
53    }
54  }
55
56  // Exemple : synchronisation périodique des données
57  scheduleDataSync(interval = 300000) { // 5 minutes
58    this.scheduleBackgroundTask({
59      type: 'DATA_SYNC',
60      interval: interval,
61      endpoint: '/api/sync',
62      recurring: true
63    });
64  }
65
66  // Exemple : traitement de fichiers en arrière-plan
67  scheduleFileProcessing(files) {
68    files.forEach(file => {
69      this.scheduleBackgroundTask({
70        type: 'FILE_PROCESSING',
71        fileName: file.name,
72        fileData: file,
73        processor: 'image-compression'
74      });
75    });
76  }
77
78  handleServiceWorkerMessage(message) {
79    switch (message.type) {
80      case 'TASK_COMPLETED':
81        this.onTaskCompleted(message.task, message.result);
82        break;
83      case 'TASK_FAILED':
84        this.onTaskFailed(message.task, message.error);
85        break;
86      case 'SYNC_COMPLETED':
87        this.onSyncCompleted(message.result);
88        break;
89    }
90  }
91
92  onTaskCompleted(task, result) {
93    console.log(`Tâche ${task.id} terminée :`, result);
94
95    // Mise à jour de l'UI ou de l'état de l'application
96    this.updateApplicationState(task, result);
97  }
98
99  generateTaskId() {
100    return `bg_task_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
101  }
102}
103
104// background-worker.js - Service Worker
105class BackgroundTaskProcessor {
106  constructor() {
107    this.activeTasks = new Map();
108    this.messagePort = null;
109    this.setupEventListeners();
110  }
111
112  setupEventListeners() {
113    self.addEventListener('message', (event) => {
114      if (event.data.type === 'INIT_PORT') {
115        this.messagePort = event.ports[0];
116        this.setupPortListener();
117      }
118    });
119
120    // Background Sync
121    self.addEventListener('sync', (event) => {
122      if (event.tag === 'background-data-sync') {
123        event.waitUntil(this.performDataSync());
124      }
125    });
126  }
127
128  setupPortListener() {
129    this.messagePort.onmessage = (event) => {
130      this.handleTask(event.data);
131    };
132  }
133
134  async handleTask(message) {
135    if (message.type === 'SCHEDULE_TASK') {
136      const task = message.task;
137
138      try {
139        const result = await this.executeTask(task);
140
141        this.messagePort.postMessage({
142          type: 'TASK_COMPLETED',
143          task: task,
144          result: result
145        });
146      } catch (error) {
147        this.messagePort.postMessage({
148          type: 'TASK_FAILED',
149          task: task,
150          error: error.message
151        });
152      }
153    }
154  }
155
156  async executeTask(task) {
157    switch (task.type) {
158      case 'DATA_SYNC':
159        return await this.performDataSync(task);
160      case 'FILE_PROCESSING':
161        return await this.processFile(task);
162      case 'BATCH_CALCULATION':
163        return await this.performBatchCalculation(task);
164      default:
165        throw new Error(`Unknown task type: ${task.type}`);
166    }
167  }
168
169  async performDataSync(task) {
170    try {
171      const response = await fetch(task.endpoint, {
172        method: 'POST',
173        headers: { 'Content-Type': 'application/json' },
174        body: JSON.stringify({ timestamp: Date.now() })
175      });
176
177      if (!response.ok) {
178        throw new Error(`Sync failed: ${response.status}`);
179      }
180
181      const data = await response.json();
182
183      // Enregistrement dans IndexedDB ou dans la Cache API
184      await this.storeDataLocally(data);
185
186      return { success: true, syncedRecords: data.length };
187    } catch (error) {
188      throw new Error(`Data sync failed: ${error.message}`);
189    }
190  }
191
192  async processFile(task) {
193    // Simulation du traitement d'un fichier
194    const { fileName, processor } = task;
195
196    switch (processor) {
197      case 'image-compression':
198        return await this.compressImage(task.fileData);
199      case 'video-transcoding':
200        return await this.transcodeVideo(task.fileData);
201      default:
202        throw new Error(`Unknown processor: ${processor}`);
203    }
204  }
205
206  async storeDataLocally(data) {
207    // Implémentation de l'enregistrement dans IndexedDB
208    return new Promise((resolve, reject) => {
209      const request = indexedDB.open('AppDatabase', 1);
210
211      request.onsuccess = (event) => {
212        const db = event.target.result;
213        const transaction = db.transaction(['syncedData'], 'readwrite');
214        const store = transaction.objectStore('syncedData');
215
216        store.put({ id: 'latest', data: data, timestamp: Date.now() });
217
218        transaction.oncomplete = () => resolve();
219        transaction.onerror = () => reject(transaction.error);
220      };
221
222      request.onerror = () => reject(request.error);
223    });
224  }
225}
226
227new BackgroundTaskProcessor();

Le Service Worker ne convient pas aux longs calculs, car le navigateur l'endort dès qu'il ne traite plus d'événements. Lors de la première visite, navigator.serviceWorker.controller vaut parfois null, d'où l'opérateur ?. dans le code.

Performance monitoring et debugging

Le moniteur remplace postMessage et onmessage pour enregistrer la durée de chaque tâche :

1// WorkerPerformanceMonitor.js
2class WorkerPerformanceMonitor {
3  constructor() {
4    this.metrics = {
5      taskExecutionTimes: [],
6      memoryUsage: [],
7      errorRates: {},
8      throughput: []
9    };
10
11    this.startTime = performance.now();
12  }
13
14  // Surveillance des performances du worker
15  monitorWorkerPerformance(worker, taskId) {
16    const startTime = performance.now();
17    let memoryBefore = null;
18
19    // Mesure de la mémoire (si disponible)
20    if (performance.memory) {
21      memoryBefore = performance.memory.usedJSHeapSize;
22    }
23
24    const originalPostMessage = worker.postMessage.bind(worker);
25    const originalOnMessage = worker.onmessage;
26
27    // Intercept postMessage
28    worker.postMessage = (message) => {
29      console.log(`[Worker] Sending task ${taskId}:`, message);
30      originalPostMessage(message);
31    };
32
33    // Intercept onmessage
34    worker.onmessage = (event) => {
35      const endTime = performance.now();
36      const executionTime = endTime - startTime;
37
38      // Enregistrement de la métrique de temps d'exécution
39      this.metrics.taskExecutionTimes.push({
40        taskId: taskId,
41        executionTime: executionTime,
42        timestamp: Date.now()
43      });
44
45      // Mesure de la mémoire après l'exécution
46      if (performance.memory && memoryBefore) {
47        const memoryAfter = performance.memory.usedJSHeapSize;
48        const memoryDelta = memoryAfter - memoryBefore;
49
50        this.metrics.memoryUsage.push({
51          taskId: taskId,
52          memoryDelta: memoryDelta,
53          timestamp: Date.now()
54        });
55      }
56
57      console.log(`[Worker] Task ${taskId} completed in ${executionTime.toFixed(2)}ms`);
58
59      if (originalOnMessage) {
60        originalOnMessage(event);
61      }
62    };
63
64    return worker;
65  }
66
67  // Analyse des performances
68  generatePerformanceReport() {
69    const report = {
70      totalRuntime: performance.now() - this.startTime,
71      taskCount: this.metrics.taskExecutionTimes.length,
72      averageExecutionTime: this.calculateAverageExecutionTime(),
73      memoryTrends: this.analyzeMemoryTrends(),
74      throughputAnalysis: this.calculateThroughput(),
75      recommendations: this.generateRecommendations()
76    };
77
78    return report;
79  }
80
81  calculateAverageExecutionTime() {
82    if (this.metrics.taskExecutionTimes.length === 0) return 0;
83
84    const total = this.metrics.taskExecutionTimes.reduce(
85      (sum, metric) => sum + metric.executionTime, 0
86    );
87
88    return total / this.metrics.taskExecutionTimes.length;
89  }
90
91  analyzeMemoryTrends() {
92    if (this.metrics.memoryUsage.length === 0) return null;
93
94    const memoryDeltas = this.metrics.memoryUsage.map(m => m.memoryDelta);
95    const averageMemoryDelta = memoryDeltas.reduce((a, b) => a + b, 0) / memoryDeltas.length;
96
97    return {
98      averageMemoryDelta: averageMemoryDelta,
99      maxMemoryDelta: Math.max(...memoryDeltas),
100      minMemoryDelta: Math.min(...memoryDeltas),
101      potentialMemoryLeak: averageMemoryDelta > 1024 * 1024 // > 1MB average
102    };
103  }
104
105  calculateThroughput() {
106    const timeWindow = 60000; // 1 minute
107    const now = Date.now();
108    const recentTasks = this.metrics.taskExecutionTimes.filter(
109      task => now - task.timestamp < timeWindow
110    );
111
112    return {
113      tasksPerMinute: recentTasks.length,
114      averageTaskTime: recentTasks.length > 0
115        ? recentTasks.reduce((sum, task) => sum + task.executionTime, 0) / recentTasks.length
116        : 0
117    };
118  }
119
120  generateRecommendations() {
121    const recommendations = [];
122    const avgTime = this.calculateAverageExecutionTime();
123    const memoryTrends = this.analyzeMemoryTrends();
124
125    if (avgTime > 5000) { // > 5 secondes
126      recommendations.push('Envisager de découper les tâches longues en parties plus petites');
127    }
128
129    if (memoryTrends?.potentialMemoryLeak) {
130      recommendations.push('Fuite de mémoire potentielle détectée - vérifier la gestion de la mémoire');
131    }
132
133    if (this.metrics.taskExecutionTimes.length > 1000) {
134      recommendations.push("Grand nombre de tâches - envisager d'implémenter un Worker Pool");
135    }
136
137    return recommendations;
138  }
139}
140
141// Utilisation du monitoring
142const performanceMonitor = new WorkerPerformanceMonitor();
143
144// Surveillance d'un worker précis
145const worker = new Worker('calculation-worker.js');
146const monitoredWorker = performanceMonitor.monitorWorkerPerformance(worker, 'task_001');
147
148// Génération du rapport au bout d'un certain temps
149setTimeout(() => {
150  const report = performanceMonitor.generatePerformanceReport();
151  console.log('Performance Report:', report);
152}, 30000);