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

1. Title:
   Funcionamiento de cálculos
2. Description:

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