Referencia de las funciones de rendimiento

Kayce Basques

Sofia Emelianova

Esta página es una referencia completa de las funciones de Chrome DevTools relacionadas con el análisis del rendimiento.

Consulta Cómo analizar el rendimiento del tiempo de ejecución para ver un instructivo guiado sobre cómo analizar el rendimiento de una página con Chrome DevTools.

Cómo registrar el rendimiento

Puedes registrar el tiempo de ejecución o la carga de rendimiento.

Cómo registrar el rendimiento del tiempo de ejecución

Registra el rendimiento del tiempo de ejecución cuando quieras analizar el rendimiento de una página mientras se ejecuta, en lugar de cargarla.

1. Ve a la página que quieres analizar.
2. Haz clic en la pestaña Rendimiento en DevTools.

3. Haz clic en Grabar .

   

4. Interactuar con la página DevTools registra toda la actividad de la página que se produce como resultado de tus interacciones.

5. Vuelve a hacer clic en Grabar o en Detener para detener la grabación.

Cómo registrar el rendimiento de la carga

Registra el rendimiento de carga cuando quieras analizar el rendimiento de una página mientras se carga, en lugar de ejecutarse.

1. Ve a la página que quieres analizar.
2. Abre el panel Rendimiento de DevTools.

3. Haz clic en Comenzar a generar perfiles y volver a cargar la página . Primero, DevTools navega a about:blank para borrar las capturas de pantalla y los registros restantes. Luego, DevTools registra las métricas de rendimiento mientras se vuelve a cargar la página y, luego, detiene automáticamente la grabación unos segundos después de que finaliza la carga.

   

DevTools acerca automáticamente la parte de la grabación en la que se produjo la mayor parte de la actividad.

En este ejemplo, el panel Rendimiento muestra la actividad durante la carga de una página.

Cómo tomar capturas de pantalla durante la grabación

Habilita la casilla de verificación Capturas de pantalla para capturar una captura de pantalla de cada fotograma mientras grabas.

Consulta Cómo ver una captura de pantalla para aprender a interactuar con ellas.

Cómo forzar la recolección de elementos no utilizados durante la grabación

Mientras grabas una página, haz clic en el mop Collect garbage para forzar la recolección de elementos no utilizados.

Mostrar la configuración de grabación

Haz clic en Capture settings para exponer más parámetros de configuración relacionados con la forma en que DevTools captura las grabaciones de rendimiento.

Inhabilita las muestras de JavaScript

De forma predeterminada, la pista Principal de una grabación muestra pilas de llamadas detalladas de las funciones de JavaScript a las que se llamó durante la grabación. Para inhabilitar estas pilas de llamadas, haz lo siguiente:

1. Abre el menú Configuración de captura. Consulta Cómo mostrar la configuración de grabación.
2. Habilita la casilla de verificación Disable JavaScript Samples.
3. Haz una grabación de la página.

En las siguientes capturas de pantalla, se muestra la diferencia entre inhabilitar y habilitar muestras de JavaScript. La pista Principal de la grabación es mucho más corta cuando se inhabilita el muestreo, ya que omite todas las pilas de llamadas de JavaScript.

En este ejemplo, se muestra una grabación con muestras de JS inhabilitadas.

En este ejemplo, se muestra una grabación con muestras de JS habilitadas.

Limita la red durante la grabación

Para reducir la velocidad de la red durante la grabación, haz lo siguiente:

1. Abre el menú Configuración de captura. Consulta Cómo mostrar la configuración de grabación.
2. Establece Red en el nivel de limitación elegido.

Limita el uso de la CPU durante la grabación

Para regular el uso de la CPU durante la grabación, haz lo siguiente:

1. Abre el menú Configuración de captura. Consulta Cómo mostrar la configuración de grabación.
2. Establece CPU en el nivel de limitación elegido.

La limitación depende de las capacidades de tu computadora. Por ejemplo, la opción de 2 veces más lenta hace que la CPU funcione 2 veces más lenta que su capacidad habitual. DevTools no puede simular realmente las CPUs de los dispositivos móviles, ya que la arquitectura de los dispositivos móviles es muy diferente de la de las computadoras de escritorio y las laptops.

