O ReactJS combina a velocidade do JavaScript com recursos de renderização exclusivos para tornar aplicativos altamente dinâmicos, orientados ao desempenho e responsivos à entrada do usuário.
O relatório State of JS 2018
cita o desempenho como a principal razão pela qual a ReactJS ganhou tanta popularidade em tão pouco tempo. Quando se trata de opções para a construção de spAs (single-page applications, aplicativos de página única), o React oferece vantagens de desempenho sobre as estruturas e bibliotecas Do JavaScript e angular. Uma vez que o React mantém um DOM virtual no JavaScript, ele pode determinar rapidamente as alterações mínimas necessárias para levar o documento ao estado desejado. Uma vez que o estado de um componente React é salvo em JavaScript, você pode evitar acessar o DOM.
Para aplicações pequenas, as otimizações de desempenho que o ReactJS entregam fora da caixa são mais do que suficientes. No entanto, à medida que seus aplicativos evoluem para incluir visões mais complexas, manter e paralelamente dos DOMs virtuais pode se tornar um caso caro. Uma grande aplicação é uma árvore de renderização enorme, ramificada e complicada. Sempre que você atualizar os adereços para um nó, React deve reconfigurar a árvore de renderização do nó todo o caminho até os galhos e, finalmente, a folha, onde ocorrem comparações virtuais do DOM.
No entanto, à medida que a base de usuários cresce, um aplicativo tende a crescer em complexidades, carregar mais dependências e incorporar mais plugins de terceiros. Sua probabilidade de atingir gargalos de desempenho só se expande. Multiplique isso com um número crescente de aplicativos em milhões de dispositivos habilitados para a Web de vários tamanhos e tipos e você não pode evitar um potencial pesadelo de desempenho.
Por exemplo, os usuários esperam 60 quadros por segundo ao interagir com um aplicativo da Web no navegador, o que lhe dá apenas 16,7ms para renderizar cada quadro. Quando seu aplicativo está lento, muitas vezes está demorando muito para responder aos eventos do usuário, demorando muito para processar os dados ou reer renderizar os novos dados. Na maioria dos casos, você não está fazendo um processamento complexo de dados no Relógio – você está perdendo tempo re renderizando.
Sem dúvida, mesmo o aplicativo React mais perfeitamente projetado e otimizado exige uma ferramenta de monitoramento de desempenho.
Suportes de componentes de monitoramento com profiler
O número de vezes que os componentes re renderizam, juntamente com a quantidade de recursos e o tempo levado, pode dizer muito sobre o desempenho de sua aplicação React na produção. O componente Profiler é um componente React incorporado que mede o tempo de “montagem” ou “atualização” de um subtree componente. sempre que um componente é atualizado ou montado, a função onRender do Profiler é carimbada por tempo. O Profiler fornece uma maneira acessível de visualizar problemas em aplicativos React.
import { unstable_Profiler as Profiler } from "react"
<Profiler id="Counter" onRender={callback}>
<Counter />
</Profiler>
O suporte de identificação identifica o relatório, enquanto a função onRender está associada a argumentos quando o componente Counter é montado ou revisado.
function callback(id, phase, actualTime, baseTime, startTime, commitTime) {
log("id: " + id, "phase:" + phase, "actualTime:" + actualTime, "baseTime: " + baseTime, "startTime: " + startTime, "commitTime: " + commitTime)
}
Os argumentos da função são carimbos de tempo coletados de quando o componente Contador foi renderizado. Vamos dar uma olhada em cada um dos parâmetros.
id. O ID exclusivo associado ao componente Profiler.
fase. Isso detecta a fase seja na fase “montar” ou na fase de “atualização”.
realTime. O tempo levado pelo Profiler para renderizar atualizações comprometidas.
baseTime. O tempo levado por um dos componentes na árvore Profiler para montar ou atualizar.
startTime. Registra o carimbo de hora que o Profiler começa a medir o tempo de montagem/renderização de seus descendentes.
cometerTime. O tempo que React levou para cometer uma atualização.
Componentes de monitoramento que são re renderizados usando ferramentas de desenvolvedor react
Durante o desenvolvimento, se você descobrir qual componente está sendo re renderizado, ele pode salvar sua aplicação na produção de vários gargalos de desempenho. As ferramentas de desenvolvedor react tornam isso simples para o desenvolvedor colorindo os limites dos componentes, sempre que eles estão reativando. Se os componentes principais voltarem a renderizar, as bordas que capturam os componentes Contador e Contagem serão brevemente destacadas.
O tipo de cor que aparece depende da frequência/frequência que um componente é re renderizado, dando-lhe a capacidade de identificar facilmente qual componente atualiza com mais frequência para que você possa otimizá-lo adequadamente.
| verde – atualização de baixa frequência
| azul – atualização de frequência média
v vermelho – denota uma atualização muito frequente
Identificação de problemas perf com react.addons.Perf
Para iniciar o Perf, você deve ligar para Perf.start() do console, gravar a ação e chamar Perf.stop() para parar Perf. Em seguida, você pode chamar qualquer um dos seguintes métodos para visualizar conjuntos de medidas úteis.
Perf.printWasted()
Perf.printWasted() é o método mais útil que você chama no React.addons.Perf. Perf.printWasted()diz que o tempo perdido contraindo árvore renderizante e comparando DOMs virtuais entre si. Esses componentes são mencionados acima são os principais candidatos para melhorar o desempenho da sua aplicação React.
Perf.printInclusive() / Perf.printExclusive()
Perf.printInclusive() e Perf.printExclusive() devolução do tempo que ele se apropriou para renderizar seus componentes. A maioria dos desenvolvedores não achará esse método muito útil, pois os problemas de desempenho desencadeados pela renderização são normalmente resolvidos por não renderizar usando o método acima: Perf.printWasted().
No entanto, o método pode ajudá-lo a identificar componentes que estão realizando cálculos pesados em métodos de ciclo de vida. Você aprenderá que depois de corrigir problemas impressosSus, é o seu código de aplicativo não otimizado que está armazenando esses recursos preciosos. Alternativamente, você pode trazer o JavaScript Profiler padrão do Chrome DevTool e dar uma olhada nas chamadas de função mais pesadas diretamente.
Perf.printDOM()
Perf.printDOM() mostra todas as operações do DOM desencadeadas durante a renderização de árvores React. Se você está jogando com reactJS por um bom tempo, então você sabe que esta é talvez a parte mais complicada. Para navegar em uma lista interminável de linhas e coluna se o seu aplicativo é bastante complexo, pode levar a eternidade para detectar o que exatamente deu errado.
Uma vez que seu primeiro conjunto de componentes seja renderizado, você espera que as futuras re-renderizações reutilizem os nós DOM existentes e não criem nós novos — uma otimização proporcionada pelo DOM virtual da React e dada por todos os desenvolvedores do React.
Perf.printDOM() é útil para encontrar esquisitices peculiares e caras do navegador ou monitorar modificações principais e imprevisíveis do DOM.
Monitoramento sintético para aplicações web ReactJS
Embora os métodos acima mencionados sejam essenciais para monitorar o desempenho de um aplicativo React, eles não conseguem imitar as ações que um usuário típico realiza ao usar o aplicativo. Uma plataforma de monitoramento sintético,
combinada com um gravador de script,
pode executar e reproduzir scripts pré-gravados, simulando transações de usuário e ações típicas do usuário em um navegador real. Por exemplo, navegação básica, envios de formulários, transações de carrinho de compras, jogos online, velocidade de rolagem, animações, etc.
Embora o Perf seja uma excelente ferramenta para monitorar a quantidade de tempo perdido na renderização de árvores e comparar o DOM virtual com o DOM real, ele não se traduz no que os usuários podem experimentar ao usar o aplicativo. As soluções sintéticas de monitoramento de
aplicativos web,
como as oferecidas pelo
Dotcom-Monitor,
consistem em uma ferramenta de scripting fácil de usar para escrever seus vários scripts de teste de monitoramento. Esses scripts podem ser executados em ambiente de teste privado e verifica sua aplicação web para vários parâmetros em intervalos regulares. O uso de uma ferramenta de monitoramento sintético que usa navegadores reais permite obter resultados de desempenho mais precisos.
Além disso, o monitoramento sintético pode ser executado usando diferentes dispositivos, navegadores e localizações geográficas. Com aplicativos de página única, a velocidade inicial de carga da página não é tão importante quanto a experiência do usuário final. Não só é vital garantir que seus aplicativos estejam funcionando, mas a funcionalidade também deve ser monitorada. Por exemplo, os usuários podem executar as ações necessárias e quais, se houver, serviços ou APIs de terceiros estão causando atrasos ou problemas.
O objetivo do monitoramento de aplicativos web é automatizar o processo de identificação de problemas antes que eles afetem um número maior de usuários. Com o monitoramento sintético, você pode configurar alertas com base nos requisitos para o seu aplicativo reage específico e ser notificado imediatamente quando algo der errado. Ao contrário das outras ferramentas discutidas acima, o monitoramento sintético adota uma abordagem proativa, liberando você do processo demorado de você e sua equipe terem que executar testes manuais.
Monitoramento de aplicativos ReactJS: Conclusão
Embora essas ferramentas sejam úteis para monitorar suas aplicações React em ambientes de desenvolvimento, monitorar o desempenho na produção é um desafio de outra magnitude e carrega mais peso. Ceder à mentalidade de “funciona na minha máquina” é um conto de advertência quando o desempenho de sua aplicação na produção está em jogo. Ferramentas de monitoramento sintéticos, por outro lado, dão relatórios de desempenho da perspectiva de um usuário final, não de alguns casos de teste clichês imaginados pelos desenvolvedores. No entanto, se você está procurando aumentar o nível do seu monitoramento de desempenho ReactJS, obtenha um
teste gratuito de 30 dias do Dotcom-Monitor hoje
.
