Portuguese, Brazilian subtitles

← Desempenho computacional

Get Embed Code
4 Languages

Showing Revision 7 created 03/09/2014 by Fran Ontanaya.

  1. O segundo de nossos 3 pilares
    será o desempenho computacional.
  2. E para ter uma noção de como seu aplicativo
  3. realmente emprega seu tempo
    durante um determinado intervalo
  4. você terá de checar a aba Timeline
    no Chrome DevTools.
  5. Isso opera carregando a linha do tempo.
  6. Clique neste lindo botão de gravar
    aqui embaixo, e então a mágica acontecerá.
  7. Então, vamos dar uma olhada
    em como isso acontece no Biolab Disaster.
  8. Se eu inicio o jogo, ele começa bem tranquilo.
  9. Agora, se aperto o botão de gravar aqui embaixo
  10. dá para ver que está registrando
    todas as informações dos eventos
  11. que estão ocorrendo enquanto o
    jogo se desenrola.
  12. Agora, não estou fazendo nada,
    quero destacar isso, e mesmo assim
  13. os eventos estão sendo iniciados.
    Vamos então dar uma olhada
  14. no que realmente está acontecendo
    debaixo do pano aqui.
  15. Então, se aumento isso, posso ver
    o número de eventos dentro da minha janela
  16. e detalhar o que está acontecendo.
    Tenho, então, um quadro de animação aqui.
  17. Se o expando, é possível ver que existe
    realmente uma solicitação
  18. de quadro de animação
    que ocorreu naquele momento.
  19. Agora, você vai perceber que, aqui embaixo
  20. existem diferentes tipos
    de caixas de seleção
  21. para filtrar os eventos
    que você está vendo.
  22. E cada uma tem uma cor respectiva.
    Por exemplo, carregar é azul,
  23. criação de scripts é dourado,
    renderização é púrpura
  24. e colorização é verde.
    Então, se mudo para colorização
  25. é possível ver que esses eventos
    na verdade desaparecem da linha do tempo.
  26. Agora, fiz outra rápida captura
    enquanto você não estava olhando.
  27. Vi que você se distraiu
    para pegar amendoins do pacote.
  28. Se eu arrastar minha janela
    de visibilidade para outra parte
  29. da linha do tempo, posso ver que existe
    de fato um bloquinho aqui
  30. que parece ser mais largo
    que todos os outros à sua volta
  31. o que implica que existem scripts
    sendo criados aqui entre nossas janelas
  32. que estão levando mais tempo
    que os outros quadros.
  33. Aqui embaixo, temos uma lista
    de eventos que ocorreram.
  34. E, além disso, como você se lembra,
  35. esses pequenos triângulos
    que permitem ver dentro do evento.
  36. Aqui do lado, podemos ver que
  37. temos a mesma animação
    Frame Fire que vimos antes
  38. mas a nova, que estamos mostrando,
  39. é um evento GC, no qual 1,4 MB
    de dados foram coletados.
  40. Passando o mouse por cima,
    uma caixa de diálogo mostra que
  41. 2.7 milissegundos de nossa
    reserva de quadros
  42. foram usados para fazer
    um evento de coleta de lixo.
  43. É por isso que você
    pode ver que este bloco
  44. é na realidade maior que o bloco ao seu
    lado pois temos 2.7 milissegundos
  45. adicionais que foram usados
    para um evento de coleta de lixo.
  46. Podemos de fato ver isso espelhado
  47. ao clicar na opção de memória
    para a linha do tempo.
  48. Assim, o que vai de fato ser mostrado
    é um gráfico linear
  49. dos locais em que as alocações
    estão realmente ocorrendo.
  50. E, veja só, dá para ver entre nossas
    2 fendas que, quando esse evento GC ocorre
  51. a quantidade de memória alocada
    em nosso aplicativo despenca
  52. mostrando assim a memória liberada
    na coleta do lixo.
  53. Agora, quero mostrar como isso funciona
    ao vivo, pois é realmente interessante
  54. de ver como um aplicativo
    realmente aloca sua memória.
  55. Então, dá para ver que, ao longo do tempo,
    este aplicativo, quando não faço nada
  56. na tela, está alocando cerca de 1 MB
    a cada segundo, mais ou menos.
  57. E então dá para ver que o coletor de lixo
    entra em ação e libera muito desses dados.
  58. Esse tipo de padrão
    serrilhado que vemos aqui
  59. ao longo da linha do tempo, é muito comum
    em diversos aplicativos da web
  60. que fazem muita
    alocação dinâmica de objetos.
  61. Tem um artigo que escrevi
    sobre HTML5 Rocks
  62. que detalha diferentes maneiras de lidar
    com esse tipo de padrão serrilhado
  63. usando acervos de objetos.
    Mas não vamos entrar nisso agora.
  64. Vamos manter o foco
    no que está diante de nós.