Close Menu
Código Simples .NETCódigo Simples .NET
    Facebook X (Twitter) Instagram
    Trending
    • NewSQL em 2025: O Estado Atual, Tendências e o Futuro dos Bancos de Dados Relacionais Escaláveis
    • 12 Regras Essenciais para Reduzir a Latência de Aplicações
    • Cache Hit Ratio: Como uma Simples Métrica Pode Revolucionar sua Arquitetura
    • Como a Uber calcula o tempo estimado de chegada
    • 30 APIs Gratuitas para desenvolvedores
    • Por que escalar escrita é tão mais difícil do que escalar leitura?
    • MongoDB Analyzer para .NET: Visualize e otimize suas consultas de forma simples
    • Cardinalidade: O Conceito que Transforma o Desempenho de Bancos de Dados SQL e NoSQL
    Facebook X (Twitter) Instagram
    Código Simples .NETCódigo Simples .NET
    Código Simples .NETCódigo Simples .NET
    Home»Front-End»Introdução sobre HTML5 Web Workers e multi threads com javascript

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

    Jhonathan SoaresBy Jhonathan Soares2 de outubro de 20173 Mins Read Front-End
    Share
    Facebook Twitter LinkedIn WhatsApp Copy Link

    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!

     

     

    Share. Facebook Twitter LinkedIn Telegram WhatsApp Copy Link
    Jhonathan Soares
    • Website
    • Facebook
    • X (Twitter)
    • LinkedIn

    Criador do blog Código Simples e com mais 15 anos de experiência em TI, com títulos de MVP Microsoft na área de Visual Studio Development, Neo4j Top 50 Certificate, Scrum Master e MongoDB Evangelist.

    Posts Relacionados

    Happy Hour com Dados #17 – Azure vs AWS vs GCP

    Front-End 26 de maio de 20211 Min Read

    Blazor .NET – CRUD com MongoDB

    C# Front-End NoSql 2 de janeiro de 20195 Mins Read

    Introdução ao Blazor, o SPA da Microsoft

    C# Front-End 29 de dezembro de 20185 Mins Read
    Newsletter

    Digite seu endereço de e-mail para receber notificações de novas publicações por e-mail.

    Junte-se a 25mil outros assinantes
    Posts recentes
    • NewSQL em 2025: O Estado Atual, Tendências e o Futuro dos Bancos de Dados Relacionais Escaláveis
    • 12 Regras Essenciais para Reduzir a Latência de Aplicações
    • Cache Hit Ratio: Como uma Simples Métrica Pode Revolucionar sua Arquitetura
    • Como a Uber calcula o tempo estimado de chegada
    • 30 APIs Gratuitas para desenvolvedores
    Categorias
    • Arquitetura (14)
      • Testes (2)
    • Asp.net (120)
      • C# (89)
      • Mvc (13)
    • Banco de dados (90)
      • NoSql (58)
      • Sql (38)
    • Boas práticas (29)
      • Gestão & Produtividade (1)
      • Metodologias Ágeis (6)
    • Cursos (52)
    • Dicas (105)
    • Front-End (92)
    • IA (1)
    • Linux (6)
    • NodeJS (4)
    • Post do Leitor (9)
    • Python (5)
    • Seo (12)
    • Tecnologia (30)
      • ITIL (1)
      • Padrões de Projeto (4)
    • Testes (2)

    VEJA TAMBÉM

    Cursos
    12 de fevereiro de 20166 Mins Read

    1000 livros gratuitos sobre programação!

    Olha que dica bacana! A pagina só com livros sobre programação é mantida no GitHub…

    30 APIs Gratuitas para desenvolvedores

    Facebook X (Twitter) Instagram LinkedIn

    Type above and press Enter to search. Press Esc to cancel.

    Vá para versão mobile