Referencia de características de rendimiento

Esta página es una referencia completa de las características de DevTools relacionadas con el análisis del rendimiento.

Para ver un tutorial paso a paso sobre cómo analizar el rendimiento de una página mediante la herramienta Rendimiento, consulta Analizar el rendimiento en tiempo de ejecución (tutorial).

Las imágenes de esta página muestran DevTools desacoplado en su propia ventana dedicada. Para obtener más información sobre cómo desacoplar DevTools, consulte Desacoplar DevTools en una ventana independiente en Cambiar la ubicación de DevTools (Desacoplar, Acoplar en la parte inferior, Acoplar a la izquierda).

Contenido detallado:

• Abrir la herramienta Rendimiento
• Récord de rendimiento
  • Récord del rendimiento en tiempo de ejecución
  • Registrar el rendimiento de carga
  • Captura de pantalla mientras se graba
  • Forzar la recolección de elementos no utilizados durante la grabación
  • Mostrar configuración de grabación
  • Deshabilitar ejemplos de JavaScript
  • Limitar la red durante la grabación
  • Limitar la CPU durante la grabación
  • Habilitar estadísticas del selector CSS
  • Habilitar instrumentación avanzada de pintura
• Anotar una grabación y compartirla
  • Guardar y compartir una grabación
  • Cargar una grabación
• Borrar la grabación anterior
• Analizar una grabación de rendimiento
  • Obtén información procesable
  • Navegar por la grabación
    • Use métodos abreviados de teclado para navegar
    • Seleccionar una parte de una grabación
    • Acercar partes de una grabación y cambiar entre niveles de zoom
    • Desplazarse por un gráfico de llama larga
  • Buscar actividades
  • Cambiar el orden de las pistas y ocultarlas
  • Ver actividad de la conversación principal
  • Leer la tabla de llamas
  • Llevar el seguimiento de iniciadores de eventos
  • Ocultar funciones y sus elementos secundarios en el gráfico de llamas
    • Ignorar scripts en el gráfico de llamas
  • Ver actividades en una tabla
    • Actividades raíz
    • La pestaña De abajo hacia arriba
    • La pestaña Árbol de llamadas
    • Pestaña Registro de eventos
  • Ver marcadores de rendimiento
  • Ver intervalos personalizados
  • Ver interacciones
  • Ver cambios de diseño
  • Ver animaciones
  • Ver actividad de la GPU
  • Ver actividad ráster
  • Análisis de fotogramas por segundo (FPS)
    • La sección Marcos
  • Ver solicitudes de red
  • Ver métricas de memoria
  • Ver la duración de una parte de una grabación
  • Ver una captura de pantalla
  • Ver información de capas
  • Ver perfilador de Paint
  • Ver estadísticas del selector CSS
  • Ver mensajes entre windows, iframes y trabajos dedicados
  • Ver mensajes de WebSocket
• Analizar el rendimiento de representación con la herramienta Representación
  • Ve fotogramas por segundo en tiempo real con el medidor de FPS
  • Ver eventos de pintura en tiempo real con Paint Flashing
  • Ver una superposición de capas con Bordes de capa
  • Encontrar problemas de rendimiento de desplazamiento en tiempo real
  • Deshabilitar fuentes locales
• Visualizar fugas de memoria (herramienta Rendimiento: casilla de verificación memoria)

Abrir la herramienta Rendimiento

Para abrir la herramienta Rendimiento en DevTools:

1. Haz clic con el botón derecho en una página web y, a continuación, selecciona Inspeccionar.

   O bien, presione Ctrl+Mayús+I (Windows, Linux) o Comando+Opción+I (macOS).

   Se abre DevTools.

2. En DevTools, en la barra de actividades, seleccione la pestaña Rendimiento ().

   Si esa pestaña no está visible, haga clic en el botón Más herramientas ().

Récord de rendimiento

En las secciones siguientes se describe cómo registrar el rendimiento de una página web en DevTools.

Récord del rendimiento en tiempo de ejecución

Para analizar el rendimiento de una página web mientras se ejecuta (en lugar de mientras se carga):

1. Vaya a la página web que quiera analizar, como la demostración de Galería fotográfica.

2. Haz clic con el botón derecho en la página web y, a continuación, selecciona Inspeccionar.

   Se abre DevTools.

3. En la Barra de Actividades, seleccione la herramienta Rendimiento ().

4. Haga clic en el botón Grabar ().

   

5. Interactúe con la página durante un rato. DevTools registra toda la actividad de página que se produce como resultado de sus interacciones.

6. Haga clic en Grabar de nuevo. O bien, haga clic en Detener para detener la grabación.

   La herramienta Rendimiento muestra la grabación.

Registrar el rendimiento de carga

Para analizar el rendimiento de una página web mientras se carga (en lugar de mientras se ejecuta):

1. Vaya a la página web que quiera analizar, como la demostración de Galería fotográfica.

2. Haz clic con el botón derecho en la página web y, a continuación, selecciona Inspeccionar.

   Se abre DevTools.

3. En la Barra de Actividades, seleccione la herramienta Rendimiento ().

4. Haga clic en el botón Actualizar página ():

   

   DevTools registra las métricas de rendimiento mientras la página se actualiza y detiene automáticamente la grabación un par de segundos después de que finalice la carga. A continuación, DevTools muestra la grabación y amplía automáticamente la parte de la grabación en la que se produjo la mayor parte de la actividad:

   

Captura de pantalla mientras se graba

Para capturar una captura de pantalla de cada fotograma durante la grabación, seleccione la casilla Capturas de pantalla :

Para obtener información sobre cómo interactuar con las capturas de pantalla, consulte Ver una captura de pantalla a continuación.

Forzar la recolección de elementos no utilizados durante la grabación

Para forzar la recolección de basura mientras está grabando una página, haga clic en el botón Recolectar basura ():

Mostrar configuración de grabación

Para exponer más opciones de configuración relacionadas con el modo en que DevTools captura las grabaciones de rendimiento:

• En la herramienta Rendimiento, haga clic en el botón Configuración de Captura ().

  Las casillas de verificación y las listas desplegables se muestran en la parte superior de la herramienta Rendimiento :

  

Deshabilitar ejemplos de JavaScript

De forma predeterminada, la sección principal de una grabación muestra pilas de llamadas detalladas de funciones de JavaScript a las que se llamó durante la grabación. Para deshabilitar las pilas de llamadas de JavaScript:

1. En la herramienta Rendimiento, haga clic en el botón Configuración de Captura ().

