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 obtener un tutorial paso a paso sobre cómo analizar el rendimiento de una página mediante la herramienta Rendimiento , consulte Introducción a la herramienta Rendimiento.

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, vea Undock DevTools en una ventana independiente en Cambiar ubicación de DevTools (Desacoplar, Acoplar a la parte inferior, Acoplar a la izquierda).

Abrir la herramienta Rendimiento

Para usar las secciones de esta página, abra la herramienta Rendimiento en DevTools:

1. Para abrir DevTools, haga clic con el botón derecho en la página web y, a continuación, seleccione 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 actividad, seleccione la pestaña Rendimiento . Si esa pestaña no está visible, haga clic en el botón Más herramientas ().

Rendimiento de registros

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

Registro 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 desea analizar, como la demostración de Photo Gallery.

2. En DevTools, abra la herramienta Rendimiento .

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

   

4. Interactúe con la página durante un tiempo. DevTools registra toda la actividad de página que se produce como resultado de las interacciones.

5. Vuelva a hacer clic en Grabar . O bien, haga clic en Detener para detener la grabación.

   La herramienta Rendimiento muestra la grabación.

Rendimiento de carga de registros

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 desea analizar, como la demostración de Photo Gallery.

2. En DevTools, abra la herramienta Rendimiento .

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

   

   DevTools registra las métricas de rendimiento mientras la página se actualiza y, a continuación, 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 acerca automáticamente la parte de la grabación donde se produjo la mayor parte de la actividad:

   

Captura de pantalla de capturas de pantalla durante la grabación

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

