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 de la línea de tiempo para obtener más información sobre cada tipo de evento de la línea de tiempo.

Propiedades comunes de los eventos del cronograma

Algunos detalles están presentes en los 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 para esos tipos de eventos a continuación.

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

Eventos de carga

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

Evento	Descripción
Analizar HTML	Chrome ejecutó su algoritmo de análisis HTML.
Finalizar la carga	Se completó una solicitud de red.
Recibir datos	Se recibieron los datos de una solicitud. Habrá uno o más eventos del tipo Recibir datos.
Recibir respuesta	Es la respuesta HTTP inicial de una solicitud.
Enviar solicitud	Se envió una solicitud de red.

Cargando propiedades del evento

Propiedad	Descripción
Recurso	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 usa para la solicitud (por ejemplo, GET o POST).
Código de estado	Código de respuesta HTTP.
Tipo de MIME	Es el tipo de MIME del recurso solicitado.
Longitud de datos codificados	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 Creación de secuencias de comandos y sus propiedades.

Evento	Descripción
Se activó el marco de animación	Se activó un marco de animación programado y se invocó su controlador de devolución de llamada.
Cancelar marco de animación	Se canceló un fotograma 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 DOM de la página.
Evaluar la secuencia de comandos	Se evaluó una secuencia de comandos.
Evento	Un evento de JavaScript ("mousedown" o "clave", por ejemplo).
Llamada a función	Se realizó una llamada a función de JavaScript de nivel superior (solo aparece cuando el navegador ingresa al motor JavaScript).
Instalar temporizador	Se creó un temporizador con setInterval() o setTimeout().
Marco de animación de solicitud	Una llamada a requestAnimationFrame() programó un nuevo fotograma
Quitar temporizador	Se borró un temporizador creado anteriormente.
Tiempo	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	El estado listo de una XMLHTTPRequest cambió.
Carga de XHR	Se terminó de cargar un XMLHTTPRequest.

Propiedades de los eventos de secuencias de comandos

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

Eventos de renderización

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

Evento	Descripción
Invalidar diseño	El diseño de la página se invalidó debido a un cambio del DOM.
Diseño	Se ejecutó un diseño de página.
Volver a calcular el estilo	Chrome volvió a calcular los estilos de los elementos.
Desplázate	Se desplazó el contenido de la vista anidada.

Propiedades de los eventos de renderización

Propiedad	Descripción
Diseño invalidado	Para los registros de diseño, es el seguimiento de pila del código que causó la invalidación del diseño.
Nodos que necesitan diseño	Para los registros de diseño, la cantidad de nodos que se marcaron como que necesitan diseño antes de que comenzara el rediseño. Por lo general, son los nodos que el código del desarrollador invalidó, además de una ruta de acceso ascendente para rediseñar la raíz.
Tamaño del árbol de diseño	Para los registros de diseño, la cantidad total de nodos en 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 rediseño es una parte del DOM) o "Todo el documento".
Elementos afectados	En los registros de estilo Volver a calcular, la cantidad de elementos afectados por un nuevo cálculo de estilo.
Estilos invalidados	En los registros de estilo Volver a calcular, proporciona el seguimiento de pila del código que causó la invalidación de estilo.

Eventos de pintura

En esta sección, se enumeran los eventos que pertenecen a la categoría de 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.
Cambio de tamaño de la imagen	Se cambió el tamaño de una imagen a partir de sus dimensiones nativas.
Pintura	Las capas compuestas se pintaron en una parte de la pantalla. Si colocas el cursor sobre un registro de pintura, se destaca la región de la pantalla que se actualizó.

Propiedades de los eventos de pintura

Propiedad	Descripción
Location	En el caso de los eventos Paint, son las coordenadas x e y del rectángulo de pintura.
Dimensiones	En el caso de los eventos de pintura, la altura y el ancho de la región pintada.