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