Habilita las estadísticas del selector CSS

Para ver las estadísticas de los selectores de reglas de CSS durante los eventos de Recalculate Style de larga duración, haz lo siguiente:

1. Abre el menú Configuración de captura. Consulta Cómo mostrar la configuración de grabación.
2. Marca la casilla de verificación Habilitar las estadísticas del selector CSS.

Para obtener más detalles, consulta cómo analizar el rendimiento del selector CSS durante los eventos de Recalculate Style.

Habilita la instrumentación avanzada de procesamiento

Para ver la instrumentación de pintura detallada, haz lo siguiente:

1. Abre el menú Configuración de captura. Consulta Cómo mostrar la configuración de grabación.
2. Marca la casilla de verificación Habilitar la instrumentación avanzada de procesamiento.

Para obtener información sobre cómo interactuar con la información de pintura, consulta Cómo ver las capas y Cómo ver el generador de perfiles de pintura.

Emula la simultaneidad del hardware

Para probar el rendimiento de la aplicación con diferentes cantidades de núcleos de procesador, puedes configurar el valor que informa la propiedad navigator.hardwareConcurrency. Algunas aplicaciones usan esta propiedad para controlar el grado de paralelismo de su aplicación, por ejemplo, para controlar el tamaño del grupo de pthread de Emscripten.

Para emular la simultaneidad del hardware, haz lo siguiente:

1. Abre el menú Configuración de captura. Consulta Cómo mostrar la configuración de grabación.
2. Marca Hardware concurrency y establece la cantidad de núcleos en el cuadro de entrada.

DevTools muestra un ícono de advertencia junto a la pestaña Rendimiento para recordarte que está habilitada la emulación de simultaneidad de hardware.

Para volver al valor predeterminado de 10, haz clic en el botón Revertir .

Cómo guardar una grabación

Para guardar una grabación, haz clic con el botón derecho y selecciona Guardar perfil.

Cómo cargar una grabación

Para cargar una grabación, haz clic con el botón derecho y selecciona Load Profile.

Borra la grabación anterior

Después de hacer una grabación, presiona Borrar grabación para borrarla del panel Rendimiento.

Cómo analizar una grabación de rendimiento

Después de registrar el rendimiento del entorno de ejecución o registrar el rendimiento de la carga, el panel Rendimiento proporciona muchos datos para analizar el rendimiento de lo que acaba de suceder.

Navega por la grabación

Para inspeccionar de cerca tu grabación de rendimiento, puedes seleccionar una parte de una grabación, desplazar un gráfico de llama largo, acercar y alejar la imagen, y usar el pan de migas para saltar entre los niveles de zoom.

Selecciona una parte de la grabación

En la barra de acción del panel Rendimiento y en la parte superior de la grabación, puedes ver la sección Descripción general del cronograma con los gráficos CPU y NET.

Para seleccionar una parte de una grabación, mantén presionado y, luego, arrastra hacia la izquierda o la derecha en la descripción general del cronograma.

Para seleccionar una parte con el teclado, sigue estos pasos:

1. Enfoca la pista Main o cualquiera de sus vecinos.
2. Usa las teclas W, A, S y D para acercar, mover hacia la izquierda, alejar y mover hacia la derecha, respectivamente.

Para seleccionar una parte con un panel táctil, haz lo siguiente:

1. Coloca el cursor sobre la sección Descripción general de la Ruta o cualquiera de las rutas (Principal y sus vecinos).
2. Con dos dedos, desliza el dedo hacia arriba para alejar la imagen, hacia la izquierda para moverte hacia la izquierda, hacia abajo para acercar la imagen y hacia la derecha para moverte hacia la derecha.

Crea un pan de migas y salta entre niveles de zoom

La descripción general del cronograma te permite crear varios panes de navegación anidados en sucesión, aumentar los niveles de zoom y, luego, saltar libremente entre ellos.

Para crear y usar el pan de migas, sigue estos pasos:

