Spanish, Mexican subtitles

← Funcionamiento de cálculos

Get Embed Code
4 Languages

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

  1. El segundo de nuestros 3 pilares será
  2. el funcionamiento de cálculos. Y para
    darles una idea de cómo su aplicación
  3. está realmente usando el tiempo durante
    un fotograma, lo que realmente quieres
  4. es revisar la pestaña de cronología dentro de
    las herramientas del programador Chrome.
  5. Cómo funciona, es cargando en
    la cronología, pulsa este precioso
  6. botón de grabación aquí abajo y
    mira el mágico despliegue.
  7. Vamos a echar un vistazo a ver
    cómo te desenvuelves con
  8. Bioland Disaster. Si empiezo el juego,
    aumenta muy fácilmente.
  9. Cuando presiono el botón de grabación aquí abajo,
  10. puedes observar que está registrando toda la información
    de los eventos que se están llevando a cabo
  11. mientras el juego está en funcionamiento. Ahora
    no estoy haciendo nada, quiero destacar
  12. que sin embargo, los eventos están
    lanzándose en realidad.
  13. Así que vamos a ver que está pasando
    realmente en su rendimiento.
  14. Si aumento esto, puedo ver el número de
    eventos dentro de mi ventana
  15. y profundizar sobre qué esta pasando.
    Esto es un cuadro de animación.
  16. Si expando esto, puedes ver que hay una
    petición de encuadre de animación
  17. que se ha producido en este punto.
  18. Podrás observar que en la parte inferior aquí
  19. hay diferentes tipos de casillas para filtrar
  20. qué eventos estás observando.
  21. Cada uno tiene su respectivo color.
    Por ejemplo, cargar
  22. es azul, encriptar dorado, la representación
    morada y pintar es verde.
  23. Si altero la pintura
  24. puedes ver que estos eventos
    desaparecen de la cronología.
  25. He hecho una pequeña captura
    mientras no estabas mirando,
  26. te he visto ir a por cacahuetes de la bolsa.
  27. Si deslizo la visibilidad de mi ventana a
    otra parte de la cronología,
  28. puedes observar que hay un pequeño
    bloque aquí que parece ser
  29. más ancho que los demás bloques que lo rodean,
  30. lo que esto implica es que hay una especie de encriptamiento entre nuestras ventanas aquí
  31. que está llevando más tiempo que a los
    demás cuadros. Debajo de nosotros
  32. tenemos una lista de eventos que han ocurrido,
    además como recordarán
  33. estos pequeños triángulos que nos
    permiten profundizar en el evento.
  34. Aquí al lado, puedes ver que
  35. tenemos la misma animación "Frame Fire" que
    hemos visto antes, pero
  36. la nueva que se nos muestra es un "GC Event",
  37. donde se recolectan 1,4 megabytes de datos.
  38. Filtrándose se muestra un diálogo
    desplegable que lleva
  39. 2,7 milisegundos, fuera de nuestra
    capacidad de cuadro para hacer
  40. un evento de recogida de basura. Esa es la razón
    por la que puede ver que este bloque aquí
  41. es más grande que el bloque
    al lado de este, porque
  42. tenemos 2,7 milisegundos extra que hacen
  43. un evento de recogido de basura.
    Podemos verlo reflejado,
  44. clicando en la opción de memoria sobre la cronología.
  45. Lo que nos va a mostrar ahora
    esta es un gráfico linear
  46. donde se están llevando a cabo las
    asignaciones, y para su sorpresa,
  47. puedes ver entre nuestros 2 divets aquí,
    que cuando ocurre este evento GC
  48. la cantidad de memoria asignada
    en nuestra aplicación cae,
  49. mostrándonos que la recolección
    de basura libera memoria.
  50. Ahora quiero mostraros como funciona en
    directo. Es muy interesante de ver.
  51. Cómo una aplicación, realmente asigna su memoria.
  52. Puedes ver con el tiempo, que cuando
    no hago nada en la pantalla,
  53. están asignados alrededor de 1 megabyte
    por segundo más o menos.
  54. Y después puedes ver que el recolector
    de basura decrece y libera
  55. muchos datos. Este tipo de patrón de dientes de sierra
  56. que estás viendo a lo largo de la
    cronología aquí, es muy común
  57. en diferentes aplicaciones web, esto hace que
    la asignación de objetos sea más dinámica.
  58. Hay un artículo que escribí en HTML 5 Rocks que
    detalla las diferentes formas
  59. para abordar este tipo de patrón de
    dientes de sierra, utilizando
  60. agrupaciones de objetos. Pero
    no vamos a tratar eso ahora.
  61. Vamos a centrarnos en lo que tenemos enfrente.