cronometroEsta época, entre otras muchas otras cosas, estoy trabajando en un nuevo libro de JavaScript que verá la luz en los próximos meses. Uno de los capítulos se centra en la depuración de código JavaScript usando las herramientas que ofrecen de serie los navegadores. Entre éstas, una muy interesante es el “Profiler”, disponible tanto en Chrome como en Internet Explorer, y en Firefox a través de Firebug.

El profiler tiene varias sub-herramientas, como el analizador de tiempos de ejecución que nos permite obtener información detallada y estadísticas sobre los tiempos de ejecución de nuestra página, y sobre sus consumos de memoria, identificando así posibles cuellos de botella, funciones poco optimizadas, etc... E incluso bugs en el motor de renderizado de las páginas (Se han dado casos).

En el libro me estoy centrando en las herramientas de desarrollo de Google Chrome, ya que son más completas que las que trae Explorer y además viene “de serie” con el navegador, sin necesidad de instalar nada (aunque los tres están realmente bien). Su analizador de tiempo ofrece mediciones de “wall time” y de “CPU time”.

¿A qué se refiere con estos términos?

En el caso de “wall time” el nombre viene de “reloj en la pared”, o el tiempo transcurrido que obtendríamos si hubiésemos medido observando un reloj en la pared. Se refiere al tiempo realmente transcurrido, es decir, al tiempo que mediríamos si usásemos un cronómetro, en contraste con el tiempo de CPU que se refiere al tiempo que ha empleado la CPU en ejecutar la tarea, que no tiene porque coincidir con el tiempo total de ejecución (y de hecho no suele coincidir).

Veámoslo con un ejemplo visual. He lanzado el analizador de tiempos de una página para medir todos los eventos de ésta: desde los tiempos de petición o descarga hasta la ejecución de las extensiones del navegador que tengo instaladas. Todo queda registrado y medido, y puedo verlo de forma gráfica en la pantalla:

TimeLineChrome

Pulsa para aumentar

Como podemos observar, las barras de tiempo en el listado de la parte central muestran tres tonalidades diferentes. Si nos fijamos por ejemplo en la que tengo recuadrada de color azul vemos que hay tres tonos de azul que van desde el más oscuro al más claro. Cada tonalidad se refiere a un tiempo concreto:

  • Tonalidad oscura: wall time del evento en milisegundos. Es decir el tiempo real que ha llevado procesar el evento específcamente.
  • Tonalidad intermedia: es el tiempo de CPU que ha usado la tarea y sus subtareas asociadas (desplegadas en la captura de pantalla anterior para que se puedan ver un poco).
  • Tonalidad clara: tiempo real (wall time) empleado en la realidad para procesar el evento y todos sus subeventos asociados.

Creo que las gráficas son muy reveladoras. En este caso, por ejemplo, el evento principal es la carga de la página completa, que incluye la petición, la respuesta el procesado del HTML, la ejecución de funciones de JavaScript, el cálculo de los CSS, el renderizado de la página...

El primer trocito en azul oscuro es el tiempo que de verdad ha llevado realizar la petición de la página, que es el evento en e que no estamos fijando. Pero esta petición desencadena una serie de eventos derivados (causa-efecto) que son todos los mencionados, así que el tiempo total que lleva procesar la página completa es la barra azul clarita, mucho más larga.

Sin embargo es interesante ver que la barra intermedia de color azul ni oscuro ni claro indica el tiempo de CPU para todas las tareas. El tiempo de CPU es el tiempo en el que la CPU del ordenador ha estado ocupada procesando ese evento en concreto.

En un sistema operativo normal el tiempo de procesamiento de una CPU se reparte entre todas las tareas que se están ejecutando al mismo tiempo en el sistema. Y no solo se refieren a las que has lanzado tú mismo y los programas que estás ejecutando sino que todos los procesos propios del sistema operativo (¡y hay muchos!) se están ejecutando también en segundo plano y reclaman tiempo del procesador.Así que el tiempo se reparte entre todas las tareas y no de manera seguida.

Si queremos ejecutar tres tareas de 200, 300 y 500 milisegundos en un procesador tenemos dos estrategias:

  1. Ejecutarlas una detrás de otra: tardaremos un segundo en total (1000 milisegundos) ya que sólo hay que ir por orden y al terminar una empezar la siguiente. Tiene la pega de que hasta que una de ellas termina las otras se quedan en espera. Imagina que son tiempos más largos (segundos y no milisegundos): tendríamos un sistema que parecería que apenas se mueve.
  2. Ejecutarlas en paralelo: esto es lo que hacen los sistemas operativos modernos. Para ello reparten el tiempo de CPU entre todas las tareas, cambiando de una a otra muy rápidamente. Esto da la sensación de que se están ejecutando a la vez, pero lo cierto es que se va alternando entre ellas muy rápido, lo cual conlleva gastar ciclos de CPU en coordinar esas transiciones y otras cuestiones. El tiempo total de ejecución supera la suma de los tiempos individuales de las tareas. Tardamos más pero tenemos la ventaja de poder hacer más cosas a la vez.

Lo que explico es una versión simplificada de lo que pasa, por supuesto, pero nos da una idea de cómo funciona un ordenador por dentro. Si esto lo llevamos a un sistema real con decenas de procesos ejecutándose a la vez, vemos que la multitarea añade una carga importante a la CPU. Este es uno de los motivos (aparte de las limitaciones físicas) de que la tendencia actual es a tener sistemas con varios núcleos que puedan procesar en paralelo, en lugar de tratar de aumentar la velocidad del procesador como se hacía hace unos años.

Así que la barra de tonalidad intermedia lo que nos indica es el tiempo efectivo que ha consumido la CPU con nuestra tarea y sus derivadas, pero que al haber tenido que compartir con otras tareas (nuestras y del sistema operativo) hace que el proceso total tarde en finalizarse mucho más tiempo.

¡Espero que te resulte útil!

Para saber más: JavaScript profesional para desarrolladores y diseñadores web

💪🏻 ¿Este post te ha ayudado?, ¿has aprendido algo nuevo?
Pues NO te pido que me invites a un café... Te pido algo más fácil y mucho mejor

Escrito por un humano, no por una IA