Manera diferente de hacer subprocesos múltiples y asíncrono en JavaScript
Antes de HTML5, JavaScript solo permitía la ejecución de un hilo por página.
Hubo alguna manera hacky para simular una ejecución asíncrona con Rendimiento , setTimeout(), setInterval(), XMLHttpRequesto controladores de eventos (véase el final de este post para un ejemplo con rendimiento y setTimeout()).
Pero con HTML5 ahora podemos usar Worker Threads para paralelizar la ejecución de funciones. Aquí hay un ejemplo de uso.
Real multihilo
Multi-threading: JavaScript Worker Threads
HTML5 introdujo Web Worker Threads (ver: compatibilidad de navegadores )
Nota: IE9 y versiones anteriores no lo admiten.
Estos hilos de trabajo son hilos de JavaScript que se ejecutan en segundo plano sin afectar el rendimiento de la página. Para obtener más información sobre Web Worker, lea la documentación o este tutorial .
Aquí hay un ejemplo simple con 3 hilos de Web Worker que cuentan hasta MAX_VALUE y muestran el valor calculado actual en nuestra página:
//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>
Podemos ver que los tres hilos se ejecutan en concurrencia e imprimen su valor actual en la página. No congelan la página porque se ejecutan en segundo plano con hilos separados.
Multihilo: con múltiples iframes
Otra forma de lograr esto es usar múltiples iframes , cada uno ejecutará un hilo. Podemos proporcionarle al iframe algunos parámetros mediante la URL y el iframe puede comunicarse con su padre para obtener el resultado e imprimirlo de nuevo (el iframe debe estar en el mismo dominio).
¡Este ejemplo no funciona en todos los navegadores! Los iframes generalmente se ejecutan en el mismo hilo / proceso que la página principal (pero Firefox y Chromium parecen manejarlo de manera diferente).
Dado que el fragmento de código no admite varios archivos HTML, solo proporcionaré los diferentes códigos aquí:
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);
}
})();
Simular subprocesos múltiples
Subproceso único: emule la concurrencia de JavaScript con setTimeout ()
La forma 'ingenua' sería ejecutar la función setTimeout()una tras otra de esta manera:
setTimeout(function(){ /* Some tasks */ }, 0);
setTimeout(function(){ /* Some tasks */ }, 0);
[...]
Pero este método no funciona porque cada tarea se ejecutará una tras otra.
Podemos simular la ejecución asincrónica llamando a la función de forma recursiva de esta manera:
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>
Como puede ver, este segundo método es muy lento y congela el navegador porque usa el hilo principal para ejecutar las funciones.
Subproceso único: emule la concurrencia de JavaScript con el rendimiento
El rendimiento es una nueva característica en ECMAScript 6 , solo funciona en la versión más antigua de Firefox y Chrome (en Chrome necesita habilitar JavaScript experimental que aparece en chrome: // flags / # enable-javascript-harmony ).
La palabra clave de rendimiento hace que la ejecución de la función del generador se detenga y el valor de la expresión que sigue a la palabra clave de rendimiento se devuelve al llamador del generador. Puede considerarse como una versión basada en generador de la palabra clave return.
Un generador le permite suspender la ejecución de una función y reanudarla más tarde. Se puede usar un generador para programar sus funciones con una técnica llamada trampolín .
Aquí está el ejemplo:
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>