Este exemplo compara a realização de uma tarefa de cálculo JavaScript com e sem o uso de WebWorkers.
Clique o botão para iniciar o cálculo e a seguir tente interagir com a página, por exemplo: selecionar textos na página.
Notar que Sem Worker a seleção não é possível enquando o cálculo está em andamento e com Worker não há bloqueio da interação.
Iniciar cálculo:
<script> function init() { if (!Modernizr.webworkers) {alert('Lamento, seu navegador não suporta Web Workers')} var i,r,btnSemWorker,btnComWorker,campoResultado,btnLimpar; btnSemWorker = document.getElementsByTagName('button')[0]; btnComWorker = document.getElementsByTagName('button')[1]; campoResultado = document.getElementsByTagName('input')[0]; btnLimpar = document.getElementsByTagName('button')[2]; // sem worker function calcula() { campoResultado.style.color ='red'; campoResultado.value = 'Calculando...'; setTimeout(function() { r = 0 for(i=0; i<=1e+9; i++){r += i;} campoResultado.value = r; },100) }; if(window.addEventListener) { btnSemWorker.addEventListener('click', calcula, false); btnLimpar.addEventListener('click', function() { campoResultado.value = ''; }, false); } else { btnSemWorker.attachEvent('onclick', calcula); btnLimpar.attachEvent('onclick', function() { campoResultado.value = ''; }); } // com worker function calcWorker() { campoResultado.value = 'Calculando...'; var worker = new Worker('calcula.js'); worker.onmessage = function (evt) { campoResultado.value = evt.data; }; }; if(window.addEventListener) { btnComWorker.addEventListener('click', calcWorker, false); } else { btnComWorker.attachEvent('onclick', calcWorker); }; } window.onload = init; </script> // xxxxxxxxxxxxx Tarefa do Worker - arquivo calcula.js xxxxxxxxxxxxx var r=0; for(i=0; i<=1e+9; i++) {r += i;} postMessage(r);
<section> <p>Iniciar cálculo: <button type=button>Sem Worker</button> <button type=button>Com Worker</button></p> <p><label>Resultado:<br><input type=text></label></p> <button type=button>Limpar</button> </section>