1. En Descripción general de la línea de tiempo, selecciona una parte de la grabación.
2. Coloca el cursor sobre la selección y haz clic en el botón zoom_in N ms. La selección se expande para llenar la descripción general del cronograma. Se comenzará a crear una cadena de migas de pan en la parte superior de la descripción general de la línea de tiempo.
3. Repite los dos pasos anteriores para crear otro pan de breadcrumbs anidado. Puedes anidar el pan de miga siempre que el rango de selección sea superior a 5 milisegundos.
4. Para ir a un nivel de zoom elegido, haz clic en el elemento de ruta de acceso correspondiente en la cadena que se encuentra en la parte superior de la descripción general de Rutas.

Para quitar los elementos secundarios de una ruta de navegación, haz clic con el botón derecho en la ruta de navegación principal y selecciona Quitar las rutas de navegación secundarias.

Desplázate por un gráfico tipo llama largo

Para desplazar un gráfico de llama largo en la pista Principal o cualquiera de sus vecinos, mantén presionado el clic y, luego, arrástralo en cualquier dirección hasta que aparezca lo que buscas.

Actividades de búsqueda

Puedes buscar en las actividades del segmento Principal y en las solicitudes del segmento Red.

Para abrir un cuadro de búsqueda en la parte inferior del panel Rendimiento, presiona lo siguiente:

• macOS: Comando + F
• Windows y Linux: Control + F

En este ejemplo, se muestra una expresión regular en el cuadro de búsqueda de la parte inferior que encuentra cualquier actividad que comience con E.

Para desplazarte por las actividades que coinciden con tu búsqueda, haz lo siguiente:

• Haz clic en los botones expand_less Anterior o expand_more Siguiente.
• Presiona Mayúsculas + Intro para seleccionar la celda anterior o Intro para seleccionar la siguiente.

El panel Rendimiento muestra una información sobre herramientas sobre la actividad seleccionada en el cuadro de búsqueda.

Para modificar la configuración de la consulta, sigue estos pasos:

• Haz clic en match_case Coincidir mayúsculas y minúsculas para que la búsqueda distinga mayúsculas y minúsculas.
• Haz clic en regular_expression Expresión regular para usar una expresión regular en tu consulta.

Para ocultar el cuadro de búsqueda, haz clic en Cancelar.

Cambia el orden de las pistas y ocúltalas

Para ordenar el registro de rendimiento, puedes cambiar el orden de los segmentos y ocultar los irrelevantes en el modo de configuración de segmentos.

Para mover y ocultar pistas, haz lo siguiente:

1. Para ingresar al modo de configuración, haz clic con el botón derecho en el nombre de una pista y selecciona Configurar pistas.
2. Haz clic en arrow_upward hacia arriba o arrow_downward hacia abajo para mover un segmento hacia arriba o abajo. Haz clic en visibility_off para ocultarlo.
3. Cuando termines, haz clic en Finalizar de configurar los segmentos en la parte inferior para salir del modo de configuración.

Mira el video para ver este flujo de trabajo en acción.

El panel Rendimiento guarda la configuración de seguimiento para los seguimientos nuevos, pero no en las próximas sesiones de DevTools.

Cómo ver la actividad de la conversación principal

Usa el segmento Principal para ver la actividad que se produjo en el subproceso principal de la página.

Haz clic en un evento para ver más información sobre él en la pestaña Resumen. En el panel Rendimiento, se indica el evento seleccionado en azul.

En este ejemplo, se muestra más información sobre el evento de llamada a función get en la pestaña Resumen.

Cómo leer el gráfico tipo llama

El panel Rendimiento representa la actividad del subproceso principal en un gráfico de llama. El eje X representa la grabación a lo largo del tiempo. El eje y representa la pila de llamadas. Los eventos de la parte superior causan los eventos de la parte inferior.

En este ejemplo, se muestra un gráfico de llama en la pista Principal. Un evento click causó una llamada a función anónima. Esta función, a su vez, llamó a onEndpointClick_, que llamó a handleClick_, y así sucesivamente.

