Otimização e análise de desempenho de aplicações Javascript

Nesta palestra, aprenda a usar ferramentas de diagnóstico de desempenho, como as DevTools do Chrome, para identificar e solucionar problemas de execução no código. O primeiro passo será analizar o ciclo de vida de uma aplicação JavaScript, desde o carregamento e análise do código-fonte até a otimização do compilador de JavaScript do navegador. A seguir, usando o Chrome DevTools, o código vai ser analizado, buscando identificar oportunidades relevantes de otimização, alem da analise da linha do tempo do flame chart. Por fim, entenda os cenários adequados para Lazy Loading, debouncing e throttling. Como um plus, explore um pouco do uso de Web Workers.

Transcript

1. OTIMIZAÇÕES E ANÁLISE DE DESEMPENHO DE APLICAÇÕES JAVASCRIPT JÉSSICA FÉLIX (JESSILYNEH)
2. Eu sou a Jess Sou desenvolvedora de Software há 8 anos. Trabalho na área faz 6 anos. I .T. Architect II na F1rst (Grupo Santander) Tech Lead na ONG Lacrei Saúde Instrutora de Javascript na Linux Tips Organizadora na comunidade Nerdzão OTIMIZAÇÕES E ANÁLISE DE DESEMPENHO DE APLICAÇÕES JAVASCRIPT @jessilyneh
3. Ciclo de vida de uma aplicação JavaScript @jessilyneh OTIMIZAÇÕES E ANÁLISE DE DESEMPENHO DE APLICAÇÕES JAVASCRIPT Pode envolver outras etapas específicas, como a criação, atualização e destruição de componentes, além de eventos e fases específicas. Algumas etapas em comum: Carregamento do código fonte da aplicação JavaScript. Análise do código fonte e verifica se há erros léxicos e sintáticos. Compilação o código fonte em código de máquina. Otimização para melhorar o desempenho da aplicação Criação do objeto principal e escopo global, onde todas as funções e variáveis globais são definidas. Execução do código, seguindo as regras de escopo e contexto de execução. 1. 2. 3. 4. 5. 6.
4. Ciclo de vida de uma aplicação JavaScript @jessilyneh OTIMIZAÇÕES E ANÁLISE DE DESEMPENHO DE APLICAÇÕES JAVASCRIPT https://webdesign.tutsplus.com/phases-of-javascript-events--cms-107255t Etapa 1 Carregamento do código fonte: O navegador faz o download do código fonte do JavaScript da página web ou de um servidor externo O navegador faz o download do arquivo JavaScript quando ele encontra uma tag <script> no código HTML da página ou quando um evento que executa código JavaScript é acionado. O download é feito pelo navegador através de uma solicitação HTTP para o servidor que hospeda o arquivo JavaScript, respondendo com o arquivo, que é baixado pelo navegador e armazenado em cache para uso posterior.
5. Ciclo de vida de uma aplicação JavaScript @jessilyneh OTIMIZAÇÕES E ANÁLISE DE DESEMPENHO DE APLICAÇÕES JAVASCRIPT https://blog.matheuscastiglioni.com.br/desconstruindo-a-web-como-v8-funciona/ Etapa 2 Análise do código fonte: O navegador cria uma árvore de sintaxe abstrata (AST) para representar a estrutura do código. Uma vez que o browser tem acesso aos códigos JavaScript (seja após o download ou leitura da tag script), é hora de lê-lo e executá-lo. Nesse momento que entre em cena os motores JavaScript dos navegadores.
6. Ciclo de vida de uma aplicação JavaScript @jessilyneh OTIMIZAÇÕES E ANÁLISE DE DESEMPENHO DE APLICAÇÕES JAVASCRIPT https://blog.matheuscastiglioni.com.br/desconstruindo-a-web-como-v8-funciona/ Etapa 2 Análise do código fonte: O navegador cria uma árvore de sintaxe abstrata (AST) para representar a estrutura do código. Pegar o código JavaScript. Parsear o JavaScript. Montar a AST. Interpretar a AST. Gerar o bytecode. 1. 2. 3. 4. 5.
7. Ciclo de vida de uma aplicação JavaScript @jessilyneh OTIMIZAÇÕES E ANÁLISE DE DESEMPENHO DE APLICAÇÕES JAVASCRIPT https://efcl.info/2016/03/06/ast-first-step/ Etapa 2 Análise do código fonte: O navegador cria uma árvore de sintaxe abstrata (AST) para representar a estrutura do código. A AST é criada a partir do processo de análise léxica e sintática do código fonte, que envolve a identificação de tokens e a construção de uma árvore de análise sintática. A AST é uma representação intermediária do código fonte que é usada pelo interpretador ou compilador para gerar o código executável. A AST é usada para otimizar o código, detectar erros de sintaxe, realizar análise de segurança e muito mais.
8. Ciclo de vida de uma aplicação JavaScript @jessilyneh OTIMIZAÇÕES E ANÁLISE DE DESEMPENHO DE APLICAÇÕES JAVASCRIPT https://medium.com/dailyjs/understanding-v8s-bytecode-317d46c94775 Etapa 3 Compilação: O compilador do JavaScript do navegador converte o código-fonte JavaScript em código de máquina executável
9. Ciclo de vida de uma aplicação JavaScript @jessilyneh OTIMIZAÇÕES E ANÁLISE DE DESEMPENHO DE APLICAÇÕES JAVASCRIPT https://devporai.com.br/5-dicas-para-otimizar-codigo-javascript/ Etapa 4 Otimização: O compilador de Javascript do navegador pode otimizar o código gerado para melhorar o desempenho da aplicação, podendo incluir técnicas como inlining de funções, eliminação de código morto e eliminação de laços Inlining de funções:As funções que são declaradas como inline são substituídas pelo seu corpo real em tempo de compilação. Isso pode reduzir o tempo de execução do programa, pois elimina a sobrecarga de chamadas de função e a alocação de memória para as variáveis locais da função. No entanto, é importante notar que nem todas as funções podem ser inlined, pois algumas funções podem ser muito grandes ou complexas para serem inlined com eficiência.
10. Compiladores Javascript @jessilyneh OTIMIZAÇÕES E ANÁLISE DE DESEMPENHO DE APLICAÇÕES JAVASCRIPT https://geekflare.com/es/best-javascript-online-compilers/ V8: usado no Google Chrome e em outros navegadores baseados no Chromium. Conhecido por sua velocidade e eficiência na compilação de código JavaScript. SpiderMonkey: usado no Mozilla Firefox. Conhecido por sua capacidade de otimizar o código JavaScript em tempo real e por sua compatibilidade com as especificações ECMAScript. Chakra: Usado no Microsoft Edge. Conhecido por sua capacidade de otimizar o código JavaScript em tempo real e por sua compatibilidade com as especificações ECMAScript. JavaScriptCore: Usado no Safari da Apple. Conhecido por sua velocidade e eficiência na compilação de código JavaScript.
11. Ciclo de vida de uma aplicação JavaScript @jessilyneh OTIMIZAÇÕES E ANÁLISE DE DESEMPENHO DE APLICAÇÕES JAVASCRIPT David Flanagan - “JavaScript: O guia definitivo” Etapa 5 Criação do objeto global (Global Object): as propriedades desse objeto são os símbolos definidos globalmente que estão disponíveis para um programa Javascript. A Engine cria um ovo objeto global e dá a ele um conjunto inicial de propriedades que define: propriedades globais, como undefined, Infinity, NaN e etc.. funções globais, como isNaN(), parseInt() e etc… funções construtoras, como Date(), RegExp(), String(), Object(), Array() e etc… objetos globais, como Math, JSON e etc..
12. Ciclo de vida de uma aplicação JavaScript @jessilyneh OTIMIZAÇÕES E ANÁLISE DE DESEMPENHO DE APLICAÇÕES JAVASCRIPT David Flanagan - “JavaScript: O guia definitivo” Etapa 5 Criação do objeto global (Global Object): Em Javascript do lado do cliente, o objeto Window também é o objeto Global. O objeto Window está no topo do encadeamento de escopo e suas propriedades e métodos são efetivamente variáveis globais e funções globais. O objeto Window representa uma janela, guia ou quadro do navegador.
13. Ciclo de vida de uma aplicação JavaScript @jessilyneh OTIMIZAÇÕES E ANÁLISE DE DESEMPENHO DE APLICAÇÕES JAVASCRIPT https://webdesign.tutsplus.com/phases-of-javascript-events--cms-107255t Etapa 6 Execução: O código JavaScript é executado no navegador, interagindo com o DOM (Document Object Model) e outros recursos da página web. O código JavaScript pode ser executado em diferentes contextos: console do navegador, em um arquivo separado ou incorporado em uma página HTML. Durante a execução, o navegador interpreta e executa as instruções contidas no código JavaScript, permitindo que o código manipule elementos HTML, CSS e outros recursos da página, além de interagir com APIs externas e realizar operações em segundo plano.
14. Ciclo de vida de uma aplicação JavaScript @jessilyneh OTIMIZAÇÕES E ANÁLISE DE DESEMPENHO DE APLICAÇÕES JAVASCRIPT https://webdesign.tutsplus.com/phases-of-javascript-events--cms-107255t Etapa 6 Execução: O código JavaScript é executado no navegador, interagindo com o DOM (Document Object Model) e outros recursos da página web. O código JavaScript pode ser executado em diferentes contextos: console do navegador, em um arquivo separado ou incorporado em uma página HTML. Durante a execução, o navegador interpreta e executa as instruções contidas no código JavaScript, permitindo que o código manipule elementos HTML, CSS e outros recursos da página, além de interagir com APIs externas e realizar operações em segundo plano.
15. Ciclo de vida de uma aplicação JavaScript @jessilyneh OTIMIZAÇÕES E ANÁLISE DE DESEMPENHO DE APLICAÇÕES JAVASCRIPT https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Memory_management Etapa 5 Gerenciamento de memória: O navegador gerencia a alocação e desalocação de memória para objetos Javascript, garantindo que a memória seja usada de forma eficiente e evitando vazamentos. Alocar a memória que você precisa Utilizar a memória alocada (ler, escrever) Liberar a memória alocada quando não é mais necessária 1. 2. 3.
16. Ciclo de vida de uma aplicação JavaScript @jessilyneh OTIMIZAÇÕES E ANÁLISE DE DESEMPENHO DE APLICAÇÕES JAVASCRIPT https://www.geeksforgeeks.org/stack-vs-heap-memory-allocation/ Etapa 5 É uma área de memória dinâmica alocada para armazenar objetos e variáveis de instância. Os objetos criados na heap memory são acessíveis por todo o programa. Gerenciada automaticamente pelo coletor de lixo do JavaScript, que libera a memória alocada para objetos que não estão mais em uso. Heap Memory: É uma área de memória estática que é alocada para armazenar variáveis locais e referências de objetos. Gerenciada automaticamente pelo JavaScript, que libera a memória alocada para variáveis locais quando a função que as criou é concluída. É limitada em tamanho e pode causar um estouro de pilha se muitas variáveis locais forem criadas. Stack Memory:
17. Ciclo de vida de uma aplicação JavaScript @jessilyneh OTIMIZAÇÕES E ANÁLISE DE DESEMPENHO DE APLICAÇÕES JAVASCRIPT https://www.geeksforgeeks.org/stack-vs-heap-memory-allocation/ Etapa 5 é usada para armazenar objetos e variáveis de instância Heap Memory: é usada para armazenar variáveis locais e referências de objetos Stack Memory: Memória dinâmica: Alocada em tempo de execução, usada para armazenar objetos e variáveis de instância que precisam ser criados e destruídos dinamicamente durante a execução do programa. memória estática Alocada em tempo de compilação, usada para armazenar variáveis locais e referências de objetos que não precisam ser criados e destruídos dinamicamente durante a execução do programa.
18. Ciclo de vida de uma aplicação JavaScript @jessilyneh OTIMIZAÇÕES E ANÁLISE DE DESEMPENHO DE APLICAÇÕES JAVASCRIPT https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Memory_management Etapa 5 Gerenciamento de memória: O navegador gerencia a alocação e desalocação de memória para objetos Javascript, garantindo que a memória seja usada de forma eficiente e evitando vazamentos.
19. Ciclo de vida de eventos JavaScript A cada evento, a ação se propaga através do Document Object Model (DOM). O DOM possui uma estrutura em árvore, com elementos irmãos, filhos e pais. Os eventos sempre percorrem a árvore em uma sequência. @jessilyneh OTIMIZAÇÕES E ANÁLISE DE DESEMPENHO DE APLICAÇÕES JAVASCRIPT https://webdesign.tutsplus.com/phases-of-javascript-events--cms-107255t Um evento pode ser tão simples quanto hover ou click. Quando os eventos acontecem, existem listeners para executar a funcionalidade como desejada. Representação da Árvore DOM
20. Ciclo de vida de eventos JavaScript @jessilyneh OTIMIZAÇÕES E ANÁLISE DE DESEMPENHO DE APLICAÇÕES JAVASCRIPT https://webdesign.tutsplus.com/phases-of-javascript-events--cms-107255t Uma função JavaScript conhecida como event handler é ativada quando um evento ocorre. Um elemento pode esperar e “ouvir” a ocorrência do evento adicionando um event listener à interface responsiva.
21. Ciclo de vida de eventos JavaScript @jessilyneh OTIMIZAÇÕES E ANÁLISE DE DESEMPENHO DE APLICAÇÕES JAVASCRIPT https://webdesign.tutsplus.com/phases-of-javascript-events--cms-107255t Processo onde os eventos começam a se propagar. Começa no elemento wrapper, que pode ser o Document ou window, O elemento alvo é responsável por iniciar um ciclo de eventos. O evento vinculado à window é executado primeiro. Em seguida, ele desce na seguinte ordem: document, html, body, div e o elemento de destino. The Event Capturing Phase
22. Ciclo de vida de eventos JavaScript @jessilyneh OTIMIZAÇÕES E ANÁLISE DE DESEMPENHO DE APLICAÇÕES JAVASCRIPT https://dom.spec.whatwg.org/#ref-for-dom-event-bubbles%E2%91%A2 "Bubbles" é uma propriedade de eventos em JavaScript que indica se o evento se propaga pela árvore DOM ou não. A propriedade "bubbles" é somente leitura e pode ser acessada por meio do objeto Event
23. Ciclo de vida de eventos JavaScript @jessilyneh OTIMIZAÇÕES E ANÁLISE DE DESEMPENHO DE APLICAÇÕES JAVASCRIPT https://webdesign.tutsplus.com/phases-of-javascript-events--cms-107255t O componente de UI que acionou o evento é conhecido como elemento de destino (target). A propriedade para identificar este alvo é event.target. Se a propriedade bubbles for verdadeira,o elemento pai direto do elemento selecionado é o primeiro a receber o evento, seguido pelo próximo até atingir o elemento <html>. Se as bubbles forem falsas, nenhum dos ancestrais do alvo receberá o evento. The Target Phase
24. Ciclo de vida de eventos JavaScript @jessilyneh OTIMIZAÇÕES E ANÁLISE DE DESEMPENHO DE APLICAÇÕES JAVASCRIPT https://javascript.plainenglish.io/different-phases-of-events-in-javascript-901ed0b23999 O Bubbling é o oposto direto da captura.É aqui que o evento flui do target para o pai. O fluxo ascendente de um evento pode atingir o Document ou até mesmo a Window. Quando você clica no elemento <p>, todos os event handlers de click dos elementos pai são invocados, começando do mais externo e propagando-se para dentro até o elemento de destino <p>. The Bubbling Phase <p>-><div>-><article>-><body>-><html>.
25. Evitando Problemas de memory leak @jessilyneh OTIMIZAÇÕES E ANÁLISE DE DESEMPENHO DE APLICAÇÕES JAVASCRIPT Certifique-se de que todos os eventos registrados sejam removidos quando não forem mais necessários. Isso pode ser feito usando o método removeEventListener(). Evite criar loops infinitos em eventos que podem ser acionados várias vezes. Certifique-se de que todos os objetos criados durante o ciclo de vida do evento sejam devidamente destruídos quando não forem mais necessários. Evite criar objetos globais que possam ser referenciados por eventos em diferentes partes do código. Use ferramentas de depuração, como o Chrome DevTools, para identificar e corrigir problemas de memory leaking
26. Uso do Developer tools @jessilyneh OTIMIZAÇÕES E ANÁLISE DE DESEMPENHO DE APLICAÇÕES JAVASCRIPT https://loadninja.com/articles/debug-javascript-performance/ Abra o DevTools e clique na guia Performance. Clique no botão Gravar para começar a registrar o desempenho do tempo de execução. Aguarde enquanto o DevTools cria o perfil da página. Clique em stop para interromper a gravação, processar os dados e exibir os resultados.
27. Uso do Developer tools @jessilyneh OTIMIZAÇÕES E ANÁLISE DE DESEMPENHO DE APLICAÇÕES JAVASCRIPT https://loadninja.com/articles/debug-javascript-performance/ Gráfico FPS: O gráfico de quadros por segundo (FPS) mostra o desempenho das animações e geralmente deve ser de 60 FPS. Quando a taxa de quadros cair abaixo dos níveis aceitáveis, você verá uma barra vermelha em vez de uma barra verde. Gráfico de CPU: O gráfico de CPU mostra o uso de CPU do navegador. Se você estiver maximizando a CPU de um navegador, encontre maneiras de reduzir a quantidade de trabalho necessária, pois você pode deixar o dispositivo do usuário lento. Métricas principais a serem observadas:
28. @jessilyneh OTIMIZAÇÕES E ANÁLISE DE DESEMPENHO DE APLICAÇÕES JAVASCRIPT Performance Insights Identificam problemas como solicitações de bloqueio de renderização, mudanças de layout e tarefas longas que podem afetar negativamente o desempenho de carregamento da página do seu site e, especificamente, as pontuações do Core Web Vital do site.
29. @jessilyneh OTIMIZAÇÕES E ANÁLISE DE DESEMPENHO DE APLICAÇÕES JAVASCRIPT Performance Insights Temos uma linha do tempo de rastreamento e podemos inspecionar os dados, mas também temos uma lista do que o DevTools considera os principais "Insights" que valem a pena pesquisar. Também oferece sugestões acionáveis ​ ​ para melhorar as pontuações de CWV e fornece links para outros recursos e documentação
30. Técnicas para melhorar desempenho @jessilyneh OTIMIZAÇÕES E ANÁLISE DE DESEMPENHO DE APLICAÇÕES JAVASCRIPT https://www.wmtips.com/html/lazy-loading-definitive-guide/ Lazy loading é uma técnica que consiste em carregar conteúdo apenas quando for solicitado pelo usuário,para melhorar o desempenho de uma página da web. Lazy Loading Imagens ou outros recursos pesados que não são necessários para a visualização inicial da página. Conteúdo abaixo do fold pesado e pode afetar o tempo de carregamento da página. Página contém muitas imagens e o tempo de carregamento é um problema. Quando usar Quando NÃO usar Quando o conteúdo acima do fold é importante e deve ser carregado o mais rápido possível. Quando o conteúdo é pequeno e não afeta significativamente o tempo de carregamento da página. Quando o conteúdo é necessário para a interação do usuário com a página
31. Técnicas para melhorar desempenho @jessilyneh OTIMIZAÇÕES E ANÁLISE DE DESEMPENHO DE APLICAÇÕES JAVASCRIPT https://www.freecodecamp.org/news/javascript-debounce-example/ Técnica utilizada para garantir que uma função seja executada apenas uma vez após um determinado período de tempo, mesmo que seja acionada várias vezes em um curto espaço de tempo Deboucing Trabalhando com eventos que podem ser acionados várias vezes em um curto espaço de tempo Para evitar que funções pesadas sejam executadas várias vezes em um curto espaço de tempo. Quando se deseja evitar a execução acidental de funções devido a cliques ou toques acidentais. Quando usar Quando NÃO usar Quando se trabalha com eventos que precisam ser executados imediatamente, como a digitação em um campo de entrada. Quando o atraso na execução da função pode afetar negativamente o desempenho do programa.
32. Técnicas para melhorar desempenho @jessilyneh OTIMIZAÇÕES E ANÁLISE DE DESEMPENHO DE APLICAÇÕES JAVASCRIPT https://woliveiras.com.br/posts/o-que-e-para-que-serve-throttle%20/ Técnica utilizada para limitar a frequência com que uma função pode ser chamada em um determinado período de tempo. Parecido com Deboucing. Throttling Trabalho com eventos que podem ser acionados várias vezes em um curto espaço de tempo Evitar que funções pesadas sejam executadas várias vezes em pouco tempo. Quando se deseja evitar sobrecarregar um servidor ou API com muitas solicitações em um curto espaço de tempo. Quando usar Quando NÃO usar Quando se trabalha com eventos que precisam ser executados imediatamente, como a digitação em um campo de entrada. Quando a limitação na frequência de execução da função pode afetar negativamente o desempenho do programa.
33. Técnicas para melhorar desempenho @jessilyneh OTIMIZAÇÕES E ANÁLISE DE DESEMPENHO DE APLICAÇÕES JAVASCRIPT Debouncing garante que uma função seja executada apenas uma vez após um determinado período de tempo, mesmo que seja acionada várias vezes em um curto espaço de tempo. Deboucing Throttling Throttling limita a frequência com que uma função pode ser chamada em um determinado período de tempo.
34. Técnicas para melhorar desempenho @jessilyneh OTIMIZAÇÕES E ANÁLISE DE DESEMPENHO DE APLICAÇÕES JAVASCRIPT https://woliveiras.com.br/posts/o-que-e-para-que-serve-throttle%20/ Web Workers são uma API do JavaScript que permite executar scripts em threads separadas da thread principal do navegador, melhorando a performance de aplicações web. Uso de Web Workers Executar cálculos pesados em segundo plano, sem bloquear a thread principal do navegador. Realizar operações de I/O, como leitura e escrita em arquivos, sem afetar a interface do usuário. Realizar operações de rede, como requisições HTTP, sem bloquear a thread principal do navegador. Executar scripts longos em segundo plano, sem afetar a interface do usuário Quando usar Quando NÃO usar O código não é pesado o suficiente para justificar o uso de Web Workers. Suporte para Web Workers não está disponível em todos os navegadores que a aplicação web precisa suportar. Quando o uso de Web Workers pode introduzir problemas de sincronização de dados entre a thread principal e as threads secundárias.
35. Dicas adicionais @jessilyneh OTIMIZAÇÕES E ANÁLISE DE DESEMPENHO DE APLICAÇÕES JAVASCRIPT Learn Core Web Vitals Google