leestott
b5747037fb
|
2 months ago | |
|---|---|---|
| .. | ||
| README.md | 2 months ago | |
| assignment.md | 3 months ago | |
README.md
Projeto de Extensão de Navegador Parte 3: Aprender sobre Tarefas em Segundo Plano e Desempenho
Questionário Pré-Aula
Introdução
Nas duas últimas lições deste módulo, aprendeste a construir um formulário e uma área de exibição para dados obtidos de uma API. É uma forma bastante comum de criar uma presença na web. Até aprendeste a lidar com a obtenção de dados de forma assíncrona. A tua extensão de navegador está quase completa.
Resta gerir algumas tarefas em segundo plano, incluindo atualizar a cor do ícone da extensão. Por isso, este é um ótimo momento para falar sobre como o navegador gere este tipo de tarefa. Vamos pensar nestas tarefas do navegador no contexto do desempenho dos teus recursos web enquanto os desenvolves.
Noções Básicas de Desempenho Web
"O desempenho de um site é sobre 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 os teus sites incrivelmente rápidos em todos os tipos de dispositivos, para todos os tipos de utilizadores, em todas as situações, é, sem surpresa, vasto. Aqui estão alguns pontos a ter em mente enquanto desenvolves um projeto web padrão ou uma extensão de navegador.
A primeira coisa que precisas de fazer para garantir que o teu site está a funcionar de forma eficiente é recolher dados sobre o seu desempenho. O primeiro lugar para fazer isso é nas ferramentas de desenvolvedor do teu navegador web. No Edge, podes selecionar o botão "Definições e mais" (o ícone de três pontos no canto superior direito do navegador), depois navegar para Mais Ferramentas > Ferramentas de Desenvolvedor e abrir o separador Desempenho. Também podes usar os atalhos de teclado Ctrl + Shift + I no Windows ou Option + Command + I no Mac para abrir as ferramentas de desenvolvedor.
O separador Desempenho contém uma ferramenta de Perfilagem. Abre um site (experimenta, por exemplo, https://www.microsoft.com) e clica no botão 'Gravar', depois atualiza o site. Para a gravação a qualquer momento, e poderás ver as rotinas que são geradas para 'script', 'renderizar' e 'pintar' o site:
✅ Visita a Documentação da Microsoft sobre o painel de Desempenho no Edge.
Dica: para obter uma leitura precisa do tempo de inicialização do teu site, limpa a cache do navegador.
Seleciona elementos da linha do tempo do perfil para ampliar os eventos que ocorrem enquanto a tua página carrega.
Obtém uma visão geral do desempenho da tua página ao selecionar uma parte da linha do tempo do perfil e olhar para o painel de resumo:
Verifica o painel de Registo de Eventos para ver se algum evento demorou mais de 15 ms:
✅ Familiariza-te com o teu profiler! Abre as ferramentas de desenvolvedor neste site e vê se há algum gargalo. Qual é o recurso que demora mais a carregar? E o mais rápido?
Verificações de Perfilagem
De forma geral, há algumas "áreas problemáticas" que todo desenvolvedor web deve observar ao construir um site para evitar surpresas desagradáveis quando for hora de implementar em produção.
Tamanhos de recursos: A web ficou mais 'pesada' e, portanto, mais lenta, nos últimos anos. Parte desse peso tem a ver com o uso de imagens.
✅ Explora o Internet Archive para uma visão histórica do peso das páginas e mais.
Uma boa prática é garantir que as tuas imagens estão otimizadas e entregues no tamanho e resolução certos para os teus utilizadores.
Percursos no DOM: O navegador precisa construir o seu Modelo de Objeto de Documento (DOM) com base no código que escreves, por isso é do interesse de um bom desempenho da página manter as tags mínimas, usando e estilizando apenas o que a página necessita. Neste ponto, CSS em excesso associado a uma página pode ser otimizado; estilos que precisam ser usados apenas numa 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. Considera usar defer com os teus scripts inline (como é feito no módulo Terrarium).
✅ Experimenta alguns sites num site de teste de velocidade para aprender mais sobre as verificações comuns feitas para determinar o desempenho de um site.
Agora que tens uma ideia de como o navegador renderiza os recursos que envias para ele, vamos ver as últimas coisas que precisas fazer para completar a tua extensão:
Criar uma função para calcular a cor
Trabalhando em /src/index.js, adiciona uma função chamada calculateColor() após a série de variáveis const que definiste para obter acesso ao 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á a acontecer aqui? Passas um valor (a intensidade de carbono) da chamada à API que completaste na última lição e, em seguida, calculas quão próximo o valor está do índice apresentado no array de cores. Depois, envias esse valor de cor mais próximo para o runtime do Chrome.
O chrome.runtime tem uma API que lida com todos os tipos de tarefas em segundo plano, e a tua extensão está a aproveitar isso:
"Usa a API chrome.runtime para recuperar a página de fundo, retornar detalhes sobre o manifesto e ouvir e responder a eventos no ciclo de vida da aplicação ou extensão. Também podes usar esta API para converter o caminho relativo de URLs em URLs totalmente qualificadas."
✅ Se estás a desenvolver esta extensão de navegador para o Edge, pode surpreender-te que estás a usar uma API do Chrome. As versões mais recentes do navegador Edge funcionam no motor de navegador Chromium, por isso podes aproveitar estas ferramentas.
Nota: se quiseres fazer a perfilagem de uma extensão de navegador, lança as ferramentas de desenvolvedor a partir 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(), define o ícone para ser genericamente verde no início, 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, chama a função que acabaste de criar ao adicioná-la à promessa retornada pela API C02Signal:
//let CO2...
calculateColor(CO2);
E, finalmente, em /dist/background.js, adiciona o listener para estas chamadas de ação em segundo plano:
chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
if (msg.action === 'updateIcon') {
chrome.action.setIcon({ imageData: drawIcon(msg.value) });
}
});
//borrowed from energy lollipop extension, nice feature!
function drawIcon(value) {
let canvas = new OffscreenCanvas(200, 200);
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, estás a adicionar um listener para quaisquer mensagens que chegam ao gestor de tarefas em segundo plano. Se for chamado 'updateIcon', então o próximo código é executado para desenhar um ícone da cor apropriada usando a API Canvas.
✅ Vais aprender mais sobre a API Canvas nas lições do Jogo Espacial.
Agora, reconstrói a tua extensão (npm run build), atualiza e lança a tua extensão, e observa a mudança de cor. É um bom momento para fazer uma tarefa ou lavar a loiça? Agora já sabes!
Parabéns, construíste uma extensão de navegador útil e aprendeste mais sobre como o navegador funciona e como fazer a perfilagem do seu desempenho.
🚀 Desafio
Investiga alguns sites de código aberto que existem há muito tempo e, com base no histórico do GitHub deles, vê se consegues determinar como 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 & Autoestudo
Considera inscrever-te numa newsletter de desempenho
Investiga algumas das formas como os navegadores avaliam o desempenho web ao explorar os separadores de desempenho nas suas ferramentas web. Encontras alguma diferença significativa?
Tarefa
Analisa um site para desempenho
Aviso:
Este documento foi traduzido utilizando o serviço de tradução por IA Co-op Translator. Embora nos esforcemos pela precisão, esteja ciente de que traduções automáticas podem conter erros ou imprecisões. O documento original na sua língua nativa deve ser considerado a fonte autoritária. Para informações críticas, recomenda-se uma tradução profissional realizada por humanos. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações incorretas decorrentes do uso desta tradução.