Introdução sobre HTML5 Web Workers e multi threads com javascript

Trabalhar de forma assíncrona e paralela nos demanda cada dia mais na construção de aplicativos web com maior facilidade e performance. A especificação de Web Workers (link em inglês) define uma API para geração de scripts de segundo plano no seu aplicativo da web.

O Web Workers permite executar tarefas como disparar scripts de longa duração para executar tarefas muito dispendiosas, mas sem bloquear a interface de usuário ou outros scripts para manipular interações com o usuário. Seria basicamente trabalhar com multi threads dentro do javascript.

Então o que é um Web Worker?

Normalmente, ao executar scripts em uma página HTML, a página não responde até que o script seja concluído. Um Web work é um JavaScript que é executado em segundo plano, independentemente de outros scripts, sem afetar o desempenho da página. Você pode continuar fazendo o que quiser: clicando, selecionando coisas, etc., enquanto o trabalhador da Web é executado em segundo plano.

Verifique o suporte do Web Worker

Antes de criar um web worker, verifique se o navegador do usuário o suporta:

if (typeof(Worker) !== "undefined") {
    // Temos suporte à webworker!
    // Faça o que precisar.....
} else {
    // Não temos suporte :(
}

Crie um arquivo do Web Worker

Agora, vamos criar o nosso web worker em um JavaScript externo. Aqui, criamos um script que faz uma simples contagem crescente. O script é armazenado no arquivo “demo_workers.js”, mas você pode colocar o nome que desejar:

var i = 0;

function timedCount() {
    i = i + 1;
    postMessage(i);
    setTimeout("timedCount()",500);
}

timedCount();

A parte importante do código acima é o método postMessage() – que é usado para publicar uma mensagem de volta para a página HTML.

Nota: Normalmente, os web workers não são utilizados para scripts tão simples, mas para tarefas mais intensivas em CPU.

Crie um Objeto Web Worker

Agora que temos o arquivo do worker, precisamos chamá-lo de uma página HTML. As seguintes linhas verificam se o trabalhador já existe, se não – cria um novo objeto de trabalhador web e executa o código em “demo_workers.js”, também adicionamos um evento de listener “onmessage” ao worker:

if (typeof(w) == "undefined") {
    w = new Worker("demo_workers.js");
}

w.onmessage = function(event){
    document.getElementById("result").innerHTML = event.data;
};

Código de Exemplo completo

Já vimos o código do worker no arquivo .js. Abaixo está o código da página HTML que chama o worker e executa a função contadora na página:

<!DOCTYPE html>
<html>
<body>

<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>

<script>
var w;

function startWorker() {
    //criar o web worker
    if(typeof(Worker) !== "undefined") {
        if(typeof(w) == "undefined") {
            w = new Worker("demo_workers.js");
        }
        w.onmessage = function(event) {
            document.getElementById("result").innerHTML = event.data;
        };
    } else {
        document.getElementById("result").innerHTML = "Você não possui suporte ao Web Worker.";
    }
}

function stopWorker() {
    //finalizando e resetando o web worker
    w.terminate();
    w = undefined;
}
</script>

</body>
</html>

Limitações

Como citado no trecho acima, temos algumas limitações evidentes. O Web Worker não pode, por exemplo, acessar o DOM da sua página, ou fazer qualquer alteração no HTML Document.

Vantagens

A principal vantagem é que o Web Worker é assíncrono e não bloqueante. Ou seja, podemos processar algo que normalmente levaria muito tempo e que impediria a interação do usuário em nossa página por um tempo, sem que o usuário fique limitado de forma alguma.

Espero que tenham gostado e aprendido um pouco mais sobre como trabalhar de forma multi thread com javascript! 😉

Grande abraço!