vamos falar nesse vídeo sobre JavaScript web workers foi um pedido de alguém em algum comentário de de um vídeo que eu fiz falou assim cara você poderia explicar um pouquinho sobre o webworker E aí a gente já fez aqui em live algumas coisinhas já experimentamos mas a gente vai agora resumir e colocar para vocês e na Live a gente até discuti o cara qual que é o motivo do do webworker e tudo mais bom vamos primeiro entender que o JavaScript ou lembrar que o JavaScript ele é single thread que que é uma thread uma trad
é um processamento Ele só faz um processamento por vez então ele vai pegar um arquivo ele vai linha a linha se tiver alguma coisa bloqueante ali ele vai bloquear vai esperar terminar e depois ele vai seguir então só tem um processo rodando que é essa Main thread então todo JavaScript é numa página então ele é executado linha a linha bem tranquilo um webworker ele vem para abrir um processo extra ou seja uma trad nova é um processo que ele vai rodar em background ele não vai atrapalhar a Main thread então a gente consegue ter no
caso dois processos rodando no mínimo então é uma trad separada que vai permitir outros processos sendo executados em segundo plano então a parte boa é que ele vai liberar o espaço da Mad vai deixar Mad limpa ali para você fazer outras coisas ele vai executar então outras tarefas em segundo plano em paralelo parte ruim é que não existe manipulação da Dom logo ele tem umas limitações você eu eu vi o webworker já em plugins de Chrome por exemplo que pode ficar executando em background algum colega falou ali na na hora da Live no chat falou
ali cara talvez alguma coisa de processamento de vídeo enfim você pode abrir um processo Extra mas você não consegue fazer toda a manipulação de Dom Então como que funciona pra gente poder fazer um webworker funcionar em algum projeto nosso tá bom Aqui eu deixei algumas anotações a gente vai seguir as anotações Então a gente vai precisar de um arquivo que podemos chamar ele de web de worker JS que que eu fiz aqui Criei um index HTML simples deixei um worker JS aqui funcionando tá vou deixar o light server rodando porque o light server é o
carinha responsável por deixar a minha aplicação rodando ali tá bom então eu tenho o arquivo worker vamos voltar para cá no worker é onde eu recebo vamos vamos primeiro no arquivo principal no arquivo principal eu vou instanciar um novo worker ou seja eu vou iniciar novo worker falando da onde que eu vou chamar esse worker esse trabalhador o worker é trabalhador né então é o processo Extra que eu vou est criando instanciando ele quando eu solto uma post message post message seja nessa linha aqui quando eu tô soltando um post message ele sai da minha
Main thread e vai buscar lá no worker se o self dele ou seja se ele mesmo self significa eu mesmo se ele mesmo se essa Instância enfim Ela tá aqui ó ouvindo on significa ouvindo Ó tô esperando algum disparo de mensagem viu tô esperando quando chegar eu vou executar essa função aqui tudo bem E posso informar isso aqui então Vamos por partes Vamos só pegar esse cara tá bom esse aqui a gente coloca aqui eu quero tirar por enquanto isso daqui para que a gente possa ver parte a parte Ok e vamos pegar esse cara
aqui esses dois aqui tá bom ó esses dois vamos colocar aqui no no Script principal aqui tá bom show então se eu voltar aqui o que que eu tenho eu tenho do Main indo para o worker que que significou isso daqui vamos lá significou que ele instanci um worker aqui V até diminuir essa linha ó ou melhor fazer isso aqui ele instanci o worker e ele enviou uma mensagem post ele enviou para cá agora a gente precisa criar um cenário para entender Por que que é interessante a gente ter um worker Então vamos criar um
cenário que eu já deixei também anotadinho para nós ganharmos tempo aqui o cenário é o seguinte nós vamos ter algum conteúdo de html tá bem esse conteúdo de html ele vai ser o quê um botão que vai fazer um loop ou seja ele vai fazer um Hold ele vai segurar a Main thread num loop e um outro que vai só soltar um AL Aler um texto enfim um alerta alguma coisa assim tá Change é ruim mudar deixa assim mudar segurar pronto vamos deixar em português tá aqui é o loop aqui é um troca texto ou
adiciona texto adicionar texto pronto vai ficar interessante e aqui é o conteúdo pronto conteúdo então o que que a gente tá fazendo aqui Eu quero que quando clicar no segurar ali segurar no Clique dele eu quero que ele trave a minha Main trad é isso que eu quero que ele faça e quando eu clicar no mudar no on Click dele eu quero que ele apenas coloque ali no conteúdo Inner HTML ele coloca um texto Alô é novo texto tá bom novo texto para segurar eu também deixei um carinha bem específico aqui ó bem específico tá
porque a gente testou aqui em live pessoal só para vocês que estão assistindo no YouTube a gente testou aqui em live vários números para poder não segurar nem muito tempo e nem pouco tempo então a gente chegou no número desse número aí que eu não sei que número que é esse digam nos comentários que número é esse esse número aqui tá se bem que no JavaScript a gente até poderia fazer assim né tr tr 3 3 aí ó para facilitar aí o a visão do número esse número aí bom então o que que ele está
fazendo antes dele soltar esse cara aqui né esse finalizou o loop aqui eu vou deixar como só como um console log console log finalizou o loop e aqui ele vai mudar o texto Então vamos lá o que a gente tá fazendo aqui é o seguinte quando eu clicar aqui adiconar porque o analfabetismo bateu forte aqui ó adicionar ó quando eu colocar aqui adicionar que que ele vai fazer ele vai adicionar o novo texto porém se eu iniciar o loop e clicar em eu não consigo Então isso aconteceu muito rápido aqui eu não sei se você
percebeu ó vou atualizar tudo de novo deixa sair essa mensagem aqui ó cliquei no loop e adicionar parou um pouquinho finalizou o loop depois ele adicionou então ele dá uma travadinha na minha Main thread OK tá travada a minha Main thread então o que que eu vou querer fazer eu vou querer que esse loop ele venha para cá tá bom esse loop ele venha para cá ao invés de um console log aqui a gente vai colocar o self post message finalizou o loop aqui a gente vai receber no worker o on message Tá bom uma
mensagem aqui message Aqui ó pode ser dessa forma aqui eu prefiro deixar assim ó fica mais claro message então o que que eu quero ver aqui eu quero que quando terminar o loop eu veja aqui no meu na minha Main thread que terminou o loop tudo bem E esse cara aqui a gente vai deixar ele aqui tá bom ou seja iniciar o loop iniciar o loop então aqui que que ele vai aparecer primeiro no console log iniciou o loop ou iniciar loop né iniciou vou deixar assim o loop iniciou Tá bom então ele vai aparecer
primeiro isso daqui quando eu colocar segurar ele vai iniciar o loop e você vai perceber que quando eu clicar no mudar automaticamente ele já vai mudar por o worker vai estar trabalhando no loop Enquanto aqui a minha Main thread tá livre vamos ver essa é a teoria agora vamos ver na prática que que eu errei aqui on message worker worker on message tá errado tá errado é isso aqui tá aqui eu peguei o carinha que controla aqui para mim a inteligência artificial não tão inteligente assim bom Teoricamente é isso então Antes quando eu cliquei em
loop e em adicionar o texto ele travou minha Main thread e depois apareceu o texto adicionado agora eu vou fazer a mesma coisa clicar em loop e adicionar ó loop adicionei foi imediato e depois finalizou o loop sacou Então vamos fazer de novo vamos esperar um pouquinho né para ele sair essa tela loop adicionei adicionou e já finalizou o loop então ficou um processo paralelo ao processo principal Essa é essa Cadinha do worker Eu quero ler uma coisinha com vocês aqui que eu acabei abrindo Achei bem legal a gente tem no mdn explicando né o
worker Então o worker a apepi da web worker ele vai representar representar uma tarefa em background uma tarefa em segundo plano que vai poder ser facilmente criada e emitir mensagens como a gente emitiu mensagens qual parte foi a emissão de mensagem a emissão de mensagem foi esse post message eu emti emiti uma mensagem lá no worker Ele está esperando ouvindo ele está só esperando chegar uma mensagem aqui quando chegou a mensagem ele executou toda uma tarefa aqui show então aqui ele fala ó a gente cria o worker através do Construtor ou seja isso aqui criamos
o worker beleza através do Construtor E aí ele vai tá executando lá inclusive que ele fala também que ele pode gerar outros workers então a gente pode ter outras trads executando a partir lá do worker também legal e a gente só precisa perceber que a gente não tem todos os tipos de funcionalidades que a gente teria na Don a gente não tem no worker e aqui ele fala que a gente pode usar um xhtml request né dá para usar algumas coisinhas mas não é tudo e aqui Claro nesse documento que a gente vai deixar o
link para vocês mdn né mdn É simples né mdn jav script worker É só colocar isso daqui no primeiro link o worker já vai aparecer essa página que tá aparecendo Beleza deixa seus comentários se se esse vídeo fez um sentido para você te vejo numa próxima valeu [Música]
