Como otimizar a performance da sua aplicação JS

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

Transcript

1. Amanda Vilela - IBM TechDay
   

   View Slide

2. Amanda Vilela
   

   View Slide

3. View Slide

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
   

   View Slide

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/
   

   View Slide

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
   

   View Slide

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
   

   View Slide

8. E muitos outros cases na internet
   Fonte: http://www.webperformancetoday.com/2010/06/15/everything-you-wanted-to-know-about-web-performance/
   

   View Slide

9. Usuários não gostam
   de coisas lentas
   

   View Slide

10. Sem usuários, sem dinheiro
    

    View Slide

11. Voltando para o JS...
    

    View Slide

12. Como o JS impacta a performance?
    

    View Slide

13. No back-end:
    Demora para responder as requests
    

    View Slide

14. No front-end:
    Demora para carregar a página
    

    View Slide

15. Como melhorar?
    

    View Slide

16. Dicas práticas ;)
    

    View Slide

17. 1. dentro do body<br/>

    View Slide

18. 2. Evite o número de .<br/>

    View Slide

19. Reduza os bloqueios.
    Reduza o número de requisições
    HTTP.
    Não use ou reduza scripts inline
    

    View Slide

20. Minifique e concatene
    os arquivos .js
    

    View Slide

21. Gulp
    

    View Slide

22. 3. Use async/defer
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

25. E se usar os dois?
    Nesse caso, o async prevalece e o defer é ignorado.
    

    View Slide

26. 4. Reduza pesquisa de domínio
    

    View Slide

27. 5. Modularize
    

    View Slide

28. Variáveis locais são mais rápidas de
    acessar do que variáveis fora do
    escopo.
    Nada de variáveis globais.
    

    View Slide

29. 6. Remova variáveis inúteis
    

    View Slide

30. 7. Só use loops se necessário
    

    View Slide

31. 8. Guarde o tamanho do Array
    

    View Slide

32. Em vez de :
    Use:
    

    View Slide

33. Evite o loop for-in, a menos que
    você precise iterar sobre uma série
    de objetos com número de
    propriedades desconhecido.
    

    View Slide

34. 9. Reduza acesso ao DOM
    

    View Slide

35. View Slide

36. View Slide

37. View Slide

38. View Slide

39. 10. Use criação “literal” de
    arrays/objetos
    

    View Slide

40. Em vez de :
    

    View Slide

41. Use:
    

    View Slide

42. Em vez de :
    

    View Slide

43. Use:
    

    View Slide

44. Como mensurar?
    

    View Slide

45. Benchmarking
    

    View Slide

46. View Slide

47. https://jsperf.com
    

    View Slide

48. Profiling
    

    View Slide

49. View Slide

50. View Slide

51. Que tal começar a pensar em
    performance durante o
    desenvolvimento?
    

    View Slide

52. Obrigada :D
    https://amandavilela.com
    

    View Slide

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/
    

    View Slide