Referencia del evento en el cronograma

Meggin Kearney

Flavio Copes

El modo de eventos de la línea de tiempo muestra todos los eventos activados mientras se realiza una grabación. Usa la referencia de eventos del cronograma para obtener más información sobre cada tipo de evento del cronograma.

Propiedades comunes de eventos de la línea de tiempo

Algunos detalles están presentes en eventos de todos los tipos, mientras que otros solo se aplican a ciertos tipos de eventos. En esta sección, se enumeran las propiedades comunes a diferentes tipos de eventos. Las propiedades específicas de ciertos tipos de eventos se enumeran en las referencias de esos tipos de eventos que se indican a continuación.

Propiedad	Cuándo se muestra
Tiempo agregado	En el caso de los eventos con eventos anidados, el tiempo que tarda cada categoría de eventos.
Pila de llamadas	En el caso de los eventos con eventos secundarios, el tiempo que tarda cada categoría de eventos.
Tiempo de CPU	Indica cuánto tiempo de CPU tomó el evento grabado.
Detalles	Otros detalles sobre el evento
Duración (en la marca de tiempo)	Es el tiempo que tardó en completarse el evento con todos sus elementos secundarios. La marca de tiempo es la hora en que ocurrió el evento, en relación con el momento en que comenzó la grabación.
Tiempo individual	Indica cuánto tiempo tardó el evento sin ninguno de sus elementos secundarios.
Tamaño de montón usado	Es la cantidad de memoria que usa la aplicación cuando se registró el evento y el cambio delta (+/-) en el tamaño del montón utilizado desde el último muestreo.

Cargando eventos

En esta sección, se enumeran los eventos que pertenecen a la categoría de carga y sus propiedades.

Evento	Descripción
Cómo analizar HTML	Chrome ejecutó su algoritmo de análisis de HTML.
Finalizar la carga	Se completó una solicitud de red.
Cómo recibir datos	Se recibieron datos de una solicitud. Habrá uno o más eventos de recepción de datos.
Recibir respuesta	La respuesta HTTP inicial de una solicitud.
Enviar solicitud	Se envió una solicitud de red.

Cómo cargar propiedades de eventos

Propiedad	Descripción
Recurso	Es la URL del recurso solicitado.
Vista previa	Vista previa del recurso solicitado (solo imágenes).
Método de solicitud	Es el método HTTP que se usó para la solicitud (GET o POST, por ejemplo).
Código de estado	Código de respuesta HTTP.
Tipo de MIME	Es el tipo MIME del recurso solicitado.
Longitud de los datos codificados	Es la longitud del recurso solicitado, expresada en bytes.

Eventos de secuencias de comandos

En esta sección, se enumeran los eventos que pertenecen a la categoría de secuencias de comandos y sus propiedades.

Evento	Descripción
Se activó un marco de animación	Se activó un fotograma de animación programado y se invocó su controlador de devolución de llamada.
Cancela el marco de animación	Se canceló un marco de animación programado.
Evento de recolección de elementos no utilizados	Se produjo una recolección de elementos no utilizados.
DOMContentLoaded	El navegador activó DOMContentLoaded. Este evento se activa cuando se carga y analiza todo el contenido del DOM de la página.
Evaluar la secuencia de comandos	Se evaluó una secuencia de comandos.
Evento	Un evento de JavaScript ("mousedown" o "key", por ejemplo).
Llamada a función	Se realizó una llamada a la función de JavaScript de nivel superior (solo aparece cuando el navegador ingresa al motor de JavaScript).
Instalar temporizador	Se creó un temporizador con setInterval() o setTimeout().
Solicita un marco de animación	Una llamada a requestAnimationFrame() programó un marco nuevo
Quitar temporizador	Se borró un cronómetro creado anteriormente.
Hora	Una secuencia de comandos llamada console.time()
Hora de finalización	Una secuencia de comandos llamada console.timeEnd()
Se activó el temporizador	Se activó un temporizador programado con setInterval() o setTimeout().
Cambio en el estado listo de XHR	Cambió el estado listo de un XMLHTTPRequest.
Carga de XHR	Se terminó de cargar un XMLHTTPRequest.

Cómo crear propiedades de eventos de secuencias de comandos

Propiedad	Descripción
ID del temporizador	Es el ID del temporizador.
Tiempo de espera	Es el tiempo de espera especificado por el temporizador.
Se repite	Es un valor booleano que especifica si el temporizador se repite.
Llamada a función	Una función que se invocó.

Renderización de eventos

En esta sección, se enumeran los eventos que pertenecen a la categoría Renderización y sus propiedades.

Evento	Descripción
Invalida el diseño	Un cambio en el DOM invalidó el diseño de la página.
Diseño	Se ejecutó un diseño de página.
Cómo volver a calcular el estilo	Chrome volvió a calcular los estilos de los elementos.
Desplazamiento	Se desplazó el contenido de la vista anidada.

Renderización de propiedades de eventos

Propiedad	Descripción
Invalidación del diseño	Para los registros de diseño, el seguimiento de pila del código que causó que se invalidara el diseño
Nodos que necesitan diseño	Para los registros de diseño, es la cantidad de nodos que se marcaron como que necesitaban diseño antes de que comenzara el nuevo diseño. Por lo general, estos son los nodos que el código del desarrollador invalidó, además de una ruta hacia arriba para volver a diseñar la raíz.
Tamaño del árbol de diseño	Para los registros de diseño, la cantidad total de nodos debajo de la raíz de rediseño (el nodo en el que Chrome inicia el rediseño).
Alcance del diseño	Los valores posibles son "Parcial" (el límite de nuevo diseño es una parte del DOM) o "Documento completo".
Elementos afectados	Para los registros de Recalcular estilo, la cantidad de elementos afectados por un recálculo de estilo.
Invalidación de estilos	Para los registros de estilo Recalculate, proporciona el seguimiento de pila del código que causó la invalidación del estilo.

Eventos de pintura

En esta sección, se enumeran los eventos que pertenecen a la categoría Pintura y sus propiedades.

Evento	Descripción
Capas compuestas	Capas de imágenes compuestas del motor de renderización de Chrome
Decodificación de imágenes	Se decodificó un recurso de imagen.
Cambiar el tamaño de la imagen	Se cambió el tamaño de una imagen desde sus dimensiones nativas.
Pintura	Se pintaron capas compuestas en una región de la pantalla. Si colocas el cursor sobre un registro de Paint, se destacará la región de la pantalla que se actualizó.

Propiedades del evento de pintura

Propiedad	Descripción
Ubicación	Para los eventos de pintura, las coordenadas x e y del rectángulo de pintura
Dimensiones	Para los eventos de pintura, la altura y el ancho de la región pintada.