Web Workers : Définition, Cas d'Usage, Exemples Performance

Qu'est-ce qu'un Web Worker ?

Un Web Worker est un script JavaScript qui s'exécute sur un thread séparé du main UI thread, en background. En déchargeant le travail coûteux (traitement image, parsing, cryptographie, computations complexes) vers un Web Worker, vous gardez le main thread libre pour gérer input utilisateur, animations et rendering — préservant la responsiveness et améliorant les Core Web Vitals comme INP.

Les Web Workers ont été introduits en 2009 avec HTML5.

Types de Web Workers

Exemple Web Worker basique

// main.js
const worker = new Worker('worker.js');
worker.postMessage({ task: 'compute', data: largeArray });
worker.addEventListener('message', (event) => {
  console.log('Result:', event.data);
});

// worker.js
self.addEventListener('message', (event) => {
  if (event.data.task === 'compute') {
    const result = expensiveCompute(event.data.data);
    self.postMessage(result);
  }
});

Ce que les Web Workers peuvent faire

• Computation lourde
• Parsing JSON/XML/CSV grands
• Background sync
• Exécuter modules WebAssembly
• Utiliser IndexedDB, fetch, WebSocket
• La plupart des APIs JS sauf DOM

Ce que les Web Workers ne peuvent PAS faire

• Accéder au DOM
• Utiliser window, document
• Utiliser XHR synchrone
• Accéder localStorage

Quand utiliser un Web Worker

• Computation long-running.
• Traitement données real-time.
• Cryptographie.
• Traitement image/PDF.
• Background fetching/syncing.
• Modules WebAssembly.

Service Worker

Les Service Workers agissent comme proxy entre navigateur et réseau.

navigator.serviceWorker.register('/sw.js');

self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('v1').then((cache) => cache.addAll(['/', '/styles.css']))
  );
});

Impact performance Web Worker

Sans Workers, le travail JS lourd bloque le main thread, causant mauvais INP, scrolling janky, UI gelée.

Best practices Web Worker

• Utiliser pour tasks long.
• Minimiser l'overhead message passing.
• Utiliser Transferable Objects.
• Worker pool pour parallélisme.
• Terminer quand done.
• Gérer les erreurs.
• Bundler le code worker.

Pièges courants

• Envoyer des data huge dans les messages.
• Essayer d'accéder au DOM.
• Oublier de terminer.
• Over-engineering.
• Coût startup worker.
• Ne pas gérer les erreurs worker.
• Utiliser APIs sync.

Libraries Web Worker

FAQ : Web Workers

Web Worker vs Service Worker ?

Web Worker : JS background général. Service Worker : proxy réseau.

Les Web Workers peuvent-ils accéder au DOM ?

Non.

Les Web Workers sont-ils lents au startup ?

~10-50ms pour spawner.

Comment je partage state entre workers ?

SharedArrayBuffer.

Puis-je exécuter packages npm dans Web Worker ?

Oui — via bundler.

Qu'est-ce qu'un Worklet ?

Un worker spécialisé lightweight pour APIs low-level.

Les Web Workers sont-ils nécessaires pour mon app ?

Seulement si vous avez du travail CPU-bound bloquant le main thread.

Testez les performances Web Worker avec LoadFocus

LoadFocus exécute des audits Lighthouse depuis 25+ régions. Inscrivez-vous sur loadfocus.com/signup.