Como otimizar a performance da sua aplicação JS

Como otimizar a performance da sua aplicação JS

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

3ab1d4a265ad9289afe10956a78271df?s=128

Amanda Vilela

October 26, 2017
Tweet

Transcript

  1. Amanda Vilela - IBM TechDay

  2. Amanda Vilela

  3. None
  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

  35. None
  36. None
  37. None
  38. None
  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

  46. None
  47. https://jsperf.com

  48. Profiling

  49. None
  50. None
  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/