2. Active la casilla Deshabilitar ejemplos de JavaScript .

3. Tome una grabación de la página.

Las dos ilustraciones siguientes muestran la diferencia entre deshabilitar y habilitar ejemplos de JavaScript. La sección principal de la grabación es mucho más corta cuando el muestreo de JavaScript está deshabilitado, ya que la grabación omite las pilas de llamadas de JavaScript.

Un ejemplo de una grabación cuando las muestras de JS están deshabilitadas:

Un ejemplo de una grabación cuando las muestras de JS están habilitadas:

Limitar la red durante la grabación

Para limitar la red durante la grabación:

1. En la herramienta Rendimiento, haga clic en el botón Configuración de Captura (). Consulta Mostrar configuración de grabación, arriba.

2. Establezca la red en el nivel de limitación deseado.

   Se muestra un icono de advertencia en la pestaña de la herramienta Red para recordarle que la limitación está habilitada.

Limitar la CPU durante la grabación

Para limitar la CPU durante la grabación:

1. En la herramienta Rendimiento, haga clic en el botón Configuración de Captura (). Consulta Mostrar configuración de grabación, arriba.

2. Establezca la CPU en el nivel de limitación deseado.

   Se muestra un icono de advertencia en la pestaña de la herramienta Rendimiento para recordarle que la limitación está habilitada.

La limitación depende en relación con las capacidades del equipo. Por ejemplo, la opción de ralentización 2x hace que tu CPU funcione dos veces más lento de lo normal. DevTools no simula realmente las CPU de los dispositivos móviles, porque la arquitectura de los dispositivos móviles es muy diferente de la de los equipos de escritorio y portátiles.

Habilitar estadísticas del selector CSS

Para ver las estadísticas de los selectores de reglas CSS durante eventos Recalcular estilo de larga duración:

1. Haga clic en el botón Configuración de Captura (). Consulta Mostrar configuración de grabación, arriba.

2. Active la casilla Habilitar estadísticas del selector CSS (lenta).

Para obtener más información, consulte Analizar el rendimiento del selector CSS durante los eventos Recalcular estilo.

Habilitar instrumentación avanzada de pintura

Para ver la instrumentación de pintura detallada:

1. Haga clic en el botón Configuración de Captura (). Consulta Mostrar configuración de grabación, arriba.

2. Active la casilla Habilitar instrumentación avanzada de Paint (lenta).

Para aprender a interactuar con la información de pintura, consulte Ver información de capas, a continuación, y Ver perfilador de pintura, a continuación.

Anotar una grabación y compartirla

Una vez que se registra un seguimiento de rendimiento, puede analizarlo y realizar anotaciones para compartir sus conclusiones.

Para realizar anotaciones en una grabación, abra la pestaña Anotaciones en la barra lateral de la herramienta Rendimiento . Si la barra lateral no está visible, haga clic en el botón Mostrar barra lateral ().

La pestaña Anotaciones de la barra lateral contiene inicialmente instrucciones sobre cómo agregar anotaciones. Después de crear las anotaciones, como se muestra a continuación, la pestaña enumera las anotaciones existentes y le permite eliminarlas.

Hay varias formas de agregar una anotación:

• Etiquetar un elemento: Para etiquetar un elemento en el seguimiento de rendimiento, haga doble clic en el elemento, ingrese la etiqueta en el cuadro de texto y, a continuación, presione Entrar.

• Conectar dos elementos: Para dibujar una flecha entre dos elementos del seguimiento de rendimiento, haga doble clic en el primer elemento, haga clic en el icono de flecha situado junto a él y, a continuación, haga clic en el segundo elemento.

• Etiquetar un intervalo de tiempo: para dibujar y etiquetar un intervalo de tiempo arbitrario en el seguimiento de rendimiento, mantenga presionada la tecla Mayús y arrastre desde el principio de un intervalo de tiempo hasta el final, escriba la etiqueta en el cuadro de texto que aparece y, a continuación, presione Entrar.

Por ejemplo, abre la página web de demostración de pestañas de actividad en una nueva ventana o pestaña, crea una grabación de rendimiento y después realiza las tres acciones anteriores. Resultado:

En este ejemplo, hay:

• Tres anotaciones.
• Una anotación de flecha que conecta dos anotaciones.
• Un intervalo de tiempo anotado resaltado en rosa.

La pestaña Anotaciones muestra el número de anotaciones junto al nombre de su pestaña; En este ejemplo, 5.

Para eliminar una anotación, coloque el cursor sobre ella en la pestaña Anotaciones y, a continuación, haga clic en el botón Eliminar junto a ella.

Para ocultar las anotaciones del seguimiento de rendimiento, seleccione Ocultar anotaciones en la parte inferior de la pestaña Anotaciones .

Guardar y compartir una grabación

Para guardar una grabación como un archivo en el dispositivo y luego compartirla con los resultados de rendimiento anotados, en la barra de acciones de la parte superior de la herramienta Rendimiento , haga clic en el botón Guardar perfil () y, a continuación, seleccione Guardar seguimiento.

Como alternativa, seleccione Guardar seguimiento sin anotaciones.

En lugar de hacer clic en el botón Guardar perfil () en la parte superior, puede hacer clic con el botón derecho en una pista de una grabación y, a continuación, seleccionar Guardar perfil:

Cargar una grabación

Para cargar una grabación desde un archivo, haga clic en el botón Cargar perfil () en la barra de acciones en la parte superior de la herramienta Rendimiento .

La herramienta Rendimiento mostrará anotaciones si están presentes en el seguimiento.

O bien, haga clic con el botón derecho en la herramienta Rendimiento y seleccione Cargar perfil:

Puede hacer clic con el botón derecho en una grabación existente o en la pantalla que se muestra en la herramienta Rendimiento cuando no hay grabaciones.

Borrar la grabación anterior

Después de realizar una grabación, para eliminarla de la herramienta Interpretación , haga clic en el botón Borrar grabación ():

Analizar una grabación de rendimiento

Después de registrar el rendimiento en tiempo de ejecución o el rendimiento de la carga, la herramienta Rendimiento muestra una gran cantidad de datos sobre la grabación. Usa los datos registrados para analizar el rendimiento de tu página web.

Obtén información procesable

La herramienta Rendimiento extrae información procesable de los datos de rendimiento registrados. Estas conclusiones son formas en las que puede mejorar el rendimiento de su sitio web. Entre las conclusiones se incluyen:

