Rendimiento de Javascript con Worker

Javascript el lenguaje del lado del cliente sin duda el gran amigo del front end y claro ahora con node.js tambien de los back end, Con Javascript podemos manipular el DOM  (Modelo de Objetos del Documento) como se nos antoje y se puede hacer sin fin de cosas efectos como pueden ver en mis desarrollos como por ejemplo:
http://productosalpha.com.pe
http://macablast.com

Son web con bastante trabajo con javascript todo estos corren en el nucleo del procesador y lo mas logico seria que si tengo un procesador de 8 nucleos debe correr mas rapido que un procesador de 4 nucleos pero lamento decirte que esto no es asi. Javascript no aprovecha los nucleos que se tiene solo lo corre todo en 1 solo en vez de dividir el proceso y responder 4 , 8 o la cantidad de nucleos que tengas en el procesador.

Ejemplo:
antes de abrir la pagina asi estaba los procesos en los nucleos

al abrir la web vemos que no se provechan todos los nucleos del procesador.

HTML5 comprendio esto y brinda a los desarrolladores una api llamada worker que soluciona este  problema y nos hace usar mejor el CPU. Entonces ya que HTML5 tendras bien claro que no va a correr en las viejas versiones de navegadores y como saber si corre en mi navegador o no? puedes ir a ver a canaius  sobre la compatibilidad de navegadores .

Ahora la parte interesante CODIGO!
comenzaremos sabiendo primero si nuestro navegador soporta worker de lo contrario hacemos otra cosa para que no nos mande error

 
if (window.Worker) 
{ 
console.log('corre el worker') 
} else 
{ 
console.log('no corre el worker') 
} 

Entonces podemos agregar de esta manera nuestros JS y cada vez que instanciamos a worker si va ejecutando en distintos nucleos

 
if (window.Worker) 
{ 
js_libreria1= new Worker("js_libreria1.js"); 
js_libreria2= new Worker("js_libreria2.js"); 
js_libreria3= new Worker("js_libreria3.js"); 
js_libreria4= new Worker("js_libreria4.js"); 
} 
else 
{ 
document.write("< script src=js_libreria1.js>") 
document.write("< script src=js_libreria2.js>") 
document.write("< script src=js_libreria3.js>") 
document.write("< script src=js_libreria4.js>") 
} 

Bueno aqui abajo dejo un ejemplo mas complejo con el uso del worker con un pequeño reloj para poder enviarse datos desde la libreria y en la variable que instanciamos para recibir (el codigo esta comentada para que puedan entenderlo).

Esto va en HTML

 
/*la funcion iniciar worker*/ 
function IniciarWorker() { 
/*confirmamos si soporta el worker el navegador*/ 
if(window.Worker) { 
/*declaramos la libreria*/ 
w = new Worker("libreria.js"); 
/*abrimos el enlace con la libreria que instanciamos*/ 
w.onmessage = function (event){ 
/*imprimimos el valor que nos envia la libreria*/ 
document.getElementById("resultado").innerHTML = event.data; }; 
} else 
{ 
/*si no soporta worker muestra un mensaje*/ 
document.getElementById("resultado").innerHTML= "no soporta los workers"; 
} 
} 
/*funcion de detener worker*/ 
function DetenerWorker() 
{ 
/* a la variable que instanciamos con el worker le pasamos terminate para matar*/ 
w.terminate(); 
} 

y en libreria.js

 
/*funcion que genera la hora*/ 
function hora() { 
/* instanciamos date*/ 
var f= new Date(); 
/*armamos la hora*/ 
h=f. getHours()+":"+f.getMinutes()+":"+f.getSeconds(); 
/*esta parte es la importante por que de esta forma enviamos el valor para que lo recoja en el otro lado*/ 
postMessage(h); 
/*que se repita cada segundo*/ 
setTimeout("hora()",1000); 
} 
hora(); 

Puedes descargarse el ejemplo worker

Ahí aun que investigar aun pero en otros nuevos articulos seguire con este tema que es muy interesante.