Modo diverso di fare multi-threading e asincrono in JavaScript
Prima di HTML5 JavaScript consentiva solo l'esecuzione di un thread per pagina.
Ci fosse un modo hacky per simulare un'esecuzione asincrona con Yield , setTimeout(), setInterval(), XMLHttpRequesto gestori di eventi (vedere la fine di questo post per un esempio con resa e setTimeout()).
Ma con HTML5 ora possiamo usare i thread di lavoro per parallelizzare l'esecuzione delle funzioni. Ecco un esempio di utilizzo.
Vero multi-threading
Multi-threading: thread di lavoro JavaScript
HTML5 ha introdotto i thread di lavoro Web (vedi: compatibilità dei browser )
Nota: IE9 e le versioni precedenti non lo supportano.
Questi thread di lavoro sono thread JavaScript eseguiti in background senza influire sulle prestazioni della pagina. Per ulteriori informazioni su Web Worker leggi la documentazione o questa esercitazione .
Ecco un semplice esempio con 3 thread di Web Worker che contano fino a MAX_VALUE e mostrano il valore calcolato corrente nella nostra pagina:
//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>
Possiamo vedere che i tre thread vengono eseguiti in concorrenza e stampano il loro valore corrente nella pagina. Non congelano la pagina perché vengono eseguiti in background con thread separati.
Multi-threading: con più iframe
Un altro modo per raggiungere questo obiettivo è utilizzare più iframe , ognuno eseguirà un thread. Possiamo fornire all'iframe alcuni parametri tramite l'URL e l' iframe può comunicare con il suo genitore per ottenere il risultato e stamparlo (l' iframe deve trovarsi nello stesso dominio).
Questo esempio non funziona in tutti i browser! gli iframe di solito vengono eseguiti nello stesso thread / processo della pagina principale (ma Firefox e Chromium sembrano gestirli in modo diverso).
Poiché lo snippet di codice non supporta più file HTML, fornirò semplicemente i diversi codici qui:
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);
}
})();
Simula il multi-threading
Single thread: emula la concorrenza JavaScript con setTimeout ()
Il modo 'ingenuo' sarebbe di eseguire la funzione setTimeout()una dopo l'altra in questo modo:
setTimeout(function(){ /* Some tasks */ }, 0);
setTimeout(function(){ /* Some tasks */ }, 0);
[...]
Ma questo metodo non funziona perché ogni attività verrà eseguita una dopo l'altra.
Possiamo simulare l'esecuzione asincrona chiamando la funzione in modo ricorsivo in questo modo:
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>
Come puoi vedere, questo secondo metodo è molto lento e congela il browser perché utilizza il thread principale per eseguire le funzioni.
Single thread: emula la concorrenza JavaScript con la resa
Rendimento è una nuova funzionalità di ECMAScript 6 , funziona solo con la versione più vecchia di Firefox e Chrome (in Chrome è necessario abilitare JavaScript sperimentale che appare in chrome: // flags / # enable-javascript-harmony ).
La parola chiave yield rende l'esecuzione della funzione generatore in pausa e il valore dell'espressione che segue la parola chiave yield viene restituito al chiamante del generatore. Può essere pensato come una versione basata sul generatore della parola chiave return.
Un generatore consente di sospendere l'esecuzione di una funzione e riprenderla in un secondo momento. Un generatore può essere utilizzato per programmare le tue funzioni con una tecnica chiamata trampolino .
Ecco l'esempio:
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>