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. |