Como otimizar a performance da sua aplicação JS

Palestra realizada no IBM TechDay dia 26/10/2017.

Transcript

1. Amanda Vilela - IBM TechDay
2. Amanda Vilela
4. O Yahoo! descobriu que, para cada 400ms de melhora na performance, seu tráfego aumenta em 9%. Fonte: https://www.slideshare.net/stoyan/yslow-20-presentation
5. Ao cortar 2,2s da landing page do Firefox, a Mozilla aumentou o número de downloads em 15%, totalizando um ganho de mais de 60 milhões de cópias por ano Fonte: http://blog.mozilla.com/metrics/category/website-optimization/
6. A Amazon concluiu que apenas 100ms de melhora aumentam 1% seu faturamento Fonte: https://sites.google.com/site/glinden/Home/StanfordDataMining.2006-11-28.ppt?attredirects=0
7. Em um de seus vários experimentos, o Google aumentou o número de resultados por página de 10 para 30. Isso aumentou o tempo de carregamento de 0.4s para 0.9s, o que diminuiu em 20% o tráfego das buscas Fonte: http://glinden.blogspot.com/2006/11/marissa-mayer-at-web-20.html
8. E muitos outros cases na internet Fonte: http://www.webperformancetoday.com/2010/06/15/everything-you-wanted-to-know-about-web-performance/
9. Usuários não gostam de coisas lentas
10. Sem usuários, sem dinheiro
11. Voltando para o JS...
12. Como o JS impacta a performance?
13. No back-end: Demora para responder as requests
14. No front-end: Demora para carregar a página
15. Como melhorar?
16. Dicas práticas ;)
17. 1. <script> dentro do body
18. 2. Evite o número de <script>.
19. Reduza os bloqueios. Reduza o número de requisições HTTP. Não use ou reduza scripts inline
20. Minifique e concatene os arquivos .js
21. Gulp
22. 3. Use async/defer
23. Scripts bloqueantes nunca mais! O download do script é feito de forma assíncrona enquanto o processo de renderização da página continua a ser feito. O script é executado depois que o download estiver completo.
24. Scripts bloqueantes nunca mais! O download do script é feito de forma assíncrona. Mas sua execução se dá apenas quando todo o processo de renderização estiver concluído.
25. E se usar os dois? Nesse caso, o async prevalece e o defer é ignorado.
26. 4. Reduza pesquisa de domínio
27. 5. Modularize
28. Variáveis locais são mais rápidas de acessar do que variáveis fora do escopo. Nada de variáveis globais.
29. 6. Remova variáveis inúteis
30. 7. Só use loops se necessário
31. 8. Guarde o tamanho do Array
32. Em vez de : Use:
33. Evite o loop for-in, a menos que você precise iterar sobre uma série de objetos com número de propriedades desconhecido.
34. 9. Reduza acesso ao DOM
39. 10. Use criação “literal” de arrays/objetos
40. Em vez de :
41. Use:
42. Em vez de :
43. Use:
44. Como mensurar?
45. Benchmarking
47. https://jsperf.com
48. Profiling
51. Que tal começar a pensar em performance durante o desenvolvimento?
52. Obrigada :D https://amandavilela.com
53. Referências • High Performance JavaScript - Nicholas C. Zakas • https://developer.mozilla.org/pt-BR/docs/Web/HTML/Dicas_para_criar_p%C3 %A1ginas_HTML_de_carregamento_r%C3%A1pido • http://www.monitis.com/blog/30-tips-to-improve-javascript-performance/ • https://www.smashingmagazine.com/2012/11/writing-fast-memory-efficient-ja vascript/ • https://browserdiet.com/ • http://blog.caelum.com.br/por-uma-web-mais-rapida-26-tecnicas-de-otimizaca o-de-sites/