Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.

Amanda Vilela

October 26, 2017
Tweet

More Decks by Amanda Vilela

Other Decks in Programming

Transcript

  1. 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
  2. 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/
  3. 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
  4. 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
  5. 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.
  6. 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.
  7. Variáveis locais são mais rápidas de acessar do que variáveis

    fora do escopo. Nada de variáveis globais.
  8. Evite o loop for-in, a menos que você precise iterar

    sobre uma série de objetos com número de propriedades desconhecido.
  9. 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/