Acelerar el tiempo de ejecución de JavaScript (tipo de generación de perfiles "Muestreo de asignación")

Para identificar funciones costosas, use la herramienta Memoria :

Registre exactamente qué funciones fueron llamadas y cuánta memoria requiere cada una con Muestreo de asignación en la herramienta Memoria .

Visualice sus perfiles como un gráfico de llamas.

Use el tipo de generación de perfiles "Muestreo de asignación" para ver la asignación de memoria por función JavaScript

Si observa bloqueos (interrupciones de la representación) en JavaScript, recopile un perfil de muestreo de asignación de memoria mediante el tipo de perfil de muestreo de asignación . Un perfil de muestreo muestra qué funciones asignaron la mayor cantidad de memoria.

Para usar el tipo de generación de perfiles de muestreo de asignación para ver la asignación de memoria por la función JavaScript:

1. Abra una página web, como la página web de demostración de Elementos desasociados, 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.

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

3. En DevTools, en la barra de actividades, seleccione la herramienta Memoria (icono de ):

   

   Si la herramienta Memoria no está visible, haga clic en el botón Más herramientas () y seleccione Memoria.

4. Seleccione el botón de opción Muestreo de asignación .

   Si no se muestra el botón de opción Muestreo de asignación , porque ya se muestra un perfil, en la esquina superior izquierda, haga clic en Perfiles ().

5. En la sección Seleccionar instancia de VM de JavaScript , si hay un trabajo en la página, puede seleccionarlo como destino de generación de perfiles.

6. En la parte inferior de la herramienta Memoria , haga clic en el botón Inicio .

7. Interactúa con la página web. Por ejemplo, haga clic en el botón de Tráfico rápido y, después, en el botón Detener en la página web de demostración.

   En función de lo que intente analizar, puede actualizar la página, interactuar con ella o simplemente dejar que la página se ejecute.

