Desempenho de renderização

Os usuários percebem se os sites e apps não funcionam bem. Por isso, é essencial otimizar o desempenho da renderização.

Paul Lewis

Os usuários da web de hoje esperam que as páginas que visitam sejam interativas e suave, e é aí que você precisa concentrar cada vez mais seu tempo e esforço. As páginas não devem apenas carregar rapidamente, mas também responder rapidamente à entrada do usuário durante todo o ciclo de vida. Na verdade, esse aspecto da experiência do usuário é exatamente o que a métrica Interaction to Next Paint (INP) mede. Uma boa INP significa que uma página foi responsiva de forma consistente e confiável ao necessidades.

Um componente importante do que faz uma página parecer ágil é a quantidade de O JavaScript que você executa em resposta às interações do usuário, o que os usuários antecipar são mudanças visuais na interface do usuário. Mudanças visuais para um usuário de interface são o resultado de vários tipos de trabalho, muitas vezes chamados coletivamente como renderização, e esse trabalho precisa acontecer o mais rápido possível para que a experiência do usuário seja rápida e confiável.

Para escrever páginas que respondam rapidamente às interações do usuário, você precisa entender como HTML, JavaScript e CSS são tratados pelo navegador e garantir que os o código que você escreve, assim como qualquer outro código de terceiros que você incluir, será executado da forma mais eficiente possível.

Observação sobre as taxas de atualização de dispositivos

A taxa de atualização de uma tela é uma consideração importante quando se trata da criar sites responsivos à entrada do usuário.

Atualmente, a maioria dos dispositivos atualiza a tela 60 vezes por segundo. A cada atualização produz a saída visual que você vê, conhecida como frame. Na vídeo seguinte, o conceito de frames é demonstrado:

Frames conforme mostrado no painel de desempenho do Chrome DevTools. Como o cursor passa por cima da tira de filme próxima ao topo, uma representação ampliada de cada o frame é mostrado em uma dica enquanto um menu de navegação móvel é animado para seu "abrir" estado.

Embora a tela de um dispositivo seja sempre atualizada a uma frequência consistente, os aplicativos que executados em um dispositivo nem sempre consegue produzir frames suficientes para correspondem a essa taxa de atualização. Por exemplo, se houver uma animação ou transição em execução, o navegador precisa corresponder à taxa de atualização do dispositivo para produzir para cada vez que a tela é atualizada.

Como uma tela típica atualiza 60 vezes por segundo, alguns cálculos revelaria que o navegador tem 16,66 milésimos de segundo para produzir cada frame. Na realidade, porém, o navegador tem sua própria sobrecarga para cada frame, portanto seu trabalho precisa ser concluído em 10 milissegundos. Quando você não consegue atendem a esse orçamento, o frame rate cai e o conteúdo da página trepida na tela. Isso fenômeno é frequentemente chamado de instabilidade.

No entanto, as metas mudam com base no tipo de trabalho que você está tentando realizar. Atingir o limite de 10 milissegundos é crucial para animações, em que o objetos na tela são interpolados em uma série de frames entre dois pontos. Quando se trata de mudanças discretas na interface do usuário, ou seja, ir de um estado a outro sem qualquer movimento intermediário, é recomendamos que você alcance essas mudanças em um período que pareça instantâneo o usuário. Em casos como esses, 100 milissegundos são bastante citados, mas o status "bom" da métrica INP limite é de 200 milissegundos ou menos para acomodar uma variedade maior de dispositivos com recursos variados.

Sejam quais forem suas metas, produza os vários frames que as animações exigem para evitar instabilidade ou simplesmente produzir uma distinta mudança visual interface do usuário o mais rápido possível, entendendo como o pixel do navegador o funcionamento do pipeline é essencial para o seu trabalho.

O pipeline de pixels

Há cinco áreas principais que você precisa conhecer e considerar em seu a trabalhar como desenvolvedor Web. Essas cinco áreas são as que você tem mais e cada uma representa um ponto-chave no pipeline de pixels para a tela:

Ilustração de um pipeline de pixels completo.