El panel Rendimiento asigna colores aleatorios a las secuencias de comandos para dividir el gráfico de llama y hacerlo más legible. En el ejemplo anterior, las llamadas a función de una secuencia de comandos son de color azul claro. Las llamadas de otra secuencia de comandos son de color rosa claro. El amarillo más oscuro representa la actividad de escritura de secuencias de comandos, y el evento púrpura representa la actividad de renderización. Estos eventos de color amarillo y púrpura más oscuros son coherentes en todas las grabaciones.

Las tareas largas también se destacan con un triángulo rojo y con la parte superior a 50 milisegundos sombreada en rojo:

En este ejemplo, la tarea tardó más de 400 milisegundos, por lo que la parte que representa los últimos 350 milisegundos está sombreada en rojo, mientras que los 50 milisegundos iniciales no lo están.

Además, el segmento Principal muestra información sobre los perfiles de CPU que se inician y detienen con las funciones de consola profile() y profileEnd().

Para ocultar el gráfico de llama detallado de las llamadas a JavaScript, consulta Cómo inhabilitar las muestras de JavaScript. Cuando se inhabilitan las muestras de JS, solo se muestran los eventos de alto nivel, como Event (click) y Function Call.

Realiza un seguimiento de los iniciadores de eventos

La ruta de acceso Principal puede mostrar flechas que conectan los siguientes activadores y los eventos que causaron:

• Invalidación del diseño o el estilo: Recalcular estilos o Diseño
• Request Animation Frame -> Animation Frame Fired
• Solicitar devolución de llamada inactiva -> Activar la devolución de llamada inactiva
• Install Timer -> Timer Fired
• Crear WebSocket -> Enviar… y Recibir el protocolo de enlace de WebSocket o Destruir WebSocket

Para ver las flechas, busca un activador o el evento que causó en el gráfico de llama y selecciónalo.

Cuando se selecciona, la pestaña Resumen muestra los vínculos Initiator for para los iniciadores y Initiated by para los eventos que causaron. Haz clic en ellos para saltar entre los eventos correspondientes.

Oculta las funciones y sus elementos secundarios en el gráfico tipo llama

Para ordenar el gráfico tipo llama en el subproceso Principal, puedes ocultar las funciones seleccionadas o sus elementos secundarios:

1. En la pista Principal, haz clic con el botón derecho en una función y elige una de las siguientes opciones o presiona el atajo correspondiente:

   • Ocultar función (H)
   • Ocultar elementos secundarios (C)
   • Ocultar elementos secundarios recurrentes (R)
   • Restablece elementos secundarios (U)
   • Restablece el registro (T)
   • Agregar secuencia de comandos a la lista de elementos ignorados (I)

   

   Aparecerá un botón desplegable arrow_drop_down junto al nombre de la función con elementos secundarios ocultos.

2. Para ver la cantidad de elementos secundarios ocultos, coloca el cursor sobre el botón desplegable arrow_drop_down.

   

3. Para restablecer una función con elementos secundarios ocultos o todo el gráfico de llama, selecciónala y presiona U o haz clic con el botón derecho en cualquier función y selecciona Restablecer seguimiento.

Ignora las secuencias de comandos en el gráfico tipo llama

Para agregar una secuencia de comandos a la lista de elementos ignorados, haz clic con el botón derecho en una secuencia de comandos del gráfico y selecciona Agregar secuencia de comandos a la lista de elementos ignorados.

El gráfico contrae las secuencias de comandos ignoradas, las marca como En la lista de elementos ignorados y las agrega a las reglas de Exclusión personalizada en Configuración Configuración > Lista de elementos ignorados. Las secuencias de comandos omitidas se guardan hasta que las quites del seguimiento o de las reglas de exclusión personalizadas.

Cómo ver actividades en una tabla

Después de grabar una página, no necesitas depender únicamente del segmento Principal para analizar las actividades. DevTools también proporciona tres vistas tabulares para analizar actividades. Cada vista te brinda una perspectiva diferente sobre las actividades:

• Cuando quieras ver las actividades raíz que causan más trabajo, usa la pestaña Árbol de llamadas.
• Cuando quieras ver las actividades en las que se pasó más tiempo directamente, usa la pestaña Bottom-Up.
• Cuando quieras ver las actividades en el orden en que ocurrieron durante la grabación, usa la pestaña Registro de eventos.

