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 dewindow
. - 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
Em qual linha de execução um web worker é executado?
O que um worker da Web pode acessar?
window
,
incluindo fetch
.
window
, mas apenas indiretamente.Como um web worker pode acessar o contexto de "window"?
postMessage
método no contexto do web worker (self
).
window
.
window
de forma alguma.
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.