• INP por fase
• LCP por fase
• Detección de solicitud LCP
• Errores del cambio de diseño
• Representar solicitud de bloqueo
• Árbol de dependencias de red
• Mejorar la entrega de imágenes
• Latencia de la solicitud de documentos
• Visualización de fuentes
• Optimizar la ventanilla para dispositivos móviles
• Optimizar el tamaño de DOM
• Terceros
• Costos del selector CSS
• Redistribución forzada
• Usar una duración de caché eficaz

Los conocimientos se centran en mejorar las métricas de Core Web Vitals y en optimizar la rapidez con la que se carga y representa la página web.

Después de grabar un perfil en la herramienta Rendimiento , la pestaña Información de la barra lateral muestra la lista de conclusiones procesables que se aplican a los datos de rendimiento registrados. Para ver la lista de conclusiones que no se aplican al perfil, consulta la sección Información superada .

Para usar la información:

1. Realice una grabación de actuación, según Record performance, arriba.

2. En la barra lateral izquierda de la herramienta Rendimiento , seleccione la pestaña Información , expanda las distintas secciones y mantenga el puntero sobre los elementos y haga clic en ellos. La herramienta Rendimiento resalta los eventos correspondientes del seguimiento:

   

   Si la barra lateral y la pestaña Insights no están visibles, haga clic en el botón Mostrar barra lateral ().

Navegar por la grabación

Para inspeccionar de cerca la grabación de la actuación, puedes seleccionar una parte de una grabación, desplazarte por un gráfico de llamas largo, acercar y alejar y usar rutas de navegación para saltar entre los niveles de zoom.

Use métodos abreviados de teclado para navegar

Para usar métodos abreviados de teclado para navegar rápidamente por la grabación, primero, elija su estilo preferido de navegación con teclado, como se indica a continuación:

• En la esquina superior derecha de la herramienta Rendimiento , haga clic en el botón Mostrar accesos directos () y, a continuación, seleccione el botón de opción Moderno o Clásico .

  El cuadro de diálogo Métodos abreviados de teclado muestra los métodos abreviados disponibles para la opción de asignación seleccionada.

Cuando se selecciona el botón de opción Moderno :

• Para hacer zoom: Comando/Ctrl + rueda del ratón.
• Para desplazarse verticalmente: rueda del mouse.
• Para desplazarse horizontalmente: Mayús + rueda del mouse.

Cuando se selecciona el botón de opción clásica :

• Para hacer zoom: Rueda del mouse o panel táctil hacia arriba o hacia abajo.
• Para desplazarse verticalmente: Mayús + rueda del mouse.
• Para desplazarse horizontalmente: Mayús + Flecha| izquierdaFlecha derecha

Métodos abreviados adicionales:

• Haga zoom presionando W o S.

• Desplace a la izquierda y a la derecha presionando A o D.

Seleccionar una parte de una grabación

En la parte superior de la grabación, se muestra la sección Visión general de la línea de tiempo, incluidos los gráficos de CPU y NET (indicados a la derecha):

Para seleccionar una parte de una grabación, en la vista general de la línea de tiempo, haga clic y arrastre horizontalmente:

Para seleccionar una parte con el teclado:

1. Enfoca la pista principal o cualquiera de sus vecinas.

2. Usa las teclas W, A, S, D para acercar, mover a la izquierda, alejar y mover a la derecha, respectivamente.

Para seleccionar una parte con un panel táctil:

1. Mantenga el puntero sobre la sección de descripción general de la línea de tiempo o cualquiera de las pistas (principal y sus vecinas).

2. Con dos dedos, deslice el dedo hacia arriba para alejar, la izquierda para moverse a la izquierda, abajo para acercar y derecha para moverse a la derecha.

Puede seleccionar una parte de una grabación con un ratón, un teclado o un panel táctil.

Ratón:

Para seleccionar una parte de una grabación con el mouse:

• Arrastre el mouse a la izquierda o a la derecha por la Información general. La Información general es la sección que contiene los gráficos de CPU y NET :

Para desplazarse por un gráfico de llama largo en la sección principal o en cualquiera de las secciones vecinas, haga clic y mantenga pulsado mientras arrastra hacia arriba y hacia abajo. Arrastre hacia la izquierda o hacia la derecha para mover la parte de la grabación seleccionada.

Teclado:

Para seleccionar una parte de una grabación con el teclado:

1. Selecciona el fondo de la sección principal o selecciona el fondo de una sección que esté junto a la sección principal , como Interacciones, Red o GPU. Este flujo de trabajo de teclado solo funciona cuando una de estas secciones está en foco.

2. Presione W o S para acercar o alejar. Presione A O D para moverse a la izquierda o a la derecha.

Trackpad:

Para seleccionar una parte de una grabación con un panel táctil:

1. Mantenga el puntero sobre la sección Información general o la sección Detalles . La sección Información general es el área que contiene los gráficos FPS, CPU y NET . La sección Detalles es el área que contiene la sección principal y la sección de Interacciones .

2. Con dos dedos, deslice el dedo hacia arriba para alejar o hacia abajo para acercar. Con dos dedos, deslice el dedo hacia la izquierda para moverse hacia la izquierda o hacia la derecha para moverse hacia la derecha.

Acercar partes de una grabación y cambiar entre niveles de zoom

La información general de la línea de tiempo le permite acercar partes de la grabación de forma sucesiva y crear rutas de navegación en cada paso, lo que le permite cambiar entre estos niveles de zoom.

Para hacer zoom en una parte de la grabación y usar rutas de exploración:

1. En Información generalde la línea de tiempo, seleccione una parte de la grabación (arriba).

2. Pase el ratón por encima de la selección y, a continuación, haga clic en el botón N ms ():

   

   La selección se expande para rellenar la vista general de la línea de tiempo. Comienza a crearse una cadena de migas de pan en la parte superior de la vista general de la línea de tiempo.

3. Repita los dos pasos anteriores para crear otro recorrido anidado. Puede seguir anidando rutas de navegación siempre que el rango de selección sea superior a 5 milisegundos.

4. Para saltar a un nivel de zoom elegido, haga clic en la ruta de navegación correspondiente en la cadena en la parte superior de la vista general de la línea de tiempo.

Para quitar los elementos secundarios de una ruta de exploración, haga clic con el botón derecho en la ruta de navegación principal y, a continuación, seleccione Quitar rutas de navegación secundarias:

Desplazarse por un gráfico de llama larga