Para ayudarte a encontrar lo que buscas más rápido, las tres pestañas tienen botones para filtrar de forma avanzada junto a la barra Filtrar:

• match_case Coincidir mayúsculas y minúsculas.
• regular_expression Expresión regular.
• match_word Coincidir con una palabra completa.

Cada vista tabular del panel Rendimiento muestra vínculos para actividades, como llamadas a funciones. Para ayudarte a depurar, DevTools encuentra las declaraciones de funciones correspondientes en los archivos fuente. Además, si los mapas de origen adecuados están presentes y habilitados, DevTools encuentra automáticamente los archivos originales.

Haz clic en un vínculo para abrir un archivo de origen en el panel Fuentes.

Nota:Las siguientes tres secciones hacen referencia a la misma demostración. Puedes ejecutar la demostración en Demostración de pestañas de actividad y ver el código fuente en GoogleChrome/devtools-samples/perf/activitytabs.html.

Actividades raíz

A continuación, se explica el concepto de actividades raíz que se menciona en las secciones Árbol de llamadas, De abajo hacia arriba y Registro de eventos.

Las actividades raíz son aquellas que hacen que el navegador realice alguna tarea. Por ejemplo, cuando haces clic en una página, el navegador activa una actividad Event como la actividad raíz. Ese Event podría hacer que se ejecute un controlador.

En el gráfico de llama de la pista Principal, las actividades raíz se encuentran en la parte superior del gráfico. En las pestañas Árbol de llamadas y Registro de eventos, las actividades raíz son los elementos de nivel superior.

Consulta la pestaña Árbol de llamadas para ver un ejemplo de actividades raíz.

La pestaña Árbol de llamadas

Usa la pestaña Árbol de llamadas para ver qué actividades raíz generan más trabajo.

La pestaña Árbol de llamadas solo muestra las actividades durante la parte seleccionada de la grabación. Consulta Cómo seleccionar una parte de una grabación para aprender a seleccionar partes.

En este ejemplo, el nivel superior de los elementos de la columna Activity, como Event, Paint y Composite Layers, son actividades raíz. El anidamiento representa la pila de llamadas. En este ejemplo, Event causó Function Call, que causó button.addEventListener, que causó b, y así sucesivamente.

El tiempo propio representa el tiempo que se dedica directamente a esa actividad. Tiempo total representa el tiempo que se pasó en esa actividad o en cualquiera de sus elementos secundarios.

Haz clic en Tiempo personal, Tiempo total o Actividad para ordenar la tabla por esa columna.

Usa el cuadro Filtrar para filtrar los eventos por nombre de actividad.

De forma predeterminada, el menú Agrupación está configurado en Sin agrupación. Usa el menú Agrupación para ordenar la tabla de actividades según varios criterios.

Haz clic en Mostrar pila más pesada para que aparezca otra tabla a la derecha de la tabla Actividad. Haz clic en una actividad para propagar la tabla Pila más pesada. La tabla Pila más pesada muestra qué elementos secundarios de la actividad seleccionada tardaron más tiempo en ejecutarse.

La pestaña Ascendente

Usa la pestaña Bottom-Up para ver qué actividades ocuparon más tiempo en total.

La pestaña Bottom-Up solo muestra las actividades durante la parte seleccionada de la grabación. Consulta Cómo seleccionar una parte de una grabación para aprender a seleccionar partes.

En el gráfico de llama de la pista Main de este ejemplo, puedes ver que casi todo el tiempo se dedicó a ejecutar las tres llamadas a wait(). En consecuencia, la actividad principal en la pestaña Bottom-Up es wait. En el gráfico de llama, el amarillo debajo de las llamadas a wait son, en realidad, miles de llamadas a Minor GC. En consecuencia, puedes ver que, en la pestaña Bottom-Up, la siguiente actividad más costosa es Minor GC.

La columna Tiempo propio representa el tiempo agregado que se pasó directamente en esa actividad, en todas sus ocurrencias.

La columna Tiempo total representa el tiempo total que se dedicó a esa actividad o a cualquiera de sus elementos secundarios.

