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>