---
title: API Web Workers
slug: Web/API/Web_Workers_API
tags:
  - API
  - DOM
translation_of: Web/API/Web_Workers_API
---
<div>{{DefaultAPISidebar("Web Workers API")}}</div>

<p>Les <strong>Web Workers</strong> sont un mécanisme grâce auquel les instructions d'un script peuvent être exécutés dans un thread en arrière-plan séparé du thread d'exécution principal d'une application web. Cela a pour avantage qu'un traitement laborieux peut être réalisé dans un thread séparé, permettant au thread principal (généralement l'interface utilisateur) de fonctionner sans blocage ni ralentissement.</p>

<h2 id="Concepts_et_utilisation_des_Web_Workers">Concepts et utilisation des Web Workers</h2>

<p>Un worker est un objet créé en utilisant un constructeur (e.g. {{domxref("Worker.Worker", "Worker()")}}) qui exécute un fichier JavaScript nommé — ce fichier contient le code que doit exécuter le thread du worker; les workers s'exécutent dans un autre contexte global qui est différent du contexte actuel {{domxref("window")}}. Ce contexte est représenté par un objet {{domxref("DedicatedWorkerGlobalScope")}} dans le cas des workers dédiés (workers standards utilisés par un script unique; les workers partagés utilisent {{domxref("SharedWorkerGlobalScope")}}).</p>

<p>Vous pouvez exécuter quelque code que ce soit à l'intérieur du thread du worker, avec quelques exceptions cependant. Par exemple, vous ne pouvez pas directement manipuler le DOM à partir d'un worker, ou utiliser des méthodes et des propriétés par défaut de l'objet {{domxref("window")}}. Mais vous pouvez utiliser un grand nombre des éléments disponibles sous <code>window</code>, comprenant les <a href="/fr/docs/WebSockets">WebSockets</a>, et les mécanismes de stockage de données tels qu'<a href="/fr/docs/IndexedDB">IndexedDB</a> et l'<a href="/en-US/docs/Web/API/Data_Store_API">API Data Store</a> spécifique à Firefox OS. Consultez <a href="/fr/docs/Web/API/Worker/Functions_and_classes_available_to_workers">Les fonctions et classes accessibles aux workers</a> pour plus de détails.</p>

<p>Les données sont envoyées entre les workers et le thread principal au moyen d'un sytème de messages — des deux côtés les messages sont envoyés en utilisant la méthode <code>postMessage()</code>, et la réponse leur parvient au moyen du gestionnaire d'événement <code>onmessage</code> (le message est contenu dans l'attribut <code>data</code> de l'événement {{event("Message")}}.) Les données sont copiées plutôt que partagées.</p>

<p>Les workers peuvent à leur tour engendrer de nouveaux workers, aussi longtemps que ces workers partagent la même origine que la page parente.  De plus, les workers peuvent utiliser <a href="/fr/docs/Web/API/XMLHttpRequest"><code>XMLHttpRequest</code></a> pour les E/S réseau, à l'exception que les attributs <code>responseXML</code> et <code>channel</code> de <code>XMLHttpRequest</code> retournent toujours <code>null</code>.</p>

<p>En plus des workers dédiés, il y a d'autres types de worker :</p>

<ul>
 <li>Les workers partagés sont des workers qui peuvent être utilisés par de multiples scripts s'exécutant dans différentes fenêtres, IFrames, etc., aussi longtemps qu'ils sont dans le même domaine que le worker. Leur fonctionnement est un petit plus complexe que les workers dédiés — les scripts doivent communiquer via un port actif. Consultez {{domxref("SharedWorker")}} pour plus de détails.</li>
 <li>Les <a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorkers</a> fonctionnent essentiellement comme des serveurs proxy placés entre des applications web, et le navigateur et le réseau (lorsque disponibles). Ils sont destinés (entre autres choses) à permettre la création de véritables expériences déconnectées, interceptant les requêtes du réseau et prenant des décisions appropriées en fonction de la disponibilité du réseau et de la mise à jours des ressources situées sur le serveur. Ils permettront aussi d'accéder à des notifications poussées (push) et à des APIs synchronisées en arrière-plan.</li>
 <li>Les Workers Chrome sont un type de worker spécifique à Firefox que vous pouvez utiliser si vous développez des extensions et que vous voulez y utiliser des workers et avoir accès aux <a href="/fr/docs/Mozilla/js-ctypes">js-ctypes</a> dans votre worker. Consulter {{domxref("ChromeWorker")}} pour plus de détails. </li>
 <li>Les <a href="/fr/docs/Web/API/Web_Audio_API#Audio_Workers">Audio Workers</a> donne la possibilité d'effectuer directement dans le contexte d'un worker web un traitement audio scripté.</li>
</ul>

<div class="note">
<p><strong>Note :</strong> Selon les <a href="https://html.spec.whatwg.org/multipage/workers.html#runtime-script-errors-2">Spécifications de Web Worker</a>, les erreurs dans les workers ne devraient pas déborder (voir {{bug(1188141)}}). Cela a été implémenté dans Firefox 42.</p>
</div>

<h2 id="Les_interfaces_Web_Worker">Les interfaces Web Worker</h2>

<dl>
 <dt>{{domxref("AbstractWorker")}}</dt>
 <dd>Propriétés et méthodes abstraites communes à tous les types de workers (i.e. {{domxref("Worker")}} ou {{domxref("SharedWorker")}}).</dd>
 <dt>{{domxref("Worker")}}</dt>
 <dd>Représente le thread d'un worker en cours d'exécution, vous permettant de passer des messages au code du worker en cours d'exécution.</dd>
 <dt>{{DOMxRef("WorkerLocation")}}</dt>
 <dd>Défini la localisation du scripte exécuté par le <a href="/fr/docs/Web/API/Worker">Worker</a>.</dd>
 <dt>{{domxref("SharedWorker")}}</dt>
 <dd>Représente un type spécifique de worker qui peut être <em>accédé</em> à partir de plusieurs contextes de navigation, à savoir plusieurs fenêtres, iframes ou même workers.</dd>
 <dt>{{domxref("WorkerGlobalScope")}}</dt>
 <dd>Représente le contexte générique de tout worker (il joue le même rôle que {{domxref("Window")}} pour un contenu web normal). Les différents types de worker ont un contexte d'objets qui hérite de cette interface et ajoute des fonctionnalités supplémentaires.</dd>
 <dt>{{domxref("DedicatedWorkerGlobalScope")}}</dt>
 <dd>Représente le contexte d'un worker dédié, héritant de {{domxref("WorkerGlobalScope")}} et ajoutant des fonctionnalités spécifiques.</dd>
 <dt>{{domxref("SharedWorkerGlobalScope")}}</dt>
 <dd>Représente le contexte d'un worker partagé, héritant de {{domxref("WorkerGlobalScope")}} et ajoutant des fonctionnalités spécifiques.</dd>
 <dt>{{domxref("WorkerNavigator")}}</dt>
 <dd>Représente l'identité et l'état de l'agent utilisateur (le client):</dd>
</dl>

<h2 id="Exemples">Exemples</h2>

<p>Nous avons créé deux simples démos pour illustrer des usages basiques :</p>

<ul>
 <li><a href="https://github.com/mdn/simple-web-worker">Exemple basique d'un worker dédié</a> (<a href="http://mdn.github.io/simple-web-worker/">lancer le worker dédié</a>).</li>
 <li><a href="https://github.com/mdn/simple-shared-worker">Exemple basique d'un worker partagé</a> (<a href="http://mdn.github.io/simple-shared-worker/">lancer le worker partagé</a>).</li>
</ul>

<p>Vous pouvez obtenir plus d'informations sur le fonctionnement de ces démos dans notre <a href="/fr/docs/Utilisation_des_web_workers">guide d'utilisation des web workers</a>.</p>

<h2 id="Spécifications">Spécifications</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Spécification</th>
   <th scope="col">Statut</th>
   <th scope="col">Commentaire</th>
  </tr>
  <tr>
   <td>{{SpecName("HTML WHATWG", "workers.html#workers", "Web Workers")}}</td>
   <td>{{Spec2("HTML WHATWG")}}</td>
   <td>Définition initiale.</td>
  </tr>
 </tbody>
</table>

<h2 id="Voir_aussi">Voir aussi</h2>

<ul>
 <li><a href="/fr/docs/Utilisation_des_web_workers">Utilisation des web workers</a></li>
 <li><a href="/fr/docs/Web/API/Worker">L'interface Worker</a></li>
 <li><a href="/fr/docs/Web/API/SharedWorker">L'interface SharedWorker</a></li>
 <li><a href="/en-US/docs/Web/API/ServiceWorker_API">L'API ServiceWorker</a></li>
 <li><a href="/fr/docs/Web/API/Worker/Functions_and_classes_available_to_workers">Les fonctions et classes accessibles aux workers</a></li>
 <li><a href="/en-US/docs/Web/API/ChromeWorker">ChromeWorker</a> : pour l'utilisation des workers dans un code privilégié (chrome)</li>
</ul>