Para obtener información sobre cómo interactuar con capturas de pantalla, vea 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 elementos no utilizados mientras está grabando una página, haga clic en el botón Recopilar elementos no utilizados (

Mostrar la configuración de grabación

Para exponer más configuraciones relacionadas con cómo DevTools captura las grabaciones de rendimiento, en la herramienta Rendimiento , haga clic en el botón Capturar configuración (). Las casillas y 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 Capturar configuración ().

2. Active la casilla Deshabilitar ejemplos de JavaScript .

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

Las dos figuras 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.

Ejemplo de una grabación cuando se deshabilitan los ejemplos de JS:

Ejemplo de una grabación cuando se habilitan ejemplos de JS:

Limitación de 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 Capturar configuración ().

2. Establezca Red en el nivel de limitación deseado.

Limitación de 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 Capturar configuración ().

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

La limitación es relativa a las capacidades del equipo. Por ejemplo, la opción de ralentización 2 veces hace que la CPU funcione dos veces más lenta de lo normal. DevTools no simula realmente las CPU de los dispositivos móviles, ya que la arquitectura de los dispositivos móviles es muy diferente de la de los equipos de escritorio y portátiles.

Activar la instrumentación de representación avanzada

Para registrar más información de representación, habilite la instrumentación de representación avanzada:

1. En la herramienta Rendimiento , haga clic en el botón Capturar configuración ().

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

Con la instrumentación de representación avanzada habilitada, DevTools registra más información sobre la representación de la página, como la información de capa y las estadísticas del selector CSS. El rendimiento de la página puede verse afectado.

Por ejemplo, vea Ver información de capas y Ver estadísticas del selector CSS, a continuación.

Guardar una grabación

Para guardar una grabación como un archivo en el dispositivo, haga clic con el botón derecho en la grabación y, a continuación, seleccione Guardar perfil:

Carga de una grabación

Para cargar una grabación desde un archivo, haga clic con el botón derecho en la herramienta Rendimiento y, a continuación, 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 quitar esa grabación de la herramienta Rendimiento , haga clic en el botón Borrar grabación ():

Análisis de una grabación de rendimiento

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

Seleccionar una parte de una grabación

Puede seleccionar una parte de una grabación con un mouse, un teclado o un trackpad.

Mouse

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

• Arrastre el mouse hacia la izquierda o la derecha a través de información general. La información general es la sección que contiene los gráficos de CPU y NET:

Para desplazar un gráfico de llama larga en la sección Principal o en cualquiera de las secciones vecinas, haga clic y mantenga presionado mientras arrastra hacia arriba y hacia abajo. Arrastre a la izquierda o a la derecha para mover la parte de la grabación seleccionada.

Keyboard

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

1. Seleccione el fondo de la sección Principal o seleccione el fondo de una sección situada 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á centrada.

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

Trackpad

Para seleccionar una parte de una grabación mediante un trackpad:

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

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

Actividades de búsqueda

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 de búsqueda aparece en la parte inferior de la herramienta Rendimiento :

   

2. Escriba una consulta en el cuadro de búsqueda, como "recalcular estilo", para buscar todas las actividades que coincidan con esa consulta.

   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 de coincidencia, que se describe 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 ().

Para modificar la configuración de la consulta:

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

• Para usar una expresión regular en la consulta, haga clic en el botón Regex ().

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

Visualización de la actividad del subproceso principal

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

Seleccione un evento para ver más información sobre él en la pestaña Resumen . DevTools describe 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 él; Por ejemplo, en la ilustración anterior, un input evento produjo un Function Call, que ejecutó una función anónima que llamó filterByCamera a y, a continuación, populateGallery. A continuación, la populateGallery función realizó cambios dom mediante una llamada a set innerHTML.

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

Si desea ocultar el gráfico de llama detallado de las solicitudes de JavaScript, consulte Disable JavaScript samples (Deshabilitar ejemplos de JavaScript) anteriormente. Cuando se deshabilitan los ejemplos de JavaScript, solo se muestran eventos de alto nivel, como Event: input y Function Call de la ilustración anterior.

Visualización de 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 las actividades. Cada vista proporciona una perspectiva diferente sobre las actividades:

• Para ver las actividades en las que se ha dedicado más tiempo directamente, use la pestaña Abajo arriba .

• Para ver las actividades raíz que provocan la mayor parte del 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.

Actividades raíz

Abra la página web de demostración de pestañas de actividad en una nueva ventana o pestaña. Las pestañas de actividad son las pestañas Abajo arriba, Árbol de llamadas y Registro de eventos en la parte inferior de la herramienta Rendimiento . Estas pestañas muestran actividades raíz.

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

Para obtener un ejemplo de actividades raíz, vea la pestaña Árbol de llamadas, a continuación.

Pestaña Bottom-Up

Abra la página web de demostración de pestañas de actividad en una nueva ventana o pestaña.

Use la pestaña Abajo arriba para ver qué actividades han tardado más tiempo en agregarse directamente.

La pestaña Abajo arriba solo muestra 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 anterior.

En el gráfico de llama de la sección Principal de la ilustración anterior, se pasó casi todo el tiempo ejecutando las afunciones , by c . Las actividades principales de la pestaña Abajo arriba de la ilustración anterior son también a, by c. En la pestaña Abajo arriba , la siguiente actividad más costosa es Minor GC.

La columna Self Time representa el tiempo agregado dedicado directamente a esa actividad, en todas las repeticiones.

La columna Tiempo total representa el tiempo agregado dedicado a esa actividad o a cualquiera de los elementos secundarios.

Pestaña Árbol de llamadas

Abra la página web de demostración de pestañas de actividad en una nueva ventana o pestaña.

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

La pestaña Árbol de llamadas solo muestra 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 anterior.

En la ilustración anterior, los elementos de nivel superior de 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 produjo Event: mouseup, lo que provocó Function Call, que provocaba (anonymous), etc.

El tiempo de autoservicio representa el tiempo dedicado directamente a esa actividad. El tiempo total representa el tiempo dedicado a esa actividad o a cualquiera de los elementos secundarios.

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

Use el cuadro de texto Filtrar 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 actividad en función de varios criterios.

Haga clic en Mostrar pila más pesada () para mostrar otra tabla a la derecha de la tabla Actividad . 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 tardaron más tiempo en ejecutarse.

Pestaña Registro de eventos

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

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 175.7 ms elemento seleccionado en la ilustración anterior significa que la actividad se inició 175,7 ms después de que se iniciara la grabación.

La columna Self Time 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 elementos secundarios.

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

Use el cuadro de texto Filtrar para filtrar las actividades por nombre.

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

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

Visualización de la actividad de GPU

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

Visualización de 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 sobre ella en la pestaña Resumen .

Analizar fotogramas por segundo (FPS)

DevTools proporciona dos maneras de analizar fotogramas por segundo:

• Use la sección Marcos para ver cuánto tiempo tardó un fotograma determinado.

• Use el medidor fps para una estimación en tiempo real de FPS a medida que se ejecuta la página. Consulte Visualización de fotogramas por segundo en tiempo real con el medidor fps, a continuación.

Sección Marcos

En la sección Fotogramas se 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 sobre él:

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

Visualización de 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 se codifican en color de la siguiente manera:

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

Las solicitudes tienen cuadrados en la esquina superior izquierda:

• Un cuadrado azul oscuro en la parte superior izquierda de una solicitud significa que es una solicitud de mayor prioridad.
• Un cuadrado azul claro significa prioridad inferior.

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 hasta el Connection Start grupo de eventos, ambos inclusive. En otras palabras, es todo antes de Request Sent, exclusivo.

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

• La parte oscura de la barra es Content Download.

• La línea correcta es básicamente el tiempo dedicado a esperar el subproceso principal. Esto no se representa en la pestaña Temporización .

Visualización de métricas de memoria

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

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

Las líneas coloreadas del gráfico se asignan a las casillas de verificación de color encima del 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 de alrededor de la marca de 3600 ms a la marca de 6200 ms.

Vea también:

• Visualización de pérdidas de memoria (herramienta de rendimiento: casilla Memoria) a continuación.

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

Al analizar una sección como Red o Principal, a veces se necesita una estimación más precisa de cuánto tiempo tardaron determinados eventos. Mantenga presionada la tecla Mayús, haga clic y mantenga presionada la tecla y arrastre a la izquierda o a 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 capturas de pantalla, consulte Captura de pantallas durante la grabación, anteriormente.

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 pequeña versión de la captura de pantalla en la pestaña Resumen :

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

Visualización de la 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 Capturar configuración () 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 de la parte inferior de la herramienta Rendimiento :

   

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

Visualización de estadísticas del selector CSS

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

• En la herramienta Rendimiento , haga clic en el botón Capturar configuración () 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 , seleccione 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 recalcularon durante ese evento.

Visualización de mensajes entre ventanas, iframes y trabajos dedicados

La escala de tiempo del experimento DevTools: Mostrar flujos de distribución y control postMessage mejora la sección Principal de la herramienta Rendimiento para ayudarle a identificar postMessage rápidamente eventos y controladores, al distinguir los eventos desencadenados por 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 mediante el envío y el control de mensajes entre subprocesos de una aplicación aparecen como eventos genéricos de llamada a función de scripting. Con este experimento habilitado:

• postMessage los eventos dispatch aparecen como Schedule postMessage.
• postMessage Los eventos de controlador aparecen como En mensaje:

Este experimento le ayuda a investigar cuándo se produjo una postMessage llamada y cuánto tiempo se puso en cola el mensaje antes de que se inicie el postMessage controlador. Los eventos de distribución 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 () >Experimentos de configuración>, seleccione la casilla Escala de tiempo: Mostrar flujos de envío y control de postMessage, haga clic en el botón Cerrar (X) y, a continuación, haga clic en el botón Volver a cargar DevTools.

Vea también:

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

Análisis del 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.

Para abrir la herramienta Representación :

1. Para abrir DevTools, haga clic con el botón derecho en la página web y, a continuación, seleccione 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 actividad, haga clic en el botón Más herramientas ().

3. Haga clic en Representación en el menú desplegable. Aparece la herramienta Representación :

   

Visualización de fotogramas por segundo en tiempo real con el medidor fps

El medidor 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 Representación . Consulte Analizar el rendimiento de representación con la herramienta Representación, anteriormente.

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

   

Visualización de eventos de pintura en tiempo real con el parpadeo de pintura

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

Para activar el parpadeo de pintura:

1. Abra la herramienta Representación . Consulte Analizar el rendimiento de representación con la herramienta Representación, anteriormente.

2. Active la casilla Destellamiento de pintura . Los contornos verdes aparecen en la página web representada:

   

Visualización de una superposición de capas con bordes de capa

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

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

2. Active la casilla Bordes de capa . Los bordes de capa aparecen en la página web representada:

   

Consulte los comentarios de debug_colors.cc para obtener una explicación de las codificaciones de colores.

Buscar 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 agentes de escucha de eventos relacionados con el desplazamiento que pueden dañar el rendimiento de la página. DevTools describe los elementos potencialmente problemáticos en teal.

Para ver los problemas de rendimiento de desplazamiento:

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

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

   

Vea también:

• Los rects de desplazamiento lento (casilla) en Navegar por las capas de páginas web, z-index y DOM mediante la herramienta Vista 3D.

Deshabilitar fuentes locales

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

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

Cuando se selecciona Deshabilitar fuentes locales , DevTools omite las local() fuentes y captura cada fuente de la red:

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

• Fuente local para las herramientas de diseño.
• 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 las 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.

Visualización de pérdidas de memoria (herramienta de rendimiento: casilla Memoria)

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

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. Active la casilla Memoria .

3. Realice una grabación, por rendimiento de grabación, anteriormente.

Es una buena práctica iniciar y finalizar la grabación con una recolección de elementos no utilizados forzada. Para forzar la recolección de elementos no utilizados, haga clic en el botón Recopilar durante la grabación.

Para mostrar 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 1000 000 x caracteres en la x matriz. La ejecución del código anterior genera una grabación en la herramienta Rendimiento :

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

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

El gráfico del montón JS (el gráfico azul) no es tan sencillo. De acuerdo con los procedimientos recomendados, el primer descenso es realmente una recolección de elementos no utilizados forzada (haga clic en el botón Recopilar ).

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

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

Vea también:

• Vea las métricas de memoria, arriba.

Nota:

Las partes de esta página son modificaciones basadas en el trabajo creado y compartido por Google y usadas según los términos descritos en la licencia internacional creative Commons Attribution 4.0. La página original se encuentra aquí y está creada por Kayce Basques.

Esta obra está licenciada bajo una Licencia Internacional Creative Commons Attribution 4.0.