La pestaña Registro de eventos

Usa la pestaña Registro de eventos para ver las actividades en el orden en que ocurrieron durante la grabación.

La pestaña Registro de eventos solo muestra las actividades durante la parte seleccionada de la grabación. Consulta Cómo seleccionar una parte de una grabación para aprender a hacerlo.

La columna Start Time representa el punto en el que comenzó esa actividad, en relación con el inicio de la grabación. La hora de inicio de 1573.0 ms para el elemento seleccionado en este ejemplo significa que la actividad comenzó 1,573 ms después de que comenzó la grabación.

La columna Tiempo propio representa el tiempo que se dedica directamente a esa actividad.

Las columnas Total de tiempo representan el tiempo que se dedica directamente a esa actividad o a cualquiera de sus elementos secundarios.

Haz clic en Hora de inicio, Tiempo personal o Tiempo total para ordenar la tabla según esa columna.

Usa el cuadro Filtrar para filtrar las actividades por nombre.

Usa el menú Duración para filtrar las actividades que tardaron menos de 1 ms o 15 ms. De forma predeterminada, el menú Duración está configurado en Todas, lo que significa que se muestran todas las actividades.

Inhabilita las casillas de verificación Carga, Escritura de secuencias de comandos, Renderización o Pintura para filtrar todas las actividades de esas categorías.

Ver tiempos

En la pista Timings, consulta marcadores importantes, como los siguientes:

• Primer procesamiento de imagen (FP)
• Primer procesamiento de imagen con contenido (FCP)
• Procesamiento de imagen con contenido más grande (LCP)
• Evento DOMContentLoaded (DCL)
• Evento de carga (L)
• Tus llamadas personalizadas a performance.mark() A continuación, se muestra una marca individual con la información sobre herramientas a los 813.44 ms, etiquetada como Comienzo de la ejecución de JavaScript.
• Tus llamadas personalizadas a performance.measure() A continuación, se muestra un intervalo amarillo etiquetado como Interacción lenta.

Selecciona un marcador para ver más detalles en la pestaña Resumen, incluida la marca de tiempo, el tiempo total, el tiempo propio y el objeto detail. En el caso de las llamadas performance.mark() y performance.measure(), la pestaña también muestra los seguimientos de pila.

Cómo ver las interacciones

Consulta las interacciones de los usuarios en la ruta de interacciones Interacciones para detectar posibles problemas de capacidad de respuesta.

Para ver las interacciones, sigue estos pasos:

1. Abre DevTools, por ejemplo, en esta página de demostración.
2. Abre el panel Rendimiento y empieza una grabación.
3. Haz clic en un elemento (café) y detén la grabación.
4. Busca la pista Interacciones en la línea de tiempo.

En este ejemplo, la pista Interacciones muestra la interacción Puntero. Las interacciones tienen bigotes que indican retrasos de entrada y presentación en los límites de tiempo de procesamiento. Coloca el cursor sobre la interacción para ver una información sobre la herramienta con la demora de entrada, el tiempo de procesamiento y la demora de presentación.

El segmento Interacciones también muestra advertencias de Interaction to Next Paint (INP) para interacciones de más de 200 milisegundos en la pestaña Resumen y en un cuadro de información cuando se coloca el cursor sobre él:

El segmento Interacciones marca las interacciones de más de 200 milisegundos con un triángulo rojo en la esquina superior derecha.

Cómo ver la actividad de la GPU

Consulta la actividad de la GPU en la sección GPU.

Cómo ver la actividad de raster

Consulta la actividad de rasterización en la sección Conjunto de subprocesos.

Cómo analizar los fotogramas por segundo (FPS)

DevTools proporciona varias formas de analizar fotogramas por segundo:

• Usa la sección Frames para ver cuánto tiempo tardó un fotograma en particular.
• Usa el medidor de FPS para obtener una estimación en tiempo real de los FPS a medida que se ejecuta la página. Consulta Cómo ver los fotogramas por segundo en tiempo real con el medidor de FPS.

La sección Frames

