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. 3.
  2. 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
  3. 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/
  4. 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
  5. 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
  6. 21.
  7. 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.
  8. 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.
  9. 28.

    Variáveis locais são mais rápidas de acessar do que variáveis

    fora do escopo. Nada de variáveis globais.
  10. 33.

    Evite o loop for-in, a menos que você precise iterar

    sobre uma série de objetos com número de propriedades desconhecido.
  11. 35.
  12. 36.
  13. 37.
  14. 38.
  15. 41.
  16. 43.
  17. 46.
  18. 48.
  19. 49.
  20. 50.
  21. 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/