• JavaScript:o JavaScript normalmente é usado para processar trabalhos que resultarão em mudanças visuais na interface do usuário. Por exemplo, esta poderia ser a biblioteca animate, classificar um conjunto de dados ou adicionar elementos DOM à página. No entanto, o JavaScript não é estritamente necessário para acionar alterações visuais: CSS animações, transições CSS e a API Web Animations são capazes de: animações do conteúdo da página.
• Cálculos de estilo: é o processo de descoberta das regras de CSS. se aplicam a quais elementos HTML com base nos seletores correspondentes. Por exemplo: .headline é um exemplo de seletor de CSS que se aplica a qualquer elemento HTML. com um valor de atributo class que contém uma classe de headline. De Quando as regras são conhecidas, elas são aplicadas, e os estilos finais de cada são calculados.
• Layout:quando o navegador sabe quais regras se aplicam a um elemento, ele pode começar a calcular a geometria da página, como o tamanho dos elementos de espaço são ocupados e onde aparecem na tela. O modelo de layout da Web significa de que um elemento pode afetar os outros. Por exemplo, a largura do <body> normalmente afeta as dimensões de seus elementos filhos até e pela árvore. Portanto, o processo pode ser bastante complicado para o navegador.
• Pintura:a pintura é o processo de preencher os pixels. Ele envolve desenhar texto, cores, imagens, bordas, sombras e essencialmente todos os recursos dos elementos depois que o layout na página tiver sido calculado. O desenho é normalmente feito em várias superfícies, frequentemente chamadas de camadas.
• Composto:já que as partes da página foram possivelmente desenhadas várias camadas, elas precisam ser aplicadas à tela na ordem correta para que que a página seja renderizada como esperado. Isso é especialmente importante para elementos que se sobrepõem a outro, já que um erro poderia resultar na exibição sobre outra de forma incorreta.

Cada uma dessas partes do pipeline de pixels representa uma oportunidade para introduzir atrapalhar as animações ou atrasar a pintura de frames, mesmo para visuais discretos alterações na interface do usuário. Por isso, é importante entender exatamente quais partes do pipeline o código aciona e para investigar se é possível limitar suas alterações apenas às partes do pipeline de pixels que são necessárias para renderizá-las.

Você já deve ter ouvido o termo "rasterizar" usado em conjunto com "paint". Isso é porque, na verdade, a pintura consiste em duas tarefas:

1. Criar uma lista de chamadas de desenho.
2. Preenchendo os pixels.

Essa última é chamada de "rasterização", então sempre que você vir registros de pintura DevTools, considere a inclusão de varredura. Em alguns do Terraform, a criação da lista de chamadas de desenho e a rasterização são feitas linhas de execução diferentes, mas isso não está sob seu controle como desenvolvedor.

Você nem sempre vai mexer em todas as partes do pipeline em todos os frames. Na verdade, o pipeline se desenrola normalmente para um determinado ao fazer uma alteração visual, seja com JavaScript, CSS ou API Animations.

1. JS / CSS > Estilo > Layout > Pintura > Composto

Se você alterar um "layout" , como aquela que altera a propriedade geometria, como largura, altura ou posição (como o CSS left ou top propriedades), o navegador precisa verificar todos os outros elementos e executar "reflow" as página. Todas as áreas afetadas precisarão ser pintadas de novo, e a camada final será pintada elementos precisarão ser combinados novamente.

2. JS / CSS > Estilo > Pintura > Composto

Se você alterou um objeto "paint-only" para um elemento no CSS. Por exemplo, como background-image, color ou box-shadow, a etapa de layout não é necessário confirmar uma atualização visual da página. Omitindo o layout etapa (quando possível), você evita trabalhos de layout potencialmente dispendiosos que podem ter contribuiu para a latência significativa na produção do próximo frame.

3. JS / CSS > Estilo > Composto

Se você mudar uma propriedade que não exige layout ou pintura, o navegador podem ir direto para a etapa de composição. É a opção mais barata caminho desejado pelo pipeline de pixels para pontos de alta pressão em um do ciclo de vida da página, como animações ou rolagem. Curiosidade: o Chromium otimiza rolagem da página para que ela ocorra somente na linha de execução do compositor em que possível, o que significa que, mesmo que uma página não esteja respondendo, você ainda poderá rolar a página e ver partes dela que foram desenhadas anteriormente na tela.

Observação:se você quiser um caminho rápido para alto desempenho animações, ler Placa a propriedades somente do compositor e gerenciar o número de camadas.

A performance na Web é a arte de evitar trabalho, aumentando a eficiência o máximo possível de qualquer trabalho necessário. Em muitos casos, trata-se de trabalhar com o navegador, não contra ele. É importante ter em mente que o trabalho mostrados anteriormente no pipeline difere em termos de custo computacional. algum tarefas são inerentemente mais caras do que outras!

Vamos analisar as diferentes partes do pipeline. Vamos dar uma olhada os problemas comuns e como diagnosticá-los e corrigi-los.

Otimizações da renderização do navegador

O desempenho é importante para os usuários e, para criar boas experiências do usuário, os desenvolvedores Web necessário criar sites que reajam rapidamente às interações do usuário e sejam renderizados suavemente. O especialista em performance Paul Lewis está aqui para ajudar você a eliminar instabilidade e criam aplicativos da web com desempenho de 60 quadros por segundo. Você sairá neste curso com as ferramentas necessárias para criar perfis de apps e identificar as causas dos desempenho de renderização abaixo do ideal. Você também vai conhecer a renderização do navegador pipeline e revelar padrões que facilitam a criação de sites rápidos que que os usuários acharão agradável de usar.

Este é um curso sem custo financeiro oferecido pela Udacity e pode ser realizado a qualquer momento.