Para desplazarse por un gráfico de llama larga en la pista principal o en cualquiera de sus vecinos, haga clic y mantenga presionado, luego arrastre en cualquier dirección hasta que aparezca lo que está buscando.

Buscar actividades

Puede buscar en las actividades de la pista principal y en las solicitudes de la vía Red .

Para abrir el cuadro de búsqueda en la parte inferior de la herramienta Rendimiento :

1. Presione Ctrl+F (Windows, Linux) o Comando+F (macOS).

   El cuadro Buscar aparece en la parte inferior de la herramienta Rendimiento :

   

2. En el cuadro Buscar , escriba una consulta, como "recalcular estilo".

   Las actividades coincidentes se resaltan en la sección principal a medida que escribe, y el número total de coincidencias aparece en el cuadro de búsqueda. Se selecciona la primera actividad coincidente, resaltada en azul:

   

Para navegar entre las actividades que coinciden con la consulta:

• Para seleccionar la siguiente actividad, presione Entrar o haga clic en el botón Siguiente ().

• Para seleccionar la actividad anterior, presione Mayús+Entrar o haga clic en el botón Anterior ().

La herramienta Rendimiento muestra información sobre la actividad seleccionada en el cuadro de búsqueda.

Para modificar la configuración de la consulta:

• Para usar una expresión regular en la consulta, haga clic en el botón Habilitar expresiones regulares ( Si selecciona el botón Regex y, a continuación, entra ^E.* , se busca cualquier actividad que comience con la letra E.

• Para que la consulta distinga entre mayúsculas y minúsculas, haga clic en el botón Habilitar búsqueda que distingue mayúsculas de minúsculas (").

Para ocultar el cuadro de búsqueda, haga clic en el botón Cancelar .

Cambiar el orden de las pistas y ocultarlas

Para despejar el seguimiento del rendimiento, puede cambiar el orden de las pistas y ocultar las irrelevantes en el modo de configuración de pistas.

Para mover y ocultar pistas:

1. Para entrar en el modo de configuración, haga clic con el botón derecho en un nombre de pista y, a continuación, seleccione Configurar pistas.

2. Haga clic en el botón Mover pista hacia arriba () o el botón Mover pista hacia abajo () para mover una pista hacia arriba o hacia abajo. Haz clic en el botón Ocultar pista () para ocultarla.

3. Haga clic con el botón derecho en la pista y, a continuación, seleccione Finalizar configuración.

La herramienta Rendimiento también aplica la configuración de seguimiento a los nuevos seguimientos, a menos que cierre y vuelva a abrir DevTools.

Ver actividad de la conversación principal

Use la sección Principal para ver la actividad que se produjo en el hilo principal de la página:

Seleccione un evento para ver más información sobre él en la pestaña Resumen . DevTools indica el evento seleccionado:

DevTools representa la actividad del subproceso principal con 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. Un evento que está cerca de la parte superior provoca los eventos que están debajo de ella; Por ejemplo, en la ilustración anterior, un input evento causó un Function Call, que ejecutó una función anónima que llamó a filterByCamera AND luego populateGallery. Luego, la función realizó cambios en el populateGallery DOM llamando a set innerHTML.

DevTools asigna a los scripts colores aleatorios. En la ilustración anterior, las solicitudes de función de un script se colorean en fucsia (púrpura-rosa). El amarillo más oscuro representa la actividad de scripting y el púrpura representa la actividad de representación. Estos eventos de color amarillo y púrpura más oscuro son consistentes en todas las grabaciones.

Si desea ocultar el gráfico de llama detallado de solicitudes de JavaScript, consulte Deshabilitar ejemplos de JavaScript, arriba. Cuando los ejemplos de JavaScript están deshabilitados, solo se muestran los eventos de alto nivel, como Event: input y Function Call desde la figura anterior.

Leer la tabla de llamas

La herramienta Rendimiento representa la actividad principal de la conversación 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 arriba provocan los eventos de abajo.

La herramienta Rendimiento asigna a los scripts colores aleatorios para dividir el gráfico de llama y hacerlo más legible.

Las tareas largas también se resaltan con un triángulo rojo y con la parte de más de 50 milisegundos sombreada en rojo.

Además, la pista principal muestra información sobre los perfiles de CPU iniciados y detenidos con profile() las funciones de profileEnd() consola.

Para ocultar el gráfico de llama detallado de las llamadas de JavaScript, consulte Deshabilitar ejemplos de JavaScript. Cuando los ejemplos de JS están deshabilitados, solo verá los eventos de alto nivel como Event (click) y Function Call.

Llevar el seguimiento de iniciadores de eventos

La pista principal puede mostrar flechas que conectan a los siguientes iniciadores y los eventos que han provocado:

• Invalidación de estilo o diseño:>recalcular estilos o diseños
• Solicitar fotograma de animación ->fotograma de animación activado
• Solicitar devolución de llamada inactiva: devolución de llamada inactiva de fuego>
• Install timer ->timer fired
• Crear WebSocket ->enviar... y recibir un protocolo de enlace de WebSocket o destruir WebSocket
• Programar postTask ->Activar postTask o Anular postTask

Para ver las flechas, busque un iniciador o el evento que causó en el gráfico de llama y selecciónelo.

Cuando se selecciona, la pestaña Resumen muestra Iniciador para vínculos para iniciadores e Iniciado por vínculos para los eventos que provocaron. Haz clic en ellos para saltar entre los eventos correspondientes.

Ocultar funciones y sus elementos secundarios en el gráfico de llamas

Para despejar el gráfico de llama en el subproceso principal , puede 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 repetidos (R)
   • Restablecer niños (U)
   • Restablecer seguimiento (T)
   • Agregar script a la lista de ignorados (I)

   Aparece un botón de lista desplegable de número oculto () junto al nombre de la función con elementos secundarios ocultos.

2. Para ver el número de elementos secundarios ocultos , coloque el cursor sobre el botón desplegable de número ).

3. Para restablecer una función con elementos secundarios ocultos o todo el gráfico de llamas, seleccione la función y presione U o haga clic con el botón derecho en cualquier función y seleccione Restablecer seguimiento respectivamente.

Ignorar scripts en el gráfico de llamas

Para agregar un script a la lista de ignorados, haga clic con el botón derecho en un script del gráfico y seleccione Agregar script a la lista de ignorados.

El gráfico contrae los scripts omitidos, los marca como Activados en la lista de ignorados y los agrega a la lista Reglas de exclusión personalizadas en Personalizar y controlar DevTools () >Configuración>Ignorar. Las secuencias de comandos ignoradas se guardan hasta que las quite del seguimiento o de las reglas de exclusión personalizadas.

Ver actividades en una tabla

Después de grabar una página, además de la sección principal para analizar actividades, DevTools también proporciona tres vistas tabulares para analizar actividades. Cada vista le ofrece una perspectiva diferente de las actividades:

• Para ver las actividades en las que se dedicó la mayor parte del tiempo directamente, use la pestaña De abajo hacia arriba .

• Para ver las actividades raíz que ocasionan más trabajo, use la pestaña Árbol de llamadas .

• Para ver las actividades en el orden en que se produjeron durante la grabación, use la pestaña Registro de eventos .

Para ayudarle a encontrar lo que busca más rápido, las tres pestañas tienen botones de filtrado avanzado junto a la barra de filtros :

• El botón Habilitar expresiones regulares (

• El botón Habilitar búsqueda que distingue mayúsculas de minúsculas (

Cada vista tabular de la herramienta Rendimiento muestra vínculos para actividades como las llamadas a funciones. Para ayudarle a depurar, DevTools busca las declaraciones de función correspondientes en los archivos de origen. Además, si los mapas de origen apropiados están presentes y habilitados, DevTools encuentra automáticamente los archivos originales.

Haga clic en un vínculo para abrir un archivo de origen en la herramienta Orígenes .

Las tres secciones siguientes hacen referencia a la misma demostración. Puede ejecutar la demostración usted mismo en Activity Tabs Demo y ver el origen en MicrosoftEdge / Demos > /devtools-performance-activitytabs/.

Actividades raíz

Aquí hay una explicación del concepto de actividades raíz que se menciona en las secciones Árbol de llamadas , pestaña De abajo hacia arriba y Registro de eventos .

Las actividades raíz son actividades que hacen que el explorador realice algún trabajo. Por ejemplo, al hacer clic en una página web, el explorador ejecuta una Event actividad como actividad raíz. Esa actividad puede hacer que Event se ejecuten otras actividades, como un controlador.

En el gráfico de llama de la sección principal , las actividades de la raíz están 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.

Para ver un ejemplo de las actividades raíz, consulte la pestaña El árbol de llamadas, a continuación.

La pestaña Árbol de llamadas

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

La pestaña Árbol de llamadas solo muestra las actividades durante la parte seleccionada de la grabación. Para obtener información sobre cómo seleccionar una parte de una grabación, consulte Seleccionar una parte de una grabación, más arriba.

En la ilustración anterior, los elementos de nivel superior en la columna Actividad , como Event Timing, son actividades raíz. El anidamiento representa la pila de llamadas. Por ejemplo, en la ilustración anterior, Event Timing causó Event: mouseup, que causó Function Call, qué causa (anonymous), y así sucesivamente.

Self Time representa el tiempo directamente invertido en esa actividad. El tiempo total representa el tiempo dedicado a esa actividad o a cualquiera de los niños.

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

Use el cuadro de texto Filtro para filtrar eventos por nombre de actividad.

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

Haga clic en Mostrar la pila más pesada () para mostrar otra tabla a la derecha de la tabla de actividades . Haga clic en una actividad para rellenar la tabla Pila más pesada . La tabla Pila más pesada muestra qué elementos secundarios de la actividad seleccionada tardó más tiempo en ejecutarse.

La pestaña De abajo hacia arriba

Utilice la pestaña De abajo hacia arriba para ver qué actividades directamente ocuparon la mayor parte del tiempo en conjunto.

La pestaña De abajo hacia arriba solo muestra las actividades durante la parte seleccionada de la grabación. Para obtener información sobre cómo seleccionar una parte de una grabación, consulte Seleccionar una parte de una grabación, más arriba.

En el gráfico de llamas de la sección principal de la figura anterior, casi todo el tiempo se dedicó a ejecutar las afunciones , b, y c . Las actividades principales en la pestaña De abajo hacia arriba de la figura anterior también ason , b, y c. En la pestaña De abajo hacia arriba , la siguiente actividad más costosa es Minor GC.

La columna Tiempo de uno mismo representa el tiempo agregado dedicado directamente a esa actividad, en todas las ocurrencias.

La columna Tiempo total representa el tiempo agregado dedicado a esa actividad o a cualquiera de los niños.

Pestaña Registro de eventos

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

La pestaña Registro de eventos solo muestra las actividades durante la parte seleccionada de la grabación. Para obtener información sobre cómo seleccionar una parte de una grabación, consulte Seleccionar una parte de una grabación, más arriba.

La columna Hora de inicio representa el punto en el que se inició esa actividad, en relación con el inicio de la grabación. Por ejemplo, la hora de inicio del 925.0 ms elemento seleccionado en la ilustración anterior significa que la actividad se inició 925,0 ms después de que se iniciara la grabación.

La columna Tiempo de uno mismo representa el tiempo dedicado directamente a esa actividad.

La columna Tiempo total representa el tiempo dedicado directamente a esa actividad o a cualquiera de los niños.

Haga clic en el encabezado de columna Hora de inicio, Hora de inicio o Tiempo total para ordenar la tabla por esa columna.

Use el cuadro de texto Filtro para filtrar actividades por nombre.

Use el menú Duración para filtrar las actividades que hayan durado menos de 1 ms o 15 ms. De forma predeterminada, el menú Duración está establecido en Todo, lo que significa que se muestran todas las actividades.

Desactive las casillas de verificación Carga,Scripting, Representación o Pintura para filtrar todas las actividades de esas categorías.

Ver marcadores de rendimiento

En una superposición con líneas verticales a través del seguimiento de rendimiento, puede ver marcadores de rendimiento importantes, como:

• First Paint (FP)
  • Primera pintura (FP) en el glosario de MDN.
• First Contentful Paint (FCP)
  • First Contentful Paint (FCP) en el glosario de MDN.
  • PerformancePaintTiming en MDN.
• Largest Contentful Paint (LCP)
  • La pintura de contenido más grande (LCP) en el glosario de MDN.
  • LargestContentfulPaint en MDN.
• Evento DOMContentLoaded (DCL)
  • Evento DOMContentLoaded (DCL) en MDN.
• Evento de carga (L)
  • Evento de carga (L) en MDN.

Mantenga el mouse sobre un nombre de marcador en la parte inferior del seguimiento para ver su marca de tiempo.

Ver intervalos personalizados

En la pista Intervalos , vea sus marcadores de rendimiento personalizados, como:

• performance.mark() llamadas.

• performance.measure() llamadas.

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

Ver interacciones

Use la sección Interacciones para buscar y analizar las interacciones del usuario que se produjeron durante la grabación:

Una línea roja en la parte inferior de una interacción representa el tiempo dedicado a esperar el subproceso principal.

Haga clic en una interacción para ver más información al respecto en la pestaña Resumen .

Ver cambios de diseño

Vea los cambios de diseño en la pista Cambios de diseño . Los turnos se muestran como rombos púrpuras y se agrupan en grupos (líneas moradas) en función de su proximidad en la línea de tiempo.

Para resaltar un elemento que provocó un cambio de diseño en la ventana gráfica, coloque el cursor sobre el rombo correspondiente.

Para ver más información sobre un cambio o cambios de diseño en la pestaña Resumen con intervalos, puntuaciones, elementos y posibles culpables, haga clic en el rombo o racimo correspondiente.

Para obtener más información, consulte Cumulative Layout Shift (CLS) en MDN.

Ver animaciones

Ver animaciones en la pista Animaciones . Las animaciones se denominan como propiedades o elementos CSS correspondientes, si los hay, por ejemplo, transform o my-element. Las animaciones que no componen se marcan con triángulos rojos en la esquina superior derecha.

Seleccione una animación para ver más detalles en la pestaña Resumen , incluidos los motivos de los errores de composición.

Ver actividad de la GPU

Vea la actividad de la GPU en la sección GPU de la herramienta Rendimiento:

Ver actividad ráster

Vea la actividad de ráster en la sección Grupo de subprocesos .

Análisis de fotogramas por segundo (FPS)

DevTools proporciona dos formas de analizar los fotogramas por segundo:

• Utilice la sección Marcos para ver cuánto tiempo tardó un fotograma determinado. Consulte la sección The Frames a continuación.

• Usa el medidor de FPS para obtener una estimación en tiempo real de FPS a medida que se ejecuta la página. Consulta Ver fotogramas por segundo en tiempo real con el medidor de FPS, a continuación.

La sección Marcos

La sección Marcos le indica exactamente cuánto tiempo tardó un fotograma determinado.

Mantenga el puntero sobre un marco para ver una información sobre herramientas con más información al respecto:

En el ejemplo anterior se muestra información sobre herramientas al mantener el puntero sobre un fotograma.

La sección Marcos puede mostrar cuatro tipos de marcos:

• Bastidor inactivo (blanco). Sin cambios.

• Marco (verde). Representado según lo esperado y a tiempo.

• Marco parcialmente presentado (amarillo con un patrón de línea discontinua ancha y escasa). Microsoft Edge hizo todo lo posible para representar al menos algunas actualizaciones visuales a tiempo. Por ejemplo, en caso de que el trabajo del subproceso principal del proceso del renderizador (animación del lienzo) se retrase pero el subproceso del compositor (desplazamiento) esté en el tiempo.

• Fotograma caído (rojo con un patrón denso de línea continua). Microsoft Edge no puede representar el marco en un tiempo razonable.

Haga clic en un marco para ver más información sobre el marco en la pestaña Resumen en la parte inferior de la herramienta Rendimiento . DevTools resalta el marco seleccionado en azul:

Ver solicitudes de red

Expanda la sección Red para ver una cascada de solicitudes de red que se produjeron durante la grabación:

Haga clic en una solicitud para ver más información al respecto en la pestaña Resumen :

Las solicitudes de la sección Red están codificadas por colores de la siguiente manera:

• Fondo azul: solicitud HTML.
• Fondo púrpura: solicitud CSS.
• Fondo amarillo oscuro: solicitud de JS.
• Fondo verde: solicitud de imagen.

Las solicitudes tienen cuadrados en la esquina superior izquierda:

• Un cuadrado azul más oscuro en la parte superior izquierda de una solicitud significa que es una solicitud de prioridad más alta.
• Un cuadrado azul más claro significa que tiene una prioridad más baja.

Por ejemplo, en la ilustración anterior, la solicitud de galería de fotos , en la esquina superior izquierda de la sección Red , es de mayor prioridad.

Las solicitudes pueden tener líneas en los lados izquierdo y derecho, y sus barras pueden dividirse en dos colores. Esto es lo que representan estas líneas y colores:

• La línea izquierda es todo lo que depende del Connection Start grupo de eventos, inclusive. En otras palabras, es todo antes Request Sent, exclusivo.

• La parte ligera de la barra es Request Sent y Waiting (TTFB) para la respuesta del servidor.

• La parte oscura de la barra es Content Download.

• La línea correcta es esencialmente el tiempo dedicado a esperar el hilo principal. Esto no está representado en la pestaña Intervalos .

Ver métricas de memoria

Seleccione la casilla Memoria para ver las métricas de memoria en una grabación de rendimiento:

DevTools muestra un gráfico de Memoria encima de la pestaña Resumen. También hay un gráfico debajo del gráfico de NET, llamado HEAP. El gráfico del montón proporciona la misma información que la línea del montón JS en el gráfico de memoria :

Las líneas de colores del gráfico se asignan a las casillas de verificación de colores situadas sobre el gráfico. Desactive una casilla para ocultar esa categoría del gráfico.

El gráfico solo muestra la región de la grabación que está seleccionada actualmente. Por ejemplo, en la ilustración anterior, el gráfico Memoria solo muestra el uso de memoria desde aproximadamente la marca de 3600 ms hasta la marca de 6200 ms.

Vea también:

• Visualice las fugas de memoria (herramienta Rendimiento: casilla de verificación memoria), a continuación.

Ver la duración de una parte de una grabación

Al analizar una sección como Red o Principal, a veces necesita una estimación más precisa de cuánto tiempo tardaron ciertos eventos. Mantenga presionada la tecla Mayús, haga clic y mantenga presionado, y arrastre hacia la izquierda o hacia 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:

Ver una captura de pantalla

Para obtener información sobre cómo activar las capturas de pantalla, consulte Captura de pantalla mientras se graba, arriba.

Para ver una captura de pantalla del aspecto de la página durante ese momento de la grabación, mantenga el puntero sobre la Información general. La Información general es la sección que contiene los gráficos de CPU y NET :

También puede ver capturas de pantalla seleccionando un marco en la sección Marcos . DevTools muestra una versión pequeña del recorte de pantalla en la pestaña Resumen :

Para ampliar la captura de pantalla, haga clic en la miniatura en la pestaña Resumen .

Ver información de capas

Para ver información de capas avanzadas sobre un marco:

1. En la herramienta Rendimiento, haga clic en el botón Configuración de Captura () y, a continuación, seleccione la casilla Habilitar instrumentación de representación avanzada (lenta).

2. En la sección Marcos , seleccione un marco. DevTools muestra información sobre las capas en la pestaña Capas en la parte inferior de la herramienta Rendimiento :

   

La pestaña Capas funciona como la pestaña Capas compuestas en la herramienta Vista 3D . Para obtener información sobre cómo interactuar con la pestaña Capas , consulte Navegar por las capas de página web, índice z y DOM mediante la herramienta Vista 3D.

Ver perfilador de Paint

Para ver información avanzada sobre un evento de pintura:

1. En la herramienta Rendimiento, haga clic en el botón Configuración de Captura () y, a continuación, seleccione la casilla Habilitar instrumentación de representación avanzada (lenta).

2. Seleccione un evento de Paint en la sección principal . DevTools muestra información sobre el evento paint en la pestaña Paint Profiler :

   

Ver estadísticas del selector CSS

Para ver estadísticas sobre los selectores de las reglas CSS que se han recalculado durante una grabación de rendimiento:

• En la herramienta Rendimiento, haga clic en el botón Configuración de Captura () y, a continuación, seleccione la casilla Habilitar instrumentación de representación avanzada (lenta).

  DevTools muestra información agregada sobre los selectores de las reglas CSS que se recalcularon durante la grabación en la pestaña Estadísticas del selector :

  

1. En la sección Principal , selecciona un evento Recalcular estilo . En la pestaña Estadísticas del selector , DevTools muestra información sobre los selectores de las reglas CSS que se han recalculado durante ese evento.

Vea también:

• Analizar el rendimiento del selector CSS durante los eventos Recalcular estilo

Ver mensajes entre windows, iframes y trabajos dedicados

El experimento de DevTools Panel de rendimiento: mostrar flujos de envío y manejo de mensajes posteriores mejora la sección principal de la herramienta Rendimiento para ayudarle a identificar postMessage rápidamente eventos y controladores, al distinguir los eventos que desencadena el postMessage método de otros eventos que se muestran en la herramienta Rendimiento. Este experimento le ayuda a investigar los problemas de rendimiento relacionados con la publicación de mensajes en varios subprocesos de una aplicación.

Sin este experimento, los eventos que se desencadenan al distribuir y controlar mensajes entre subprocesos de una aplicación aparecen como eventos genéricos de llamada a la función de scripting. Con este experimento habilitado:

• postMessage los eventos de distribución aparecen como Schedule postMessage.
• postMessage los eventos del controlador aparecen como Mensaje activado:

Este experimento le ayuda a investigar cuándo se produjo una postMessage llamada y cuánto tiempo estuvo en cola el mensaje antes de que se iniciara el postMessage controlador. Los eventos de envío están vinculados a eventos de controlador mediante flechas de iniciador que aparecen al hacer clic en cualquier tipo de evento:

Para usar esta característica, en DevTools, seleccione Personalizar y controlar DevTools () >Configuración>Experimentos, seleccione la casilla de verificación Panel Rendimiento: show postMessage dispatch and handling flows, haga clic en el botón Close (X) y, a continuación, en el botón Volver a cargar DevTools .

Vea también:

• Referencia de evento de grabación de rendimiento
• Demostración de eventos de seguimiento de postMessage (representado)
• Demostración de eventos de seguimiento postMessage (código fuente)

Ver mensajes de WebSocket

Las actividades de WebSocket se muestran en el seguimiento de red de la herramienta Rendimiento , para ayudar a correlacionar la actividad de JavaScript con los mensajes de WebSocket. Esto puede ayudar a identificar si los problemas de latencia provienen del análisis de un mensaje por parte del cliente o de la respuesta del servidor.

Para ver los mensajes de WebSocket en la herramienta Rendimiento :

1. Vaya a una página web que envíe mensajes de WebSocket, como la aplicación de chat simple, en una nueva ventana o pestaña.

2. Haz clic con el botón derecho en la página web y, a continuación, selecciona Inspeccionar.

   Se abre DevTools.

3. En la Barra de Actividades, seleccione la herramienta Rendimiento ().

4. En la parte superior izquierda de la herramienta Interpretación , haga clic en el botón Grabar ().

5. En la página web del chat, en el cuadro de texto Nombre de usuario , escriba un nombre, como "Juan", y luego haga clic en el botón Conectar .

   En la parte inferior del formulario de chat, se muestra un mensaje, como "John:v8g... conectado".

6. En el cuadro de texto Enviar un mensaje , escriba un mensaje, como "Hola", y luego haga clic en el botón Enviar .

   En la aplicación de chat, se muestra el mensaje como, por ejemplo, "Hola":

   

   Se genera tráfico de WebSocket.

7. En la parte superior izquierda de la herramienta Rendimiento , haga clic en el botón Detener ().

   O bien, en medio de la herramienta Rendimiento , haga clic en el botón Detener .

   En la herramienta Rendimiento , se muestra la línea de tiempo.

8. Expanda la pista de red .

9. Haga clic en una línea dorada vertical.

10. En la parte inferior de la herramienta Rendimiento , en la pestaña Resumen , se muestra información sobre el mensaje de WebSocket seleccionado, como:

    • Enviar protocolo de enlace de WebSocket
    • Recibir protocolo de enlace de WebSocket
    • Recibir mensaje de WebSocket:

    

Vea también:

• Analice los mensajes de una conexión WebSocket en Referencia de características dered.
• Realice un seguimiento de los iniciadores de eventos, arriba.
• Analizar el rendimiento en tiempo de ejecución (tutorial)

Analizar el rendimiento de representación con la herramienta Representación

Use la herramienta Representación para ayudar a visualizar el rendimiento de representación de la página. La herramienta Renderizado es una herramienta de Vista rápida ; si lo abre desde el menú de comandos, se abre en la parte inferior de DevTools.

Para abrir la herramienta Representación :

1. Abra una página web, como Animación lenta, en una nueva ventana o pestaña.

2. Haz clic con el botón derecho en la página web y, a continuación, selecciona Inspeccionar.

   Se abre DevTools.

3. Si no se muestra el panel Vista rápida , seleccione Personalizar y controlar DevTools () >alternar el panel Vista rápida.

   O presione Esc.

4. En la barra de herramientas de Vista rápida , haga clic en el botón Más herramientas () y, a continuación, seleccione Representación.

   La herramienta Representación se abre en el panel Vista rápida :

   

Vea también:

• Herramienta de renderización, para ver cómo se ve una página web con diferentes opciones de visualización o deficiencias de visión

Ve fotogramas por segundo en tiempo real con el medidor de FPS

El medidor de FPS es una superposición que aparece en la esquina superior izquierda de la página web representada. Proporciona una estimación en tiempo real de FPS a medida que se ejecuta la página. Para abrir el medidor de FPS:

1. Abra la herramienta Renderización . Consulte Analizar el rendimiento de representación con la herramienta Representación anterior.

2. Selecciona la casilla de verificación Estadísticas de representación de fotogramas . La superposición del medidor de FPS aparece en la página web representada:

   

Ver eventos de pintura en tiempo real con Paint Flashing

Use Paint Flashing para obtener una vista en tiempo real de todos los eventos de pintura en la página. Cada vez que se vuelve a pintar una parte de la página, DevTools resalta esa sección en verde.

Para activar el tapajuntas de pintura:

1. Abra la herramienta Renderización . Consulte Analizar el rendimiento de representación con la herramienta Representación anterior.

2. Active la casilla de verificación Paint Flashing . Aparecen contornos verdes en la página web representada:

   

Ver una superposición de capas con Bordes de capa

Para ver una superposición de bordes de capa y mosaicos en la parte superior de la página:

1. Abra la herramienta Renderización , como se describe en Analizar el rendimiento de representación con la herramienta Representación anterior.

2. Seleccione la casilla de verificación Bordes de capa . Los bordes de la capa aparecen en la página web representada:

   

Consulte los comentarios en debug_colors.cc para obtener una explicación de los códigos de colores.

Encontrar problemas de rendimiento de desplazamiento en tiempo real

Use la casilla Problemas de rendimiento de desplazamiento para identificar los elementos de la página que tienen escuchas de eventos relacionadas con el desplazamiento que pueden dañar el rendimiento de la página. DevTools describe los elementos potencialmente problemáticos en verde azulado.

Para ver los problemas de rendimiento de desplazamiento:

1. Abra la herramienta Renderización , como se describe en Analizar el rendimiento de representación con la herramienta Representación anterior.

2. Active la casilla Problemas de rendimiento de desplazamiento . Se describen los elementos potencialmente problemáticos:

   

Vea también:

• Rectángulos de desplazamiento lento (casilla de verificación) en Navegar por las capas de página web, índice z y DOM mediante la herramienta Vista 3D.

Deshabilitar fuentes locales

En la herramienta Representación , use la casilla de verificación Deshabilitar fuentes locales para emular las fuentes que faltan local() en @font-face las reglas.

Por ejemplo, cuando la fuente de Rubik está instalada en el dispositivo y la @font-face src regla la usa como local() fuente, Microsoft Edge usa el archivo de fuente local del dispositivo.

Cuando se selecciona Deshabilitar fuentes locales , DevTools ignora las local() fuentes y obtiene cada una de ellas de la red:

Esta característica es útil si usa dos copias diferentes de la misma fuente durante el desarrollo, como:

• Una fuente local para sus herramientas de diseño.
• Una fuente web para el código.

Use Deshabilitar fuentes locales para que sea más fácil:

• Depurar y medir el rendimiento de carga y la optimización de fuentes web.
• Compruebe la precisión de las reglas CSS @font-face .
• Descubra las diferencias entre las versiones locales instaladas en el dispositivo y una fuente web.

Visualizar fugas de memoria (herramienta Rendimiento: casilla de verificación memoria)

Como punto de partida para investigar el uso de memoria de la página web, use la casilla Memoria de la herramienta Rendimiento. ( O bien, Supervisar el uso de memoria en tiempo real (Administrador de tareas del explorador)).

La herramienta Rendimiento le ayuda a visualizar el uso de memoria de una página a lo largo del tiempo.

1. En DevTools, abra la herramienta Rendimiento .

2. Seleccione la casilla de verificación Memoria .

3. Realice una grabación, según Record performance, arriba.

Se recomienda iniciar y finalizar la grabación con una recolección forzada de elementos no utilizados. Para forzar la recolección de basura, haga clic en el botón recolectar basura la grabación.

Para demostrar las grabaciones de memoria, tenga en cuenta el código siguiente:

var x = [];
function grow() {
    for (var i = 0; i < 10000; i++) {
        document.body.appendChild(document.createElement('div'));
    }
    x.push(new Array(1000000).join('x'));
}
document.getElementById('grow').addEventListener('click', grow);

Cada vez que se hace clic en el botón al que se hace referencia en el código, se anexan 10 000 div nodos al cuerpo del documento y se inserta una cadena de 1 000 000 x caracteres en la x matriz. La ejecución del código anterior genera una grabación en la herramienta Rendimiento :

Primero, una explicación de la interfaz de usuario. El gráfico de montón en el panel Información general (debajo de NET) representa el montón de JS. Debajo del panel Descripción general se encuentra el panel Contador . El uso de memoria se desglosa por montón JS (igual que el gráfico HEAP en el panel Información general ), documentos, nodos DOM, agentes de escucha y memoria GPU. Desactive una casilla para ocultarla del gráfico.

Ahora, un análisis del código comparado con la figura anterior. Si revisa el contador del nodo (el gráfico verde), coincide limpiamente con el código. El número de nodos aumenta en pasos discretos. Puede suponer que cada aumento en el recuento de nodos es una llamada a grow().

El gráfico de montón de JS (el gráfico azul) no es tan sencillo. De acuerdo con las mejores prácticas, la primera inmersión es en realidad una recolección forzada de basura (haga clic en el botón recolectar basura ).

A medida que avanza la grabación, se muestran los picos de tamaño del montón de JS. Esto es natural y esperado: el código JavaScript crea los nodos DOM en cada botón en el que hace clic y está haciendo mucho trabajo cuando crea la cadena de un millón de caracteres.

La clave aquí es el hecho de que el montón de JS termina más alto de lo que comenzó (el "comienzo" aquí es el punto después de la recolección forzada de basura). En el mundo real, si viera este patrón de aumento del tamaño del montón de JS o del tamaño del nodo, podría indicar una pérdida de memoria.

Vea también:

• Vea las métricas de memoria, arriba.

Este trabajo está bajo una licencia Creative Commons Attribution 4.0 International.