En la sección Fotogramas, se indica exactamente cuánto tiempo tardó un fotograma en particular.

Coloca el cursor sobre un marco para ver una información sobre la herramienta con más información sobre él.

En este ejemplo, se muestra una información sobre herramientas cuando colocas el cursor sobre un marco.

La sección Frames puede mostrar cuatro tipos de fotogramas:

1. Marco inactivo (blanco): Sin cambios.
2. Marco (verde): Se renderiza como se espera y a tiempo.
3. Marco presentado de forma parcial (amarillo con un patrón de líneas discontinuas anchas y dispersas). Chrome hizo todo lo posible para renderizar al menos algunas actualizaciones visuales a tiempo. Por ejemplo, en caso de que el trabajo del subproceso principal del proceso de renderización (animación del lienzo) se retrase, pero el subproceso del compositor (desplazamiento) esté a tiempo.
4. Marco descartado (rojo con un patrón de líneas sólidas densas). Chrome no puede renderizar el fotograma en un tiempo razonable.

En este ejemplo, se muestra una información sobre herramientas cuando colocas el cursor sobre un marco presentado de forma parcial.

Haz clic en un marco para ver aún más información sobre él en la pestaña Resumen. DevTools dibuja el marco seleccionado en azul.

Cómo ver las solicitudes de red

Expande la sección Red para ver una cascada de solicitudes de red que se produjeron durante la grabación del rendimiento.

Junto al nombre del segmento Red, hay una leyenda con los tipos de solicitud codificados por colores.

Las solicitudes de bloqueo de renderización se marcan con un triángulo rojo en la esquina superior derecha.

Coloca el cursor sobre una solicitud para ver un cuadro de información con la siguiente información:

• La URL de la solicitud y el tiempo total que tardó en ejecutarse.
• Prioridad o un cambio de prioridad, por ejemplo, Medium -> High.
• Indica si la solicitud es Render blocking o no.
• Un desglose de los tiempos de solicitud, que se describe más adelante

Cuando haces clic en una solicitud, el segmento Red dibuja una flecha desde su iniciador hasta la solicitud.

Además, el panel Rendimiento muestra la pestaña Resumen con más información sobre la solicitud, incluidos, entre otros, los campos Prioridad inicial y Prioridad (final). Si sus valores difieren, la prioridad de recuperación de la solicitud cambió durante la grabación. Para obtener más información, consulta Optimiza la carga de recursos con la API de Fetch Priority.

La pestaña Resumen también muestra un desglose de los tiempos de la solicitud.

La solicitud de www.google.com se representa con una línea a la izquierda (|–), una barra en el medio con una porción oscura y una porción clara, y una línea a la derecha (–|).

Puedes encontrar otro desglose de los tiempos en la pestaña Red. Haz clic con el botón derecho en la solicitud del segmento Red o en su URL en la pestaña Resumen y, luego, en Mostrar en el panel de red. DevTools te dirige al panel Red y selecciona la solicitud correspondiente. Abre la pestaña Tiempo.

A continuación, te mostramos cómo se relacionan estos dos desgloses:

• La línea de la izquierda (|–) incluye todo hasta el grupo de eventos Connection start inclusive. En otras palabras, es todo lo que está antes de Request Sent.
• La parte clara de la barra es Request sent y Waiting for server response.
• La parte oscura de la barra es Content download.
• La línea de la derecha (–|) es el tiempo que se espera para el subproceso principal. La pestaña Red > Tiempo no la muestra.

Cómo ver las métricas de memoria

Habilita la casilla de verificación Memoria para ver las métricas de memoria de la última grabación.

DevTools muestra un nuevo gráfico Memory, sobre la pestaña Summary. También hay un gráfico nuevo debajo del gráfico NET, llamado HEAP. El gráfico HEAP proporciona la misma información que la línea JS heap en el gráfico Memory.

En este ejemplo, se muestran las métricas de memoria sobre la pestaña Resumen.

Las líneas de colores del gráfico se corresponden con las casillas de verificación de colores que se encuentran encima del gráfico. Inhabilita una casilla de verificación para ocultar esa categoría del gráfico.

