11 KiB
Projeto de Extensão para Navegador Parte 3: Aprenda sobre Tarefas em Segundo Plano e Desempenho
Questionário Pré-Aula
Introdução
Nas duas últimas lições deste módulo, você aprendeu a criar um formulário e uma área de exibição para dados obtidos de uma API. Essa é uma maneira bastante comum de criar uma presença na web. Você até aprendeu a lidar com a obtenção de dados de forma assíncrona. Sua extensão para navegador está quase completa.
Resta gerenciar algumas tarefas em segundo plano, incluindo a atualização da cor do ícone da extensão. Este é um ótimo momento para falar sobre como o navegador gerencia esse tipo de tarefa. Vamos pensar nessas tarefas do navegador no contexto do desempenho dos seus recursos web enquanto você os desenvolve.
Noções Básicas de Desempenho na Web
"O desempenho de um site envolve duas coisas: quão rápido a página carrega e quão rápido o código nela é executado." -- Zack Grossbart
O tema de como tornar seus sites extremamente rápidos em todos os tipos de dispositivos, para todos os tipos de usuários, em todas as situações, é, sem surpresa, vasto. Aqui estão alguns pontos a serem considerados ao criar um projeto web padrão ou uma extensão para navegador.
A primeira coisa que você precisa fazer para garantir que seu site esteja funcionando de forma eficiente é coletar dados sobre seu desempenho. O primeiro lugar para fazer isso é nas ferramentas de desenvolvedor do seu navegador. No Edge, você pode selecionar o botão "Configurações e mais" (o ícone de três pontos no canto superior direito do navegador), depois navegar até Mais Ferramentas > Ferramentas do Desenvolvedor e abrir a aba de Desempenho. Você também pode usar os atalhos de teclado Ctrl + Shift + I no Windows ou Option + Command + I no Mac para abrir as ferramentas de desenvolvedor.
A aba de Desempenho contém uma ferramenta de Perfilação. Abra um site (experimente, por exemplo, https://www.microsoft.com) e clique no botão 'Gravar', depois atualize o site. Pare a gravação a qualquer momento, e você poderá ver as rotinas geradas para 'script', 'renderização' e 'pintura' do site:
✅ Visite a Documentação da Microsoft sobre o painel de Desempenho no Edge.
Dica: para obter uma leitura precisa do tempo de inicialização do seu site, limpe o cache do navegador.
Selecione elementos da linha do tempo do perfil para ampliar eventos que ocorrem enquanto sua página carrega.
Obtenha um instantâneo do desempenho da sua página selecionando uma parte da linha do tempo do perfil e olhando para o painel de resumo:
Verifique o painel de Log de Eventos para ver se algum evento demorou mais de 15 ms:
✅ Familiarize-se com seu perfilador! Abra as ferramentas de desenvolvedor neste site e veja se há gargalos. Qual é o recurso que carrega mais lentamente? E o mais rápido?
Verificações de Perfilação
De modo geral, existem algumas "áreas problemáticas" que todo desenvolvedor web deve observar ao criar um site para evitar surpresas desagradáveis na hora de implantar em produção.
Tamanhos de recursos: A web ficou mais "pesada" e, portanto, mais lenta nos últimos anos. Parte desse peso está relacionada ao uso de imagens.
✅ Consulte o Internet Archive para uma visão histórica do peso das páginas e mais.
Uma boa prática é garantir que suas imagens estejam otimizadas e sejam entregues no tamanho e na resolução corretos para seus usuários.
Percursos no DOM: O navegador precisa construir seu Modelo de Objeto de Documento (DOM) com base no código que você escreve, então é do interesse de um bom desempenho da página manter suas tags mínimas, usando e estilizando apenas o que a página precisa. Nesse sentido, CSS em excesso associado a uma página pode ser otimizado; estilos que precisam ser usados apenas em uma página não precisam ser incluídos na folha de estilo principal, por exemplo.
JavaScript: Todo desenvolvedor de JavaScript deve observar scripts que bloqueiam a renderização e que precisam ser carregados antes que o restante do DOM possa ser percorrido e pintado no navegador. Considere usar defer com seus scripts inline (como é feito no módulo Terrarium).
✅ Experimente alguns sites em um site de teste de velocidade para aprender mais sobre as verificações comuns feitas para determinar o desempenho do site.
Agora que você tem uma ideia de como o navegador renderiza os recursos que você envia para ele, vamos ver as últimas coisas que você precisa fazer para completar sua extensão:
Criar uma função para calcular a cor
Trabalhando em /src/index.js, adicione uma função chamada calculateColor() após a série de variáveis const que você definiu para acessar o DOM:
function calculateColor(value) {
let co2Scale = [0, 150, 600, 750, 800];
let colors = ['#2AA364', '#F5EB4D', '#9E4229', '#381D02', '#381D02'];
let closestNum = co2Scale.sort((a, b) => {
return Math.abs(a - value) - Math.abs(b - value);
})[0];
console.log(value + ' is closest to ' + closestNum);
let num = (element) => element > closestNum;
let scaleIndex = co2Scale.findIndex(num);
let closestColor = colors[scaleIndex];
console.log(scaleIndex, closestColor);
chrome.runtime.sendMessage({ action: 'updateIcon', value: { color: closestColor } });
}
O que está acontecendo aqui? Você passa um valor (a intensidade de carbono) da chamada de API que você completou na última lição e, em seguida, calcula quão próximo esse valor está do índice apresentado no array de cores. Depois, você envia esse valor de cor mais próximo para o runtime do Chrome.
O chrome.runtime possui uma API que lida com todos os tipos de tarefas em segundo plano, e sua extensão está aproveitando isso:
"Use a API chrome.runtime para recuperar a página de segundo plano, retornar detalhes sobre o manifesto e ouvir e responder a eventos no ciclo de vida do aplicativo ou extensão. Você também pode usar essa API para converter o caminho relativo de URLs em URLs totalmente qualificados."
✅ Se você está desenvolvendo esta extensão para o Edge, pode se surpreender ao descobrir que está usando uma API do Chrome. As versões mais recentes do navegador Edge são baseadas no mecanismo do navegador Chromium, então você pode aproveitar essas ferramentas.
Nota: se você quiser perfilar uma extensão para navegador, abra as ferramentas de desenvolvedor dentro da própria extensão, pois ela é uma instância separada do navegador.
Definir uma cor padrão para o ícone
Agora, na função init(), defina o ícone como um verde genérico para começar, chamando novamente a ação updateIcon do Chrome:
chrome.runtime.sendMessage({
action: 'updateIcon',
value: {
color: 'green',
},
});
Chamar a função, executar a chamada
Em seguida, chame a função que você acabou de criar adicionando-a à promessa retornada pela API C02Signal:
//let CO2...
calculateColor(CO2);
E, finalmente, em /dist/background.js, adicione o listener para essas chamadas de ação em segundo plano:
chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
if (msg.action === 'updateIcon') {
chrome.browserAction.setIcon({ imageData: drawIcon(msg.value) });
}
});
//borrowed from energy lollipop extension, nice feature!
function drawIcon(value) {
let canvas = document.createElement('canvas');
let context = canvas.getContext('2d');
context.beginPath();
context.fillStyle = value.color;
context.arc(100, 100, 50, 0, 2 * Math.PI);
context.fill();
return context.getImageData(50, 50, 100, 100);
}
Neste código, você está adicionando um listener para quaisquer mensagens que chegam ao gerenciador de tarefas em segundo plano. Se for chamado 'updateIcon', o próximo código será executado para desenhar um ícone da cor apropriada usando a API Canvas.
✅ Você aprenderá mais sobre a API Canvas nas lições do Jogo Espacial.
Agora, reconstrua sua extensão (npm run build), atualize e inicie sua extensão, e observe a mudança de cor. É um bom momento para fazer uma pausa ou lavar a louça? Agora você sabe!
Parabéns, você criou uma extensão útil para navegador e aprendeu mais sobre como o navegador funciona e como perfilar seu desempenho.
🚀 Desafio
Investigue alguns sites de código aberto que existem há muito tempo e, com base no histórico do GitHub, veja se consegue determinar como eles foram otimizados ao longo dos anos para desempenho, se é que foram. Qual é o ponto problemático mais comum?
Questionário Pós-Aula
Revisão e Autoestudo
Considere se inscrever em um boletim informativo sobre desempenho.
Investigue algumas das maneiras como os navegadores avaliam o desempenho da web, explorando as abas de desempenho em suas ferramentas de desenvolvedor. Você encontrou alguma diferença significativa?
Tarefa
Analise um site para desempenho
Aviso Legal:
Este documento foi traduzido utilizando o serviço de tradução por IA Co-op Translator. Embora nos esforcemos para garantir a precisão, esteja ciente de que traduções automatizadas podem conter erros ou imprecisões. O documento original em seu idioma nativo deve ser considerado a fonte autoritativa. Para informações críticas, recomenda-se a tradução profissional realizada por humanos. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações equivocadas decorrentes do uso desta tradução.