DevTools: Mensurando e otimizando

Uma apresentação sobre como utilizar as ferramentas de desenvolvedor (devtools) disponíveis nos browser para otimizar a performance client-side de aplicações web.

Transcript

1. DevTools: Mensurando e otimizando Um panorama das ferramentas de desenvolvedor e o que elas podem adicionar a seu workflow.
2. HELLO WORLD! Twitter: @anneboolean Github: github.com/annebione Linkedin: linkedin.com/in/annebione annebione@gmail.com Anne Caroline Bione Desenvolvedora Front-end @ MedPass
3. HISTÓRIA DEVTOOLS
8. Funcionalidades EDITOR INSPETOR DEBUGGER CONSOLE EMULADOR
9. OTIMIZAÇÃO
10. ANÁLISE DE DESEMPENHO PROCESSO
11. “O quanto eu devo priorizar performance?”
12. Mensure primeiro, otimize conforme necessário.
13. Definição de KPIs (Key Performance Indicators) Dependem do objetivo da sua página. É uma página de conteúdo? Quanto tempo o usuário leva até conseguir ler o texto? É uma galeria de imagens? Quanto tempo o usuário leva pra poder visualizar a foto principal carregada? Se é uma webapp que depende do JavaScript pra realizar ações, quanto tempo o JavaScript leva até ser carregado?
14. Modelo RAIL https://goo.gl/gic7pP - Response Animation Idle Load • Foco no usuário, o objetivo final não é fazer o site ser rápido em dispositivos específicos, é deixar os usuários satisfeitos. • Responder aos usuários imediatamente. Reconhecer o comando do usuário em menos de 100 ms. • Durante animação ou rolagem, produzir um quadro em menos de 10 ms. • Maximizar o tempo de ociosidade do encadeamento principal. • Manter os usuários envolvidos, fornecer conteúdo interativo em menos de 1000 ms.
15. 1. Network
16. 1.1 Terminologia 1.1.1 Queueing Fila de ordem de prioridade até a solicitação ser enviada. 1.1.2 Stalled/Blocking Parecido com queueing. mas esse inclui a negociação com o servidor proxy da conexão até ele liberar o download. 1.1.3 Proxy negotiation Parecido com queueing. mas esse inclui a negociação com o servidor proxy da conexão até ele liberar o download. (FAVOR LEMBRAR da conexão keep-alive) 1.1.4 DNS Lookup Uma nova conexão DNS foi efetuada para essa solicitação.
17. 1.1 Terminologia 1.1.5 Initial connection/SSL Validação/Handshake SSL para conexões seguras. 1.1.6 Request sent Disparo do request 1.1.7 TTFB (Time To First Byte) Tempo de retorno do servidor para o request. 1.1.8 Downloading Tempo de fato para download do arquivo.
18. 1.2 Problemas comuns 1.2.1 Muitas solicitações enfileiradas 1.2.2 TTFB Demorado 1.2.3 Tempo lento de download
19. 2. Auditoria
20. 3. Performance
21. 3.1 Garbage collection • É um mecanismo que é disparado esporadicamente que busca referência a estruturas de dados que não estão mais sendo utilizadas e as remove da memória. • JavaScript utiliza os moldes “mark-and-sweep”
22. 4. FPS & Painting
23. 1.1 60 FPS Número de refreshs de uma tela por segundo. Para a web isso significa que o browser deve estar pronto para dar à tela um frame por cada um desses refreshs.
24. 4. Memory Leaks
25. 4.1 Memory Leaks Comuns 4.1.1 Variável global
26. 4.1 Memory Leaks Comuns 4.1.2 SetTimeout e SetInterval
27. 4.1 Memory Leaks Comuns 4.1.3 Referência circular
28. 4.2 Detectando Memory Leaks
29. 4.3 Evitando Memory Leaks 4.3.1 Conheça os padrões. 4.3.2 Utilize recursos da linguagem.
30. 4.3.2.1 removeEventListener
31. 4.3.2.2 Operador “delete”
32. 5. Macro vs. Micro Otimizações
33. OBRIGADA!