Uma visão geral dos web workers

Grande parte do conteúdo deste curso até agora se concentrou em conceitos como considerações gerais de desempenho HTML, dicas de recursos, otimização de vários para melhorar o tempo de carregamento da página inicial e a capacidade de resposta ao usuário bem como recursos específicos com carregamento lento.

No entanto, há um aspecto do desempenho em relação ao JavaScript que ainda não foi abordado neste curso, que é o papel dos Web workers na melhoria capacidade de resposta de entrada, abordada neste módulo e no próximo.

JavaScript é frequentemente descrito como uma linguagem de sequência única. Na prática, refere-se à linha de execução principal, que é a única em que o navegador realiza a maior parte do trabalho exibido no navegador. Esse trabalho inclui tarefas envolvidas em itens como scripting, alguns tipos de trabalho de renderização, análise de HTML e CSS, e outros tipos de trabalho voltados ao usuário que impulsionam a experiência do usuário. Na verdade, navegadores usam outras linhas de execução para fazer um trabalho que você, o desenvolvedor, não geralmente têm acesso direto a linhas de execução de GPU, por exemplo.

Quando se trata de JavaScript, geralmente você está limitado a trabalhar em linha de execução principal, mas apenas por padrão. É possível registrar e usar linhas de execução adicionais em JavaScript. O recurso que permite o uso de várias linhas de execução O JavaScript é conhecido como API Web Workers.

Os web workers são úteis quando você tem trabalho computacionalmente caro que apenas não podem ser executados na linha de execução principal sem gerar tarefas longas que fazem a página sem resposta. Essas tarefas certamente podem afetar a interação do seu site com Next Paint (INP). Por isso, pode ser útil saber quando você tem trabalhos que podem ser totalmente fora da linha de execução principal. Isso pode ajudar a criar mais espaço para outras tarefas na linha de execução principal para que as interações do usuário sejam mais rápidas.

Este módulo e a demonstração subsequente com um caso de uso concreto abordam conceitos da Web trabalhadores A demonstração em si mostra como você pode usar um web worker para realizar o trabalho de ler metadados de imagem de um arquivo JPEG fora da linha de execução principal – e como você pode levar esses metadados de volta para a linha de execução principal para que o usuário possa vê-los.

Como um worker da Web é iniciado

Um worker da Web é registrado instanciando a classe Worker. Quando você Assim, você especifica onde o código do worker da Web está localizado, que o navegador carrega e, em seguida, cria um novo thread para. A linha de execução resultante costuma ser chamada uma linha de execução de worker.

const myWebWorker = new Worker('/js/my-web-worker.js');

No arquivo JavaScript do worker (my-web-worker.js, neste caso), é possível escreva um código que será executado em uma linha de execução de worker separada.

Limitações do web worker

Ao contrário do JavaScript que é executado na linha de execução principal, os web workers não têm acesso direto ao contexto window. e têm acesso limitado às APIs fornecidas. Web os workers estão sujeitos às seguintes restrições:

• Os web workers não podem acessar diretamente o DOM.
• Os web workers podem se comunicar com o contexto window por meio de uma mensagem pipeline, o que significa que um web worker pode acessar indiretamente o DOM de alguma forma.
• O escopo do worker da Web é self, em vez de window.
• O escopo do worker da Web tem acesso a primitivos JavaScript e construções, bem como APIs como fetch e um grande número de outras APIs.

Como os workers da Web se comunicam com o window

É possível que um worker da Web se comunique com o window da linha de execução principal contexto por meio de um pipeline de mensagens. Esse pipeline permite transportar dados da linha de execução principal e do web worker. Para enviar dados de um worker da Web ao linha de execução principal, você configura um evento message no contexto do worker da Web (self).

// my-web-worker.js
self.addEventListener("message", () => {
  // Sends a message of "Hellow, window!" from the web worker:
  self.postMessage("Hello, window!");
});

Em seguida, em um script no contexto window da linha de execução principal, é possível receber a da linha de execução do worker da Web usando outro evento message:

// scripts.js

// Creates the web worker:
const myWebWorker = new Worker('/js/my-web-worker.js');

// Adds an event listener on the web worker instance that listens for messages:
myWebWorker.addEventListener("message", ({ data }) => {
  // Echoes "Hello, window!" to the console from the worker.
  console.log(data);
});

O pipeline de mensagens do worker da Web é uma espécie de saída de emergência da Web do worker. Com ela, é possível enviar dados para o window do worker da Web que você pode usar para atualizar o DOM ou realizar outro trabalho que precise ser feito na linha de execução principal.

Teste seus conhecimentos

A seguir: um caso de uso concreto de funcionários da Web

No próximo módulo, vamos apresentar um caso de uso concreto de um web worker. demonstrados. Nesse módulo, um web worker é usado para buscar um arquivo JPEG em um determinado URL e lê os metadados Exif dele em um web worker. Esses dados são enviados de volta à linha de execução principal que será mostrada ao usuário.