Différentes façons de faire du multi-threading et asynchrone en JavaScript
Avant HTML5, JavaScript n'autorisait l'exécution que d'un fil par page.
Il y avait une certaine façon hacky pour simuler une exécution asynchrone avec rendement , setTimeout(), setInterval(), XMLHttpRequestou gestionnaires d'événements (voir la fin de ce post pour un exemple avec le rendement et setTimeout()).
Mais avec HTML5, nous pouvons désormais utiliser Worker Threads pour paralléliser l'exécution des fonctions. Voici un exemple d'utilisation.
Véritable multi-threading
Multi-threading: threads de travail JavaScript
HTML5 a introduit les threads Web Worker (voir: compatibilités des navigateurs )
Remarque: IE9 et les versions antérieures ne le prennent pas en charge.
Ces threads de travail sont des threads JavaScript qui s'exécutent en arrière-plan sans affecter les performances de la page. Pour plus d'informations sur Web Worker, lisez la documentation ou ce didacticiel .
Voici un exemple simple avec 3 threads Web Worker qui comptent jusqu'à MAX_VALUE et montrent la valeur calculée actuelle dans notre page:
//As a worker normally take another JavaScript file to execute we convert the function in an URL: http://stackoverflow.com/a/16799132/2576706
function getScriptPath(foo){ return window.URL.createObjectURL(new Blob([foo.toString().match(/^\s*function\s*\(\s*\)\s*\{(([\s\S](?!\}$))*[\s\S])/)[1]],{type:'text/javascript'})); }
var MAX_VALUE = 10000;
/*
* Here are the workers
*/
//Worker 1
var worker1 = new Worker(getScriptPath(function(){
self.addEventListener('message', function(e) {
var value = 0;
while(value <= e.data){
self.postMessage(value);
value++;
}
}, false);
}));
//We add a listener to the worker to get the response and show it in the page
worker1.addEventListener('message', function(e) {
document.getElementById("result1").innerHTML = e.data;
}, false);
//Worker 2
var worker2 = new Worker(getScriptPath(function(){
self.addEventListener('message', function(e) {
var value = 0;
while(value <= e.data){
self.postMessage(value);
value++;
}
}, false);
}));
worker2.addEventListener('message', function(e) {
document.getElementById("result2").innerHTML = e.data;
}, false);
//Worker 3
var worker3 = new Worker(getScriptPath(function(){
self.addEventListener('message', function(e) {
var value = 0;
while(value <= e.data){
self.postMessage(value);
value++;
}
}, false);
}));
worker3.addEventListener('message', function(e) {
document.getElementById("result3").innerHTML = e.data;
}, false);
// Start and send data to our worker.
worker1.postMessage(MAX_VALUE);
worker2.postMessage(MAX_VALUE);
worker3.postMessage(MAX_VALUE);
<div id="result1"></div>
<div id="result2"></div>
<div id="result3"></div>
Nous pouvons voir que les trois threads sont exécutés en simultanéité et affichent leur valeur actuelle dans la page. Ils ne gèlent pas la page car ils sont exécutés en arrière-plan avec des threads séparés.
Multi-threading: avec plusieurs iframes
Une autre façon d'y parvenir est d'utiliser plusieurs iframes , chacun exécutant un thread. Nous pouvons donner à l' iframe des paramètres par l'URL et l' iframe peut communiquer avec son parent afin d'obtenir le résultat et de le réimprimer (l' iframe doit être dans le même domaine).
Cet exemple ne fonctionne pas dans tous les navigateurs! Les iframes fonctionnent généralement dans le même thread / processus que la page principale (mais Firefox et Chromium semblent le gérer différemment).
Étant donné que l'extrait de code ne prend pas en charge plusieurs fichiers HTML, je vais simplement fournir les différents codes ici:
index.html:
//The 3 iframes containing the code (take the thread id in param)
<iframe id="threadFrame1" src="thread.html?id=1"></iframe>
<iframe id="threadFrame2" src="thread.html?id=2"></iframe>
<iframe id="threadFrame3" src="thread.html?id=3"></iframe>
//Divs that shows the result
<div id="result1"></div>
<div id="result2"></div>
<div id="result3"></div>
<script>
//This function is called by each iframe
function threadResult(threadId, result) {
document.getElementById("result" + threadId).innerHTML = result;
}
</script>
thread.html:
//Get the parameters in the URL: http://stackoverflow.com/a/1099670/2576706
function getQueryParams(paramName) {
var qs = document.location.search.split('+').join(' ');
var params = {}, tokens, re = /[?&]?([^=]+)=([^&]*)/g;
while (tokens = re.exec(qs)) {
params[decodeURIComponent(tokens[1])] = decodeURIComponent(tokens[2]);
}
return params[paramName];
}
//The thread code (get the id from the URL, we can pass other parameters as needed)
var MAX_VALUE = 100000;
(function thread() {
var threadId = getQueryParams('id');
for(var i=0; i<MAX_VALUE; i++){
parent.threadResult(threadId, i);
}
})();
Simuler le multi-threading
Single-thread: émuler la concurrence JavaScript avec setTimeout ()
La manière `` naïve '' serait d'exécuter la fonction l' setTimeout()une après l'autre comme ceci:
setTimeout(function(){ /* Some tasks */ }, 0);
setTimeout(function(){ /* Some tasks */ }, 0);
[...]
Mais cette méthode ne fonctionne pas car chaque tâche sera exécutée l'une après l'autre.
Nous pouvons simuler une exécution asynchrone en appelant la fonction de manière récursive comme ceci:
var MAX_VALUE = 10000;
function thread1(value, maxValue){
var me = this;
document.getElementById("result1").innerHTML = value;
value++;
//Continue execution
if(value<=maxValue)
setTimeout(function () { me.thread1(value, maxValue); }, 0);
}
function thread2(value, maxValue){
var me = this;
document.getElementById("result2").innerHTML = value;
value++;
if(value<=maxValue)
setTimeout(function () { me.thread2(value, maxValue); }, 0);
}
function thread3(value, maxValue){
var me = this;
document.getElementById("result3").innerHTML = value;
value++;
if(value<=maxValue)
setTimeout(function () { me.thread3(value, maxValue); }, 0);
}
thread1(0, MAX_VALUE);
thread2(0, MAX_VALUE);
thread3(0, MAX_VALUE);
<div id="result1"></div>
<div id="result2"></div>
<div id="result3"></div>
Comme vous pouvez le voir, cette deuxième méthode est très lente et fige le navigateur car elle utilise le thread principal pour exécuter les fonctions.
Single-thread: émuler la concurrence JavaScript avec rendement
Le rendement est une nouvelle fonctionnalité d' ECMAScript 6 , elle ne fonctionne que sur la version la plus ancienne de Firefox et Chrome (dans Chrome, vous devez activer le JavaScript expérimental apparaissant dans chrome: // flags / # enable-javascript-harmonie ).
Le mot-clé yield provoque la pause de l'exécution de la fonction de générateur et la valeur de l'expression qui suit le mot-clé yield est renvoyée à l'appelant du générateur. Il peut être considéré comme une version basée sur un générateur du mot-clé return.
Un générateur vous permet de suspendre l'exécution d'une fonction et de la reprendre plus tard. Un générateur peut être utilisé pour planifier vos fonctions avec une technique appelée trampoline .
Voici l'exemple:
var MAX_VALUE = 10000;
Scheduler = {
_tasks: [],
add: function(func){
this._tasks.push(func);
},
start: function(){
var tasks = this._tasks;
var length = tasks.length;
while(length>0){
for(var i=0; i<length; i++){
var res = tasks[i].next();
if(res.done){
tasks.splice(i, 1);
length--;
i--;
}
}
}
}
}
function* updateUI(threadID, maxValue) {
var value = 0;
while(value<=maxValue){
yield document.getElementById("result" + threadID).innerHTML = value;
value++;
}
}
Scheduler.add(updateUI(1, MAX_VALUE));
Scheduler.add(updateUI(2, MAX_VALUE));
Scheduler.add(updateUI(3, MAX_VALUE));
Scheduler.start()
<div id="result1"></div>
<div id="result2"></div>
<div id="result3"></div>