8. En la parte superior izquierda de la herramienta Memoria, haga clic en el botón Detener la generación de perfiles de montón (

   O bien, en la parte inferior de la herramienta Memoria , haga clic en el botón Detener . Se agregará un nuevo perfil en la sección Perfiles de muestreo de la barra lateral Perfiles:

   

   El perfil de muestreo muestra un desglose de la asignación de memoria por función. La vista predeterminada es Pesada (de abajo hacia arriba). Puede cambiar a la vista de gráfico o árbol (arriba hacia abajo), según la sección siguiente.

También puede utilizar la API de utilidades de consola para grabar y agrupar perfiles desde la línea de comandos.

Cambiar la vista de un perfil de muestreo

Para cambiar el criterio de ordenación en un perfil de muestreo de asignación de memoria, use la lista desplegable Modo de vista perfil, que inicialmente indica Pesado (de abajo a arriba):

Menús:

• Gráfico - Gráfico cronológico de la grabación.
• Pesado (de abajo a arriba): enumera las funciones llamadas de la aplicación en orden de asignación de memoria y muestra la ruta de llamada para cada función. La vista predeterminada.
• Tree (Top Down) - Muestra la estructura de llamada, comenzando en la parte superior de la pila de llamadas.

Gráfico

El modo de vista Gráfico muestra un gráfico cronológico de la grabación:

Pesada (de abajo hacia arriba)

El modo de vista Pesada (de abajo a arriba) enumera las funciones según el impacto en el rendimiento y le permite examinar las rutas de llamada a las funciones. Esta es la vista predeterminada:

Tree (Top Down)

El modo de vista de árbol (arriba hacia abajo) muestra una imagen general de la estructura de llamada, comenzando en la parte superior de la pila de llamadas:

Excluir funciones

Cuando se selecciona Pesado (de abajo hacia arriba) o Árbol (de arriba hacia abajo) (no Gráfico), hay varios botones que están disponibles (no atenuados) al seleccionar una fila:

• Función seleccionada de foco (
• Excluir la función seleccionada ()
• Restaurar todas las funciones ()

Para excluir una función de un perfil de muestreo de asignación de memoria, seleccione el perfil de muestreo y, a continuación, haga clic en el botón Excluir función seleccionada (). La función solicitante (padre) de la función excluida (hijo) se carga con la memoria asignada asignada a la función excluida (hijo).

Haga clic en el botón Restaurar todas las funciones () para restaurar todas las funciones excluidas en la grabación.

Ver un perfil de muestreo de asignación de memoria como un gráfico

La vista de gráfico proporciona una representación visual del perfil de muestreo a lo largo del tiempo.

Después de grabar un perfil de muestreo de asignación de memoria, vea la grabación como un gráfico de llamas. Seleccione Gráfico en la lista desplegable del modo de vista Perfil (que inicialmente dice Pesado (de abajo hacia arriba)):

La tabla de llama se divide en dos partes:

index	Part	Descripción
1	Información general	Una vista de pájaro de toda la grabación. La altura de las barras corresponde a la profundidad de la pila de llamadas. Por lo tanto, cuanto más alta sea la barra, más profunda será la pila de llamadas.
2	Pilas de llamadas	Se trata de una vista detallada de las funciones a las que se llamó durante la grabación. El eje horizontal es el tiempo y el eje vertical es la pila de llamadas. Las pilas están organizadas de arriba hacia abajo. Entonces, la función en la parte superior llamó a la que está debajo de ella, y así sucesivamente.

Las funciones se colorean aleatoriamente. No hay ninguna correlación con los colores utilizados en los otros paneles. Sin embargo, las funciones siempre tienen el mismo color en todas las invocaciones, de modo que puede observar patrones en cada tiempo de ejecución.

Una pila de llamadas alta no es necesariamente significativa; podría significar que se llamaron muchas funciones. Pero una barra ancha significa que una función tardó mucho tiempo en completarse, por lo que son candidatos para la optimización.

Acercar partes específicas de la grabación

Para acercar partes concretas de la pila de llamadas, haga clic y arrastre hacia la izquierda y hacia la derecha por la vista general. Después de hacer zoom, la pila de llamadas muestra automáticamente la parte de la grabación que seleccionó.

Ver detalles de la función

Haga clic en una función para verla en la herramienta Orígenes .

Mantenga el puntero sobre una función para mostrar el nombre y los datos de intervalos:

Detalles	Descripción
Name	Nombre de la función.
Tamaño propio	Tamaño de la invocación actual de la función, incluidas solo las instrucciones de la función.
Tamaño total	El tamaño de la invocación actual de esta función y de cualquier función a la que haya llamado.
URL	La ubicación de la definición de función en forma de base.js:261 donde base.js es el nombre del archivo donde se define la función y 261 es el número de línea de la definición.

Investigar la asignación de memoria, con menos elementos no utilizados (casillas "Incluir objetos")

De forma predeterminada, el tipo de generación de perfiles de muestreo de asignación solo notifica las asignaciones que siguen activas al final de la sesión de grabación. Los objetos que se crean, eliminan y luego se recolectan como elementos no utilizados (GC'd) no se muestran en la herramienta Memoria al generar perfiles mediante el muestreo de asignación o Asignaciones en los tipos de generación de perfiles de línea de tiempo.

Puede confiar en que el explorador limpiará la basura del código. Sin embargo, es importante tener en cuenta que la GC en sí misma es una operación costosa y que varios GC pueden ralentizar la experiencia del usuario en tu sitio web o aplicación. Al grabar en la herramienta Rendimiento con la casilla Memoria activada, puede ver que la operación de GC se produce en los acantilados pronunciados (disminuciones repentinas) del gráfico del montón:

Al reducir la cantidad de elementos no utilizados que crea el código, puede reducir el costo de cada GC individual y el número de operaciones de GC.

Realizar un seguimiento de objetos descartados por GC

Para realizar un seguimiento de los objetos descartados por la recolección de elementos no utilizados:

1. En la herramienta Memoria , seleccione el botón de opción Muestreo de asignación .

2. Haga clic en Incluir objetos descartados por GC principal e Incluir objetos descartados por configuraciones secundarias de GC .

   

3. Haga clic en el botón de Inicio.

4. En la página web, realiza las acciones que quieras investigar.

5. Haz clic en el botón Detener cuando hayas terminado todas las acciones.

DevTools ahora realiza un seguimiento de todos los objetos que se recolectaron como elementos no utilizados (GC'd) durante la grabación. Usa esta configuración para comprender la cantidad de basura que genera tu sitio web o aplicación. Los datos notificados por el muestreo de asignaciones le ayudarán a identificar las funciones que generan la mayor cantidad de basura.

Si está investigando objetos que solo se GC durante operaciones de GC principales o secundarias específicas, configure las opciones apropiadamente para realizar un seguimiento de la operación que le interesa. Para obtener más información sobre las diferencias entre GC mayor y menor, consulte Charla de basura: el recolector de basura del Orinoco | Blog de desarrolladores del motor JavaScript V8.

Nota:

Algunas partes de esta página son modificaciones que se basan en trabajo creado y compartido por Google y que se usan de acuerdo con los términos descritos en la Licencia internacional de Creative Commons Atribution 4.0. La página original se encuentra aquí y está escrita por Kayce Basques y Meggin Kearney.

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