El gráfico solo muestra la región de la grabación que se seleccionó. En el ejemplo anterior, el gráfico Memoria solo muestra el uso de memoria para el inicio de la grabación, hasta alrededor de la marca de 1,000 ms.

Cómo ver la duración de una parte de una grabación

Cuando analizas una sección como Red o Principal, a veces necesitas una estimación más precisa del tiempo que tardaron ciertos eventos. Mantén presionada la tecla Mayúsculas, haz clic y mantén presionado, y arrastra hacia la izquierda o la derecha para seleccionar una parte de la grabación. En la parte inferior de la selección, DevTools muestra cuánto tiempo tardó esa parte.

En este ejemplo, la marca de tiempo 488.53ms en la parte inferior de la porción seleccionada indica cuánto tiempo requirió esa porción.

Cómo ver una captura de pantalla

Consulta Cómo tomar capturas de pantalla durante la grabación para obtener información sobre cómo habilitar las capturas de pantalla.

Coloca el cursor sobre la descripción general del cronograma para ver una captura de pantalla de cómo se veía la página en ese momento de la grabación. La descripción general del cronograma es la sección que contiene los gráficos de CPU, FPS y NET.

También puedes ver capturas de pantalla haciendo clic en un marco de la sección Marcos. DevTools muestra una versión pequeña de la captura de pantalla en la pestaña Resumen.

En este ejemplo, se muestra la captura de pantalla del fotograma 195.5ms en la pestaña Resumen cuando haces clic en él en la sección Fotogramas.

Haz clic en la miniatura de la pestaña Resumen para acercar la captura de pantalla.

En este ejemplo, se muestra una captura de pantalla ampliada después de hacer clic en su miniatura en la pestaña Resumen.

Cómo ver la información de las capas

Para ver información avanzada de las capas sobre un fotograma, haz lo siguiente:

1. Habilita la instrumentación avanzada de procesamiento.
2. Selecciona un marco en la sección Marcos. DevTools muestra información sobre sus capas en la nueva pestaña Capas, junto a la pestaña Registro de eventos.

Coloca el cursor sobre una capa para destacarla en el diagrama.

En este ejemplo, se muestra la capa #39 destacada cuando colocas el cursor sobre ella.

Para mover el diagrama, sigue estos pasos:

• Haz clic en Modo de desplazamiento para moverte a lo largo de los ejes X e Y.
• Haz clic en Modo de rotación para rotar a lo largo del eje Z.
• Haz clic en Restablecer transformación para restablecer el diagrama a su posición original.

Mira el análisis de capas en acción:

Cómo ver el generador de perfiles de renderización

Para ver información avanzada sobre un evento de pintura, haz lo siguiente:

1. Habilita la instrumentación avanzada de procesamiento.
2. Selecciona un evento Paint en la pista Main.

Cómo analizar el rendimiento de la renderización con la pestaña Renderización

Usa las funciones de la pestaña Renderización para visualizar el rendimiento de renderización de tu página.

Abre la pestaña Renderización.

Cómo ver los fotogramas por segundo en tiempo real con el medidor de FPS

Las estadísticas de renderización de fotogramas son una superposición que aparece en la esquina superior derecha de tu viewport. Proporciona una estimación en tiempo real de los FPS a medida que se ejecuta la página.

Consulta Estadísticas de renderización de fotogramas.

Cómo ver eventos de pintura en tiempo real con la función de pintura intermitente

Usa Paint Flashing para obtener una vista en tiempo real de todos los eventos de pintura en la página.

Consulta Flicker de pintura.

Cómo ver una superposición de capas con Bordes de capas

Usa Bordes de capas para ver una superposición de bordes de capas y tarjetas en la parte superior de la página.

Consulta Bordes de capas.

Cómo encontrar problemas de rendimiento del desplazamiento en tiempo real

Usa Problemas de rendimiento del desplazamiento para identificar los elementos de la página que tienen objetos de escucha de eventos relacionados con el desplazamiento que pueden perjudicar el rendimiento de la página. DevTools describe los elementos potencialmente problemáticos en verde azulado.

Consulta Problemas de rendimiento del desplazamiento.