Para passar no quiz, você deve responder corretamente pelo menos 18 das 20 perguntas abaixo.
Qual é a principal diferença entre real performance e perceived performance em desenvolvimento web?
O desempenho real foca no número de requisições HTTP feitas pelo navegador, enquanto o desempenho percebido é baseado na velocidade de renderização do CSS. O desempenho real é a rapidez com que o conteúdo é carregado, enquanto o desempenho percebido é a rapidez com que os usuários acreditam que a página carrega. O desempenho real é apenas sobre os tempos de carregamento, enquanto o desempenho percebido está relacionado a elementos visuais como animações e indicadores de carregamento. O desempenho real inclui apenas os tempos de processamento do lado do servidor, enquanto o desempenho percebido é inteiramente do lado do cliente.
Qual métrica indica melhor a rapidez com que o conteúdo aparece em uma página web?
Primeira Pintura com Conteúdo (FCP) Última Pintura com Conteúdo (LCP) Tempo de Carregamento da Página (PLT) Tempo para Interatividade (TTI)
Qual das seguintes opções NÃO é uma forma de reduzir os tempos de carregamento da página?
Otimização de Ativos de Mídia. Usando apenas arquivos JPEG. Aproveitando o Cache do Navegador. Minificando e comprimindo arquivos.
O que é "time to usable"?
É o intervalo desde quando um usuário solicita uma página até quando ele pode interagir com os formulários na página. Este é o tempo que leva para todas as animações CSS e JavaScript carregarem na tela. É o intervalo desde quando um usuário solicita uma página até quando ele pode interagir significativamente com ela. É o tempo que leva para todas as imagens e animações ficarem disponíveis e utilizáveis.
O que o First Contentful Paint (FCP) mede?
O tempo necessário para que todas as folhas de estilo sejam totalmente carregadas e aplicadas. O tempo total de carregamento de todos os arquivos JavaScript na página. O tempo que leva para o primeiro trecho de texto ou imagem ser renderizado. O atraso antes que um usuário possa interagir com quaisquer elementos na página.
Qual dos seguintes NÃO é uma ferramenta de medição de desempenho comumente usada?
Lighthouse WebPageTest WebMeasure Chrome DevTools
Para que servem as Performance Web APIs?
Ele permite que os desenvolvedores acompanhem com que eficiência uma página da web carrega e responde diretamente do código. É usado para acelerar automaticamente o desempenho de uma página web. Ele fornece uma tabela detalhada de métricas de desempenho para o usuário. É usado para medir o desempenho apenas para animações CSS.
Qual estratégia pode melhorar efetivamente a percepção de desempenho?
Carregando estilos CSS por último para priorizar a renderização do conteúdo. Exibindo um esqueleto de carregamento enquanto o conteúdo está sendo buscado. Pré-carregando todos os scripts para garantir que eles estejam prontos quando necessários. Usando imagens grandes para melhorar a qualidade visual geral.
Qual dos seguintes se refere ao tempo que uma requisição leva para viajar entre o navegador e o servidor?
CDN latência INP renderização
Como a otimização de CSS impacta o desempenho da página?
Ele reduz o tamanho total do arquivo das imagens. Ele impede que o navegador execute JavaScript desnecessário. Ele elimina a necessidade de lazy loading de imagens. Ele acelera a análise do HTML.
Qual das opções a seguir mostra por quanto tempo a thread principal fica bloqueada por tarefas pesadas em JavaScript?
Taxa de rejeição WebPageTest Tempo Total de Bloqueio Ordem de origem
Ao medir Interaction to Next Paint (INP), o que está sendo avaliado?
O atraso entre a interação do usuário e a capacidade do navegador de registrar a próxima entrada do usuário. O intervalo entre a execução do JavaScript e o navegador atualizar o conteúdo da página. O tempo que a página leva para carregar completamente todos os estilos e imagens após uma interação do usuário. O tempo entre a interação do usuário e o navegador respondendo ao renderizar o próximo frame.
Qual das seguintes APIs fornece timestamps de alta precisão (em milissegundos) para medir quanto tempo diferentes partes do seu site levam para carregar?
performance.next()performance.delay()performance.previous()performance.now()
Qual das seguintes APIs fornece uma análise detalhada de cada etapa do carregamento da página desde a consulta DNS até DOMContentLoaded?
API de Medição de Desempenho Executar Timing API API de Permissão de Tempo API de Texto de Performance
Qual dos seguintes escuta eventos de desempenho como layout shifts, long tasks e user interactions?
const observer = new PermitObserver((list) => {
list.getEntries().forEach((entry) => {
console.log(Long task detected: ${entry.duration}ms);
});
});
observer.observe({ type: "longtask", buffered: true });const observer = new PermitObserve((list) => {
list.getEntries().forEach((entry) => {
console.log(Long task detected: ${entry.duration}ms);
});
});
observer.observe({ type: "longtask", buffered: true });const observer = new PerformanceObserver((list) => {
list.getEntries().forEach((entry) => {
console.log(Long task detected: ${entry.duration}ms);
});
});
observer.observe({ type: "longtask", buffered: true });const observer = new PerformObserver((list) => {
list.getEntries().forEach((entry) => {
console.log(Long task detected: ${entry.duration}ms);
});
});
observer.observe({ type: "longtask", buffered: true });
Como o carregamento preguiçoso de imagens melhora o desempenho da página?
Ele pré-carrega imagens para evitar quaisquer atrasos no carregamento. Ele reduz o tamanho dos arquivos de imagem para acelerar o carregamento. Ele atrasa o carregamento de imagens não essenciais até que elas estejam visíveis. Ele garante que todas as imagens carreguem imediatamente para uma melhor experiência do usuário.
O que é code splitting?
Isso envolve dividir seu código JavaScript em módulos que executam tarefas críticas e não críticas. Isso envolve dividir seu código React em módulos que executam apenas tarefas críticas Isso envolve dividir seu código HTML em módulos que executam apenas tarefas não críticas. Isso envolve dividir seu código CSS em módulos que executam tarefas críticas e não críticas.
Qual das seguintes é a maneira correta de fazer lazy load em uma imagem?
<img src="placeholder.jpg" lazy="loading"><img src="placeholder.jpg" load="lazy"><img src="placeholder.jpg" lazy="load"><img src="placeholder.jpg" loading="lazy">
Qual das seguintes opções NÃO é uma forma de melhorar o INP?
Adiar ou carregar preguiçosamente ativos pesados. Reduzindo o trabalho da thread principal dividindo tarefas longas de JavaScript. Otimizando manipuladores de eventos. Usando apenas imagens PNG e JPEG.
Por que a eficiência energética é um aspecto crucial do desempenho web?
Ele diminui o número de arquivos CSS necessários e faz seu CSS rodar mais rápido. Ele reduz a carga no hardware, conservando energia e melhorando a sustentabilidade. Ele minimiza a quantidade de JavaScript usada em uma página da web. Ele melhora o apelo visual geral da página da web.
