aboutsummaryrefslogtreecommitdiff
path: root/files/fr/web/api/web_workers_api
diff options
context:
space:
mode:
authorFlorian Merz <me@fiji-flo.de>2021-02-11 12:36:08 +0100
committerFlorian Merz <me@fiji-flo.de>2021-02-11 12:36:08 +0100
commit39f2114f9797eb51994966c6bb8ff1814c9a4da8 (patch)
tree66dbd9c921f56e440f8816ed29ac23682a1ac4ef /files/fr/web/api/web_workers_api
parent8260a606c143e6b55a467edf017a56bdcd6cba7e (diff)
downloadtranslated-content-39f2114f9797eb51994966c6bb8ff1814c9a4da8.tar.gz
translated-content-39f2114f9797eb51994966c6bb8ff1814c9a4da8.tar.bz2
translated-content-39f2114f9797eb51994966c6bb8ff1814c9a4da8.zip
unslug fr: move
Diffstat (limited to 'files/fr/web/api/web_workers_api')
-rw-r--r--files/fr/web/api/web_workers_api/advanced_concepts_and_examples/index.html423
-rw-r--r--files/fr/web/api/web_workers_api/functions_and_classes_available_to_workers/index.html240
-rw-r--r--files/fr/web/api/web_workers_api/structured_clone_algorithm/index.html (renamed from files/fr/web/api/web_workers_api/algorithme_clonage_structure/index.html)0
-rw-r--r--files/fr/web/api/web_workers_api/using_web_workers/index.html (renamed from files/fr/web/api/web_workers_api/utilisation_des_web_workers/index.html)0
4 files changed, 240 insertions, 423 deletions
diff --git a/files/fr/web/api/web_workers_api/advanced_concepts_and_examples/index.html b/files/fr/web/api/web_workers_api/advanced_concepts_and_examples/index.html
deleted file mode 100644
index b925ca7f4b..0000000000
--- a/files/fr/web/api/web_workers_api/advanced_concepts_and_examples/index.html
+++ /dev/null
@@ -1,423 +0,0 @@
----
-title: Concepts avancés et exemples
-slug: Web/API/Web_Workers_API/Advanced_concepts_and_examples
-translation_of: Web/API/Web_Workers_API/Using_web_workers
-translation_of_original: Web/API/Web_Workers_API/Advanced_concepts_and_examples
----
-<div class="summary">
-<p>Cet article fournit de nombreux détails et maints exemples pour illustrer les concepts avancés des web workers.</p>
-</div>
-
-<h2 id="Passage_de_données_copie_et_non_partage">Passage de données : copie, et non partage</h2>
-
-<p>Les données passées entre la page principale et les workers sont <strong>copiées</strong>, et non partagées. Les objets sont sérialisées au moment où ils sont confiés au worker, et consécutivement désérialisés à l'autre bout. La page et le worker <strong>ne partagent pas la même instance</strong>, ainsi au final <strong>une copie</strong> est créée de chaque côté. La plupart des navigateurs implémentent cette caractéristique en tant que <a href="/en/DOM/The_structured_clone_algorithm" title="The structured clone algorithm">clonage structuré</a>.</p>
-
-<p>Avant de poursuivre, créons à des fins didactiques une fonction nommée <code>emulateMessage()</code>, avec pour objectif de simuler le comportement d'une valeur qui est <em>clonée et non partagée</em> durant le passage du <code>worker</code> à la page principale ou inversement :</p>
-
-<pre class="brush: js">function emulateMessage (vVal) {
-    return eval("(" + JSON.stringify(vVal) + ")");
-}
-
-// Tests
-
-// test #1
-var example1 = new Number(3);
-alert(typeof example1); // objet
-alert(typeof emulateMessage(example1)); // nombre
-
-// test #2
-var example2 = true;
-alert(typeof example2); // booléen
-alert(typeof emulateMessage(example2)); // booléen
-
-// test #3
-var example3 = new String("Hello World");
-alert(typeof example3); // objet
-alert(typeof emulateMessage(example3)); // chaîne de caractères
-
-// test #4
-var example4 = {
-    "name": "John Smith",
-    "age": 43
-};
-alert(typeof example4); // objet
-alert(typeof emulateMessage(example4)); // objet
-
-// test #5
-function Animal (sType, nAge) {
-    this.type = sType;
-    this.age = nAge;
-}
-var example5 = new Animal("Cat", 3);
-alert(example5.constructor); // Animal
-alert(emulateMessage(example5).constructor); // Objet</pre>
-
-<p>Une valeur qui est clonée et non partagée est appelée <em>message</em>. Comme vous le savez probablement dès à présent, les <em>messages</em> peuvent être envoyés à et à partir du thread principal en utilisant <code>postMessage()</code>, et l'attribut {{domxref("MessageEvent.data", "data")}} de l'événement <code>message</code> contient les données retournées par le worker.</p>
-
-<p><strong>example.html </strong>(la page principale) :</p>
-
-<pre class="brush: js">var myWorker = new Worker("my_task.js");
-
-myWorker.onmessage = function (oEvent) {
- console.log("Worker said : " + oEvent.data);
-};
-
-myWorker.postMessage("ali");</pre>
-
-<p><strong>my_task.js</strong> (leworker) :</p>
-
-<pre class="brush: js">postMessage("I\'m working before postMessage(\'ali\').");
-
-onmessage = function (oEvent) {
- postMessage("Hi " + oEvent.data);
-};</pre>
-
-<p>L'algorithme de <a href="/en-US/docs/Web/Guide/DOM/The_structured_clone_algorithm" style="line-height: 1.572;" title="The structured clone algorithm">clonage structurée</a> peut accepter du JSON et quelques autres choses impossibles en JSON — comme les références circulaires.</p>
-
-<h3 id="Exemples_de_passages_de_données">Exemples de passages de données</h3>
-
-<h4 id="Exemple_1_Créer_un_eval()_asynchrone_générique">Exemple #1 : Créer un "<code>eval() </code>asynchrone" générique</h4>
-
-<p>L'exemple suivant montre comment utiliser un worker afin d'exécuter <strong>de manière asynchrone</strong> n'importe quel code JavaScript permis dans un worker, au moyen d'une méthode <a href="/en-US/docs/JavaScript/Reference/Global_Objects/eval" title="/en-US/docs/JavaScript/Reference/Global_Objects/eval"><code>eval()</code></a> appelée dans le worker :</p>
-
-<pre class="brush: js">// Syntaxe : asyncEval(code[, listener])
-
-var asyncEval = (function () {
-
-  var aListeners = [], oParser = new Worker("data:text/javascript;charset=US-ASCII,onmessage%20%3D%20function%20%28oEvent%29%20%7B%0A%09postMessage%28%7B%0A%09%09%22id%22%3A%20oEvent.data.id%2C%0A%09%09%22evaluated%22%3A%20eval%28oEvent.data.code%29%0A%09%7D%29%3B%0A%7D");
-
-  oParser.onmessage = function (oEvent) {
-    if (aListeners[oEvent.data.id]) { aListeners[oEvent.data.id](oEvent.data.evaluated); }
-    delete aListeners[oEvent.data.id];
-  };
-
-
-  return function (sCode, fListener) {
-    aListeners.push(fListener || null);
-    oParser.postMessage({
-      "id": aListeners.length - 1,
-      "code": sCode
-    });
-  };
-
-})();</pre>
-
-<p>La data URI est équivalente à une requête réseau, avec la réponse suivante :</p>
-
-<pre>onmessage = function (oEvent) {
- postMessage({
- "id": oEvent.data.id,
- "evaluated": eval(oEvent.data.code)
- });
-}</pre>
-
-<p>Exemples d'utilisation :</p>
-
-<pre class="brush: js">// message d'alerte asynchrone...
-asyncEval("3 + 2", function (sMessage) {
-    alert("3 + 2 = " + sMessage);
-});
-
-// affichage asynchrone d'un message...
-asyncEval("\"Hello World!!!\"", function (sHTML) {
-    document.body.appendChild(document.createTextNode(sHTML));
-});
-
-// néant asynchrone...
-asyncEval("(function () {\n\tvar oReq = new XMLHttpRequest();\n\toReq.open(\"get\", \"http://www.mozilla.org/\", false);\n\toReq.send(null);\n\treturn oReq.responseText;\n})()");</pre>
-
-<h4 id="Exemple_2_passage_avancé_de_données_JSON_et_création_d'un_système_d'échange">Exemple #2 : passage avancé de données JSON et création d'un système d'échange</h4>
-
-<p>Si vous devez passer des données complexes et appeler différentes fonctions à la fois dans la page principale et dans le worker, vous pouvez créer un système comme suit.</p>
-
-<p><strong>example.html</strong> (la page principale) :</p>
-
-<pre class="brush: html">&lt;!doctype html&gt;
-&lt;html&gt;
-&lt;head&gt;
-&lt;meta charset="UTF-8" /&gt;
-&lt;title&gt;MDN Example - Queryable worker&lt;/title&gt;
-&lt;script type="text/javascript"&gt;
-  /*
-    QueryableWorker instances methods:
-     * sendQuery(queryable function name, argument to pass 1, argument to pass 2, etc. etc): calls a Worker's queryable function
-     * postMessage(string or JSON Data): see Worker.prototype.postMessage()
-     * terminate(): terminates the Worker
-     * addListener(name, function): adds a listener
-     * removeListener(name): removes a listener
-    QueryableWorker instances properties:
-     * defaultListener: the default listener executed only when the Worker calls the postMessage() function directly
-  */
-  function QueryableWorker (sURL, fDefListener, fOnError) {
-    var oInstance = this, oWorker = new Worker(sURL), oListeners = {};
-    this.defaultListener = fDefListener || function () {};
-    oWorker.onmessage = function (oEvent) {
-      if (oEvent.data instanceof Object &amp;&amp; oEvent.data.hasOwnProperty("vo42t30") &amp;&amp; oEvent.data.hasOwnProperty("rnb93qh")) {
-        oListeners[oEvent.data.vo42t30].apply(oInstance, oEvent.data.rnb93qh);
-      } else {
-        this.defaultListener.call(oInstance, oEvent.data);
-      }
-    };
-    if (fOnError) { oWorker.onerror = fOnError; }
-    this.sendQuery = function (/* nom de la fonction requêtable, argument à passer 1, argument à passer 2, etc. etc */) {
-      if (arguments.length &lt; 1) { throw new TypeError("QueryableWorker.sendQuery - not enough arguments"); return; }
-      oWorker.postMessage({ "bk4e1h0": arguments[0], "ktp3fm1": Array.prototype.slice.call(arguments, 1) });
-    };
-    this.postMessage = function (vMsg) {
- //Je ne pense pas qu'il y ait besoin d'appeler la méthode call()
- //que diriez-vous tout simplement de oWorker.postMessage(vMsg);
- //le même cas se pose avec terminate
- //bien, juste un peu plus vite, aucune recherche dans la chaîne des prototypes
-      Worker.prototype.postMessage.call(oWorker, vMsg);
-    };
-    this.terminate = function () {
-      Worker.prototype.terminate.call(oWorker);
-    };
-    this.addListener = function (sName, fListener) {
-      oListeners[sName] = fListener;
-    };
-    this.removeListener = function (sName) {
-      delete oListeners[sName];
-    };
-  };
-
-  // votre worker "queryable" personnalisé
-  var oMyTask = new QueryableWorker("my_task.js" /* , votreEcouteurDeMessageParDefautIci [optional], votreEcouteurDErreurIci [optional] */);
-
-  // vos "écouteurs" personnalisés
-
-  oMyTask.addListener("printSomething", function (nResult) {
-    document.getElementById("firstLink").parentNode.appendChild(document.createTextNode(" The difference is " + nResult + "!"));
-  });
-
-  oMyTask.addListener("alertSomething", function (nDeltaT, sUnit) {
-    alert("Worker waited for " + nDeltaT + " " + sUnit + " :-)");
-  });
-&lt;/script&gt;
-&lt;/head&gt;
-&lt;body&gt;
-  &lt;ul&gt;
-    &lt;li&gt;&lt;a id="firstLink" href="javascript:oMyTask.sendQuery('getDifference', 5, 3);"&gt;What is the difference between 5 and 3?&lt;/a&gt;&lt;/li&gt;
-    &lt;li&gt;&lt;a href="javascript:oMyTask.sendQuery('waitSomething');"&gt;Wait 3 seconds&lt;/a&gt;&lt;/li&gt;
-    &lt;li&gt;&lt;a href="javascript:oMyTask.terminate();"&gt;terminate() the Worker&lt;/a&gt;&lt;/li&gt;
-  &lt;/ul&gt;
-&lt;/body&gt;
-&lt;/html&gt;</pre>
-
-<p><strong>my_task.js</strong> (le worker) :</p>
-
-<pre class="brush: js">// vos fonctions PRIVEES personnalisées
-
-function myPrivateFunc1 () {
-  // instructions à exécuter
-}
-
-function myPrivateFunc2 () {
-  // instructions à exécuter
-}
-
-// etc. etc.
-
-// vos fonctions PUBLIQUES personnalisées (i.e. requêtables depuis la page principale)
-
-var queryableFunctions = {
-  // exemple #1 : obtenir la différence entre deux nombres :
-  getDifference: function (nMinuend, nSubtrahend) {
-      reply("printSomething", nMinuend - nSubtrahend);
-  },
-  // exemple #2 : attendre trois secondes
-  waitSomething: function () {
-      setTimeout(function() { reply("alertSomething", 3, "seconds"); }, 3000);
-  }
-};
-
-// fonctions système
-
-function defaultQuery (vMsg) {
-  // votre fonction PUBLIQUE par défaut est exécutée seulement lorsque la page principale appelle la méthode queryableWorker.postMessage() directement
-  // instructions à exécuter
-}
-
-function reply (/* listener name, argument to pass 1, argument to pass 2, etc. etc */) {
-  if (arguments.length &lt; 1) { throw new TypeError("reply - not enough arguments"); return; }
-  postMessage({ "vo42t30": arguments[0], "rnb93qh": Array.prototype.slice.call(arguments, 1) });
-}
-
-onmessage = function (oEvent) {
-  if (oEvent.data instanceof Object &amp;&amp; oEvent.data.hasOwnProperty("bk4e1h0") &amp;&amp; oEvent.data.hasOwnProperty("ktp3fm1")) {
-    queryableFunctions[oEvent.data.bk4e1h0].apply(self, oEvent.data.ktp3fm1);
-  } else {
-    defaultQuery(oEvent.data);
-  }
-};</pre>
-
-<p>Il est possible d'échanger le contenu de chaque message page principale -&gt; worker et worker -&gt; page principale.</p>
-
-<h3 id="Passage_de_données_par_transfert_de_propriété_(objets_transférables)">Passage de données par transfert de propriété (objets transférables)</h3>
-
-<p>Google Chrome 17+ et Firefox 18+ proposent une manière additionnelle de passer certains types d'objets (les objets <span class="external">transférables, c'est-à-dire les objets implémentant l'interface {{domxref("Transferable")}}</span>) vers ou à partir d'un worker avec une haute performance. Les objets transférables sont transférés d'un contexte vers un autre sans aucune opération de copie, ce qui conduit à d'énormes gains de performance lorsque de gros ensembles de données sont envoyés. Considérez la chose comme un passage par référence si vous venez du monde C/C++. Cependant, contrairement au passage par référence, la 'version' issue du contexte appelant n'est plus disponible une fois transférée. Sa propriété est transférée au nouveau contexte. Par exemple, lors du transfert d'un {{domxref("ArrayBuffer")}} à partir de votre application principale vers le script d'un worker, le {{domxref("ArrayBuffer")}} original est nettoyé et définitivement inutilisable. Son contenu est (tout à fait littéralement) transféré au contexte du worker.</p>
-
-<pre class="brush: js">// Crée un "fichier" de 32MB et le remplit.
-var uInt8Array = new Uint8Array(1024*1024*32); // 32MB
-for (var i = 0; i &lt; uInt8Array.length; ++i) {
- uInt8Array[i] = i;
-}
-
-worker.postMessage(uInt8Array.buffer, [uInt8Array.buffer]);
-</pre>
-
-<div class="note">
-<p><strong>Remarque </strong>: pour plus d'information sur les objets transférables, la performance et la détection de fonctionnalité de cette méthode, lisez <a href="http://updates.html5rocks.com/2011/12/Transferable-Objects-Lightning-Fast">Transferable Objects: Lightning Fast!</a> sur HTML5 Rocks.</p>
-</div>
-
-<h2 id="Workers_embarqués">Workers embarqués</h2>
-
-<p>Il n'y a pas une manière "officielle" d'embarquer le code d'un worker dans une page web, comme les éléments {{ HTMLElement("script") }} le font pour les scripts normaux. Mais un élément {{ HTMLElement("script") }} qui n'aurait pas d'attribut <code>src</code> et dont l'attribut <code>type</code> n'identifierait pas un type MIME exécutable peut être considéré comme un élément de bloc de données dont JavaScript peut faire usage.  Les "blocs de données" sont une caractéristique plus générale d'HTML5 qui peuvent contenir presque n'importe quelles données textuelles. Ainsi, un worker pourrait être embarqué de cette façon :</p>
-
-<pre class="brush: html">&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-&lt;head&gt;
-&lt;meta charset="UTF-8" /&gt;
-&lt;title&gt;MDN Example - Embedded worker&lt;/title&gt;
-&lt;script type="text/js-worker"&gt;
-  // Ce script NE SERA PAS traité par les moteurs JS parce que son type MIME est text/js-worker.
-  var myVar = "Hello World!";
-  // Le reste du code de votre worker commence ici.
-&lt;/script&gt;
-&lt;script type="text/javascript"&gt;
-  // Ce script SERA analysé par les moteurs JS engines parce que son type MIME est text/javascript.
-  function pageLog (sMsg) {
-    // Utilisation d'un fragment : le navigateur réaffichera/réorganisera le DOM seulement une fois.
-    var oFragm = document.createDocumentFragment();
-    oFragm.appendChild(document.createTextNode(sMsg));
-    oFragm.appendChild(document.createElement("br"));
-    document.querySelector("#logDisplay").appendChild(oFragm);
-  }
-&lt;/script&gt;
-&lt;script type="text/js-worker"&gt;
-  // Ce script NE SERA PAS traité par les moteurs JS parce que son type MIME est text/js-worker.
-  onmessage = function (oEvent) {
-    postMessage(myVar);
-  };
-  // Le reste du code de votre worker commence ici.
-&lt;/script&gt;
-&lt;script type="text/javascript"&gt;
-  // Ce script SERA analysé par les moteurs JS engines parce que son type MIME est text/javascript.
-
-  // Dans le passé... :
-  // blob builder a existé
-  // ...mais nous utilisons désormais Blob...:
-  var blob = new Blob(Array.prototype.map.call(document.querySelectorAll("script[type=\"text\/js-worker\"]"), function (oScript) { return oScript.textContent; }),{type: "text/javascript"});
-
-  // Création d'une nouvelle propriété document.worker contenant tous nos scripts "text/js-worker".
-  document.worker = new Worker(window.URL.createObjectURL(blob));
-
-  document.worker.onmessage = function (oEvent) {
-    pageLog("Received: " + oEvent.data);
-  };
-
-  // Démarrage du worker.
-  window.onload = function() { document.worker.postMessage(""); };
-&lt;/script&gt;
-&lt;/head&gt;
-&lt;body&gt;&lt;div id="logDisplay"&gt;&lt;/div&gt;&lt;/body&gt;
-&lt;/html&gt;</pre>
-
-<p>Le worker embarqué est maintenant imbriqué dans une nouvelle propriété personnalisée <code>document.worker</code>.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Cette section fournit plusieurs exemples sur la façon d'utiliser les workers DOM.</p>
-
-<h3 id="Réaliser_des_calculs_en_arrière-plan">Réaliser des calculs en arrière-plan</h3>
-
-<p>Les workers sont principalement utiles pour permettre à votre code de réaliser des calculs très consommateur en CPU sans bloquer le thread de l'interface utilisateur. Dans cet exemple, un worker est utilisé pour calculer la suite de Fibonacci.</p>
-
-<h4 id="Le_code_JavaScript">Le code JavaScript</h4>
-
-<p>Le code JavaScript suivant est stocké dans le fichier "fibonacci.js" référencé par le fichier HTML dans la prochaine section.</p>
-
-<pre class="brush: js">var results = [];
-
-function resultReceiver(event) {
- results.push(parseInt(event.data));
- if (results.length == 2) {
- postMessage(results[0] + results[1]);
- }
-}
-
-function errorReceiver(event) {
- throw event.data;
-}
-
-onmessage = function(event) {
- var n = parseInt(event.data);
-
- if (n == 0 || n == 1) {
- postMessage(n);
- return;
- }
-
- for (var i = 1; i &lt;= 2; i++) {
-    var worker = new Worker("fibonacci.js");
-    worker.onmessage = resultReceiver;
-    worker.onerror = errorReceiver;
-    worker.postMessage(n - i);
-  }
- };</pre>
-
-<p>Le worker affecte à la propriété <code>onmessage</code>  une fonction qui recevra les messages envoyés lorsque la méthode  <code>postMessage()</code> de l'objet worker est appelée (remarquez que cela diffère de définir une <em>variable</em> globale de ce nom, ou de définir une <em>fonction</em> avec ce nom.   <code>var onmessage</code> <code>et function onmessage</code> définissent des propriétés globales avec ces noms, mais elles n'enregistrent pas la fonction pour recevoir les messages envoyés par la page web qui a créé le worker). Au démarrage de la récursion, il engendre ainsi de nouvelles copies de lui-même pour gérer chacune des itérations du calcul.</p>
-
-<h4 id="Le_code_HTML">Le code HTML</h4>
-
-<pre class="brush: html">&lt;!DOCTYPE html&gt;
-&lt;html&gt;
- &lt;head&gt;
- &lt;meta charset="UTF-8" /&gt;
- &lt;title&gt;Test threads fibonacci&lt;/title&gt;
- &lt;/head&gt;
- &lt;body&gt;
-
- &lt;div id="result"&gt;&lt;/div&gt;
-
- &lt;script language="javascript"&gt;
-
- var worker = new Worker("fibonacci.js");
-
- worker.onmessage = function(event) {
- document.getElementById("result").textContent = event.data;
- dump("Got: " + event.data + "\n");
- };
-
- worker.onerror = function(error) {
- dump("Worker error: " + error.message + "\n");
- throw error;
- };
-
- worker.postMessage("5");
-
- &lt;/script&gt;
- &lt;/body&gt;
-&lt;/html&gt;
-</pre>
-
-<p>La page web crée un élément <code>div</code> avec l'ID  <code>result</code> , qui sera utilisé pour afficher le résultat, puis engendre le worker.  Après création du worker, le gestionnaire <code>onmessage</code> est configuré pour afficher les résultats en renseignant le contenu de l'élément <code>div</code>, et le gestionnaire <code>onerror</code> est configuré pour <a class="external" href="/en/Debugging_JavaScript#dump()" title="https://developer.mozilla.org/editor/fckeditor/core/editor/en/Debugging_JavaScript#dump()">capturer</a> le message d'erreur.</p>
-
-<p>Finalement, un message est envoyé au worker pour le démarrer.</p>
-
-<p><a class="external" href="/samples/workers/fibonacci" title="https://developer.mozilla.org/samples/workers/fibonacci/">Tester cet exemple</a>.</p>
-
-<h3 id="Réaliser_des_ES_web_en_arrière-plan">Réaliser des E/S web en arrière-plan</h3>
-
-<p>Vous pouvez trouver un tel exemple dans l'article <a class="internal" href="/En/Using_workers_in_extensions" title="En/Using workers in extensions">Using workers in extensions</a> .</p>
-
-<h3 id="Répartir_des_tâches_entre_plusieurs_workers">Répartir des tâches entre plusieurs workers</h3>
-
-<p>Les ordinateurs multi-coeur étant de plus en plus répandus, il est souvent utile de répartir le calcul de tâches complexes entre différents workers afin de tirer partie des coeurs de ces multiprocesseurs.</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/en-US/docs/Web/API/Web_Workers_API">API Web Workers</a></li>
- <li><a href="/en-US/docs/Web/API/Web_Workers_API/basic_usage">Utilisation des web workers</a></li>
-</ul>
diff --git a/files/fr/web/api/web_workers_api/functions_and_classes_available_to_workers/index.html b/files/fr/web/api/web_workers_api/functions_and_classes_available_to_workers/index.html
new file mode 100644
index 0000000000..379f86edd6
--- /dev/null
+++ b/files/fr/web/api/web_workers_api/functions_and_classes_available_to_workers/index.html
@@ -0,0 +1,240 @@
+---
+title: Fonctions et classes disponibles dans les Web Workers
+slug: Web/API/Worker/Functions_and_classes_available_to_workers
+translation_of: Web/API/Web_Workers_API/Functions_and_classes_available_to_workers
+---
+<p>En plus de l'ensemble des fonctions standard <a href="/en-US/docs/Web/JavaScript">JavaScript</a> (telles que {{jsxref("Global_Objects/String", "String")}}, {{jsxref("Global_Objects/Array", "Array")}}, {{jsxref("Global_Objects/Object", "Object")}}, {{jsxref("Global_Objects/JSON", "JSON")}} etc), des fonctions du DOM restent disponibles pour les workers. Cet article en fournit la liste.</p>
+
+<p><strong>Les workers s'exécutent dans un contexte global, {{domxref("DedicatedWorkerGlobalScope")}} différent du contexte de la fenêtre courante</strong>. Par défaut les méthodes et propriétés de {{domxref("Window")}} ne leur sont pas disponibles, mais {{domxref("DedicatedWorkerGlobalScope")}}, comme <code>Window</code>, implémente {{domxref("WindowTimers")}} et {{domxref("WindowBase64")}}.</p>
+
+<h2 id="Comparaison_des_propriétés_et_méthodes_des_différents_types_de_workers">Comparaison des propriétés et méthodes des différents types de workers</h2>
+
+<table class="standard-table">
+ <tbody>
+ <tr>
+ <td class="header">Fonctions</td>
+ <td class="header">Workers dédiés</td>
+ <td class="header">Workers partagés</td>
+ <td class="header">Service workers</td>
+ <td class="header">Chrome workers {{Non-standard_inline}}</td>
+ <td class="header">En dehors des  workers</td>
+ </tr>
+ <tr>
+ <td>{{domxref("WindowBase64.atob", "atob()")}}</td>
+ <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+ <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+ <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+ <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+ <td>oui, sur {{domxref("Window")}}</td>
+ </tr>
+ <tr>
+ <td>{{domxref("WindowBase64.btoa", "btoa()")}}</td>
+ <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+ <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+ <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+ <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+ <td>oui, sur {{domxref("Window")}}</td>
+ </tr>
+ <tr>
+ <td>{{domxref("WindowTimers.clearInterval", "clearInterval()")}}</td>
+ <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+ <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+ <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+ <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+ <td>oui, sur {{domxref("Window")}}</td>
+ </tr>
+ <tr>
+ <td>{{domxref("WindowTimers.clearTimeout", "clearTimeout()")}}</td>
+ <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+ <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+ <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+ <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+ <td>oui, sur {{domxref("Window")}}</td>
+ </tr>
+ <tr>
+ <td>{{domxref("Window.dump()", "dump()")}} {{non-standard_inline}}</td>
+ <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+ <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+ <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+ <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+ <td>oui, sur {{domxref("Window")}}</td>
+ </tr>
+ <tr>
+ <td>{{domxref("WindowTimers.setInterval", "setInterval()")}}</td>
+ <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+ <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+ <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+ <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+ <td>oui, sur {{domxref("Window")}}</td>
+ </tr>
+ <tr>
+ <td>{{domxref("WindowTimers.setTimeout", "setTimeout()")}}</td>
+ <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+ <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+ <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+ <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+ <td>oui, sur {{domxref("Window")}}</td>
+ </tr>
+ <tr>
+ <td>{{domxref("WorkerGlobalScope.importScripts", "importScripts()")}}</td>
+ <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+ <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+ <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+ <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+ <td>non</td>
+ </tr>
+ <tr>
+ <td>{{domxref("WorkerGlobalScope.close", "close()")}} {{non-standard_inline}}</td>
+ <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+ <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+ <td>oui, mais sans effet</td>
+ <td>Inconnu</td>
+ <td>non</td>
+ </tr>
+ <tr>
+ <td>{{domxref("DedicatedWorkerGlobalScope.postMessage", "postMessage()")}}</td>
+ <td>oui, sur {{domxref("DedicatedWorkerGlobalScope")}}</td>
+ <td>non</td>
+ <td>non</td>
+ <td>Inconnu</td>
+ <td>non</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="APIs_disponibles_dans_les_workers">APIs disponibles dans les workers</h2>
+
+<table class="standard-table">
+ <tbody>
+ <tr>
+ <td class="header">Fonction</td>
+ <td class="header">Fonctionnalité</td>
+ <td class="header">Support dans Gecko (Firefox)</td>
+ <td class="header">Support dans IE</td>
+ <td class="header">Support dans Blink (Chrome et Opera)</td>
+ <td class="header">Support dans WebKit (Safari)</td>
+ </tr>
+ <tr>
+ <td><code>XMLHttpRequest</code></td>
+ <td>Crée et retourne un nouvel objet {{domxref("XMLHttpRequest")}}; il imite le comportement du constructeur standard <code>XMLHttpRequest()</code>. Remarquez que les attributs <code>responseXML</code> et <code>channel</code> de <code>XMLHttpRequest</code> retourne toujours <code>null</code>.</td>
+ <td>
+ <p>Basique : {{CompatGeckoDesktop("1.9.1")}}</p>
+
+ <p>{{domxref("XMLHttpRequest.response", "response")}} et {{domxref("XMLHttpRequest.responseType", "responseType")}} sont disponibles depuis {{CompatGeckoDesktop("10")}}</p>
+
+ <p>{{domxref("XMLHttpRequest.timeout", "timeout")}} et {{domxref("XMLHttpRequest.ontimeout", "ontimeout")}} sont disponibles depuis {{CompatGeckoDesktop("13")}}</p>
+ </td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ </tr>
+ <tr>
+ <td><code>Worker</code></td>
+ <td>Crée un nouveau {{ domxref("Worker") }}. Oui, les workers peuvent engendrer des workers supplémentaires.</td>
+ <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+ <td>10.0</td>
+ <td>{{CompatNo}} Voir <a class="external" href="http://code.google.com/p/chromium/issues/detail?id=31666" rel="external" title="http://code.google.com/p/chromium/issues/detail?id=31666">crbug.com/31666</a></td>
+ <td>{{CompatNo}}</td>
+ </tr>
+ <tr>
+ <td>{{ domxref("URL") }}</td>
+ <td>Les workers peuvent utiliser les méthodes statiques <a href="/en-US/docs/DOM/window.URL.createObjectURL" title="/en-US/docs/DOM/window.URL.createObjectURL">URL.createObjectURL</a> et <a href="/en-US/docs/DOM/window.URL.revokeObjectURL" title="/en-US/docs/DOM/window.URL.revokeObjectURL">URL.revokeObjectURL</a> avec les objets {{domxref("Blob")}} accessibles au worker.<br>
+ Les workers peuvent aussi créer une nouvelle URL en utilisant le constructeur {{domxref("URL.URL", "URL()")}} et appeler n'importe quelle méthode normale sur l'objet retourné.</td>
+ <td>{{CompatGeckoDesktop(21)}} et {{CompatGeckoDesktop(26)}} pour le constructeur URL()</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ </tr>
+ <tr>
+ <td>{{domxref("TextEncoder")}} and {{domxref("TextDecoder")}}</td>
+ <td>Crée et retourne un nouveau {{domxref("TextEncoder")}}, ou respectivement {{domxref("TextDecoder")}}, permettant d'encoder ou de décoder des chaînes de caractère dans un encodage spécifique.</td>
+ <td>{{CompatGeckoDesktop(20)}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ </tr>
+ <tr>
+ <td>{{domxref("WorkerNavigator")}}</td>
+ <td>Le sous-ensemble de l'interface {{domxref("Navigator")}} disponible aux workers.</td>
+ <td>Implémentation basique {{CompatVersionUnknown}}<br>
+ {{domxref("NavigatorID.appCodeName", "appCodeName")}}, {{domxref("NavigatorID.product", "product")}}, {{domxref("NavigatorID.taintEnabled", "taintEnabled()")}}: {{CompatGeckoDesktop(28)}}<br>
+ {{domxref("WorkerNavigator.onLine", "onLine")}}: {{CompatGeckoDesktop(29)}}<br>
+ {{domxref("NavigatorLanguage")}}: {{CompatNo}}</td>
+ <td>{{domxref("NavigatorID.appName", "appName")}}, {{domxref("NavigatorID.appVersion", "appName")}}, {{domxref("WorkerNavigator.onLine", "onLine")}}, {{domxref("NavigatorID.platform", "platform")}}, {{domxref("NavigatorID.userAgent", "userAgent")}}: 10.0<br>
+ Autre : {{CompatNo}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ </tr>
+ <tr>
+ <td>{{domxref("WorkerLocation")}}</td>
+ <td>Le sous-ensemble de l'interface {{domxref("Location")}} disponible aux workers.</td>
+ <td>{{CompatGeckoDesktop(1.9.2)}}</td>
+ <td>10.0</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ </tr>
+ <tr>
+ <td>{{domxref("WorkerGlobalScope")}}</td>
+ <td>Le contexte global des workers. Cet objet définit <a href="#workerscope">les fonctions spécifiques aux workers</a>.</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>10.0</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ </tr>
+ <tr>
+ <td>{{domxref("ImageData")}}</td>
+ <td>Les données en pixels sous-jacentes à une zone d'un élément {{domxref("canvas")}}. Manipuler de telles données peut être une tâche complexe qu'il est plus approprié de déléguer à un web worker.</td>
+ <td>{{CompatGeckoDesktop(25)}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ </tr>
+ <tr>
+ <td>{{domxref("FileReaderSync")}}</td>
+ <td>Cette API permet la lecture synchrone d'objets {{domxref("Blob")}} et {{domxref("File")}}. C'est une API qui fonctionne uniquement au sein des workers.</td>
+ <td>{{CompatGeckoDesktop(8)}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ </tr>
+ <tr>
+ <td>{{domxref("IndexedDB_API", "IndexedDB")}}</td>
+ <td>Une base de données pour stocker des enregistrements contenant des valeurs simples et des objets hiérarchiques.</td>
+ <td>{{CompatGeckoDesktop(37)}}</td>
+ <td>10.0</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatNo}}</td>
+ </tr>
+ <tr>
+ <td>{{domxref("WebSocket")}}</td>
+ <td>Crée et retourne un nouvel objet {{domxref("WebSocket")}}; Il imite le comportement d'un constructeur <code>WebSocket()</code> standard.</td>
+ <td>{{CompatGeckoDesktop(36)}}</td>
+ <td>11.0</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ </tr>
+ <tr>
+ <td><a href="/en-US/docs/Web/API/Data_Store_API">Data Store API</a></td>
+ <td>Un mécanisme de stockage puissant et flexible pour de multiples applications Firefox OS qui ont l'habitude de stocker et d'échanger des données entre elles de manière rapide, efficace et sécurisée.</td>
+ <td>Seulement dans les applications internes (certifiées) de Firefox OS, deuis v1.0.1.</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ </tr>
+ <tr>
+ <td><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a></td>
+ <td>Les objets JavaScript qui vous permettent d'écrire des fonctions asynchrones.</td>
+ <td>{{CompatGeckoDesktop(28)}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Utilisation_des_web_workers" title="https://developer.mozilla.org/En/Using_web_workers">Utilisation des web workers</a></li>
+ <li>{{ domxref("Worker") }}</li>
+</ul>
diff --git a/files/fr/web/api/web_workers_api/algorithme_clonage_structure/index.html b/files/fr/web/api/web_workers_api/structured_clone_algorithm/index.html
index dfb8c20bf9..dfb8c20bf9 100644
--- a/files/fr/web/api/web_workers_api/algorithme_clonage_structure/index.html
+++ b/files/fr/web/api/web_workers_api/structured_clone_algorithm/index.html
diff --git a/files/fr/web/api/web_workers_api/utilisation_des_web_workers/index.html b/files/fr/web/api/web_workers_api/using_web_workers/index.html
index b1330f34bf..b1330f34bf 100644
--- a/files/fr/web/api/web_workers_api/utilisation_des_web_workers/index.html
+++ b/files/fr/web/api/web_workers_api/using_web_workers/index.html