Uma API JavaScript do Introdução ao Web Workers

Trabalhadores da Web é uma API JavaScript que permite que você executar scripts em um thread separado do principal. Pode ser útil quando você não quer nenhum impedimento na execução dos scripts principais, devido a scripts em segundo plano..

A Web Workers API é suportado em quase todos os navegadores, Para informações mais detalhadas, dê uma olhada nos documentos CanIUse. Antes de entrar no código, vamos ver alguns cenários onde você pode querer usar esta API para que você possa ter uma idéia do que eu quis dizer com scripts de plano de fundo.

Casos de uso

Digamos que há um script que busca e processa um arquivo. Se um arquivo é consideravelmente grande, vai demorar muito para ser processado! O que pode atrasar outros scripts que foram invocados depois de serem executados.

No entanto, se o processamento de arquivos é movido para um thread de segundo plano, Conhecido como segmento de trabalho, outros eventos não serão bloqueados até que o anterior termine.

O roteiro executado em um thread de trabalho em segundo plano é conhecido como o roteiro do trabalhador ou apenas o trabalhador.

Por outro exemplo, imagine que há um forma grande, organizada em abas. É roteirizado de forma a atualizar os controles em uma guia afeta alguns dos controles em outros.

Se a atualização das outras guias demorar algum tempo, o usuário não pode usar continuamente a guia atual sem que seus eventos sejam colocados em espera. Isso pode congelar a interface do usuário, para desânimo do usuário.

Como um usuário não verá as outras guias enquanto preenche uma atual, você pode atualizar os controles das outras guias em um thread de segundo plano. Dessa forma, o usuário pode continuar usando a guia atual que está preenchendo, sem que nenhum de seus scripts seja bloqueado pelo processo de atualização de controles em outras guias.

Da mesma forma, se você encontrar um cenário em que um script pode bloquear um usuário de usar a interface do usuário até que sua execução seja feita, você pode considerar movê-lo para um thread de trabalho, para que ele possa ser executado em segundo plano.

Escopos e tipos de trabalhadores

A Web Workers API é provavelmente uma das APIs mais simples para se trabalhar. Tem métodos bastante simples para criar encadeamentos de trabalho e comunicar com eles a partir do script principal.

O escopo global de um segmento de trabalho está em um contexto diferente do segmento principal. Você não pode acessar os métodos e propriedades de janela objeto tal como alerta() dentro de um segmento de trabalho. Você também não é possível alterar o DOM diretamente de um segmento de trabalho.

No entanto, você posso usar muitas APIs que estão sob janela, por exemplo Promessa e Buscar, no seu thread de trabalho (veja a lista completa).

Você também pode ter encadeamentos de trabalho aninhados: threads de trabalho criados a partir de outro segmento de trabalho. Um trabalhador criado por outro é chamado de subempregado.

Há também muitos tipos de trabalhadores. Os dois principais são trabalhadores dedicados e compartilhados.

Trabalhadores dedicados pertencem ao mesmo contexto de navegação que seu segmento principal pertence. Trabalhadores compartilhados, no entanto, são presente em um contexto de navegação diferente (por exemplo, em um iframe) do script principal. Em ambos os casos, o roteiro principal e os trabalhadores tem que estar no mesmo domínio.

O exemplo neste tutorial será sobre trabalhador dedicado, qual é o tipo mais comum.

Métodos de API

Veja o diagrama abaixo para uma visão rápida de todos os principais métodos que constituem a Web Workers API.

o Trabalhador() construtor cria um thread de trabalho dedicado e retorna seu objeto de referência. Então, usamos esse objeto para nos comunicarmos com esse trabalhador específico.

o postar mensagem() método é usado nos scripts principal e de trabalho para enviar dados uns aos outros. Os dados enviados são então recebidos no outro lado pelo onmessage manipulador de eventos.

o terminar () método encerra um thread de trabalho do script principal. Esta terminação é imediato: qualquer execução de script atual e scripts pendentes serão cancelados. o perto() método faz a mesma coisa, mas é chamado pelo segmento de trabalho fechando-se.

Código de exemplo

Agora, vamos ver um código de exemplo. o index.html página mantém o roteiro principal dentro de um

Nós começamos com o criação do thread de trabalho a partir do script principal.

  w = new Worker ('worker.js'); 
 o Trabalhador() construtor pega o URL do arquivo de trabalho como seu argumento.
 Em seguida, adicionamos um manipulador de eventos para o onmessage evento da instância do trabalhador recém-criado para receber dados dele. o dados propriedade do e evento irá conter os dados recebidos.
  w = new Worker ('worker.js'); w.onmessage = (e) => console.log ('Recebido do trabalhador: $ e.data');  
 Agora usamos postar mensagem() para enviar alguns dados para o segmento de trabalho no clique de um botão. o postar mensagem() método pode levar dois argumentos. O primeiro pode ser de qualquer tipo (string, array…). São os dados a ser enviado para o segmento de trabalho (ou para o script principal, quando o método está presente no thread de trabalho).
 O segundo parâmetro opcional é uma matriz de objetos que pode ser usado pelos threads de trabalho (mas não pelo script principal, ou vice-versa). Esses tipos de objetos são chamados Transferível objetos.
  document.querySelector ('button'). onclick = () => w.postMessage ('john');  
 Estou apenas enviando um valor de string para o segmento de trabalho.
 No thread de trabalho, precisamos adicionar um onmessage manipulador de eventos que receberá os dados enviado para ele pelo script principal no clique do botão. Dentro do manipulador, nós concatenar a string recebida com outra e envie o resultado de volta para o script principal.
  console.info ('trabalhador criado'); onmessage = (e) => postMessage ('Hi $ e.data');  
 Ao contrário do script principal, onde tivemos que usar o W objeto de referência para consulte o segmento de trabalho específico em que o script, em seguida, usa o onmessage e postar mensagem métodos, há não há necessidade de um objeto de referência no thread de trabalho para apontar para o segmento principal.
 O código funciona da seguinte maneira. Quando o navegador carrega index.html, o console mostrará o "trabalhador criado" mensagem assim que o trabalhador() construtor é executado no thread principal, criando um novo trabalhador.
 Quando você clica no botão na página, você recebe o "Recebido do trabalhador: Hi john" mensagem no console, que é a string que foi concatenado no thread de trabalho com os dados enviados para ele, e então foi enviado de volta para o script principal.