Acelerar el tiempo de ejecución de JavaScript ("Tipo de generación de perfiles de muestreo de asignación")
Para identificar funciones costosas, use la herramienta Memoria :
Registre exactamente qué funciones se llamaron y cuánta memoria requiere cada una con el muestreo de asignación en la herramienta Memoria .
Visualice sus perfiles como un gráfico de llamas.
Uso del tipo de generación de perfiles "Muestreo de asignación" para ver la asignación de memoria por función de JavaScript
Si observa jank (interrupciones de la representación) en JavaScript, recopile un perfil de muestreo de asignación de memoria mediante el tipo de generación de perfiles De muestreo de asignación . Un perfil de muestreo muestra qué funciones asignaron la mayor parte de la memoria.
Para usar el tipo de generación de perfiles de muestreo de asignación para ver la asignación de memoria por función JavaScript:
Abra una página web, como la página web de demostración Detached Elements, en una nueva ventana o pestaña.
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.
En DevTools, en la barra de actividad, seleccione la herramienta Memoria (
):
Si la herramienta Memoria no está visible, haga clic en el botón Más herramientas (
) y, a continuación, seleccione Memoria.Seleccione el botón De muestreo de asignación .
Si no se muestra el botón De muestreo de asignación , porque ya se muestra un perfil, en la parte superior izquierda, haga clic en Perfiles (
).En la sección Seleccionar instancia de máquina virtual JavaScript , si hay un trabajo en la página, puede seleccionarlo como destino de generación de perfiles.
En la parte inferior de la herramienta Memoria , haga clic en el botón Inicio .
Interactúe con la página web. Por ejemplo, haga clic en el botón Tráfico rápido y, a continuación, en el botón Detener de la página web de demostración.
En función de lo que intente analizar, puede actualizar la página, interactuar con la página o simplemente dejar que se ejecute la página.
En la parte superior izquierda de la herramienta Memoria, haga clic en el botón Detener 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 agrega 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 Heavy (abajo arriba).. Puede cambiar a la vista Gráfico o Árbol (arriba abajo), según la sección siguiente.
También puede usar la API Utilidades de consola para registrar 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 de perfil , que inicialmente indica Heavy (abajo arriba)::
Menuitems:
- Gráfico : gráfico cronológico de la grabación.
- Heavy (abajo arriba): Listas las funciones llamadas de la aplicación en orden de asignación de memoria y muestra la ruta de acceso de llamada para cada función. Vista predeterminada.
- Árbol (arriba abajo): muestra la estructura de llamada, empezando 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:
Pesado (abajo arriba)
El modo de vista Heavy (abajo arriba) enumera las funciones por impacto en el rendimiento y le permite examinar las rutas de acceso de llamada a las funciones. Esta es la vista predeterminada:
Árbol (arriba abajo)
El modo de vista Árbol (arriba abajo) muestra una imagen general de la estructura de llamada, empezando en la parte superior de la pila de llamadas:
Excluir funciones
Cuando se selecciona Heavy (abajo arriba) o Tree (Arriba abajo) (no Chart), hay varios botones que están disponibles (no atenuados) al seleccionar una fila:
-
Función seleccionada de foco (
-
Excluir 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 (primaria) de la función excluida (secundaria) se cobra con la memoria asignada asignada a la función excluida (secundaria).
Haga clic en el botón Restaurar todas las funciones () para restaurar todas las funciones excluidas de nuevo en la grabación.
Visualización de un perfil de muestreo de asignación de memoria como un gráfico
La vista 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 llama. Seleccione Gráfico en la lista desplegable Modo de vista de perfil (que inicialmente indica Heavy (abajo arriba)):
El gráfico de llamas se divide en dos partes:
| index | Parte | Descripción |
|---|---|---|
| 1 | Información general | Una vista de ojo de pájaro de toda la grabación. El alto de las barras corresponde a la profundidad de la pila de llamadas. Por lo tanto, cuanto mayor 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 se organizan de arriba abajo. Por lo tanto, la función en la parte superior llamó a la que está debajo, y así sucesivamente. |
Las funciones se colorean aleatoriamente. No hay ninguna correlación con los colores usados en los demás paneles. Sin embargo, las funciones siempre tienen el mismo color en todas las invocaciones, de modo que pueda observar patrones en cada tiempo de ejecución.
Una pila de llamadas alta no es necesariamente significativa; podría significar que se llamó a muchas funciones. Pero una barra ancha significa que una función tardó mucho tiempo en completarse, por lo que se trata de 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 a la izquierda y a la derecha a través de la información general. Después de acercar, 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 tiempo:
| 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 las funciones a las que llamó. |
| URL | 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 elementos no utilizados reducidos ("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 creados, quitados y, a continuación, recolector de 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 escala de tiempo.
Puede confiar en el explorador para limpiar elementos no utilizados del código. Sin embargo, es importante tener en cuenta que gc en sí es una operación costosa y varios GCs pueden ralentizar la experiencia del usuario de su sitio web o aplicación. Al grabar en la herramienta Rendimiento con la casilla Memoria activada, puede ver que la operación GC se produce en los acantilados empinados (disminuciones repentinas) del gráfico del montón:
Al reducir la cantidad de elementos no utilizados que está creando el código, puede reducir el costo de cada GC individual y el número de operaciones de GC.
Seguimiento de objetos descartados por GC
Para realizar un seguimiento de los objetos descartados por la recolección de elementos no utilizados:
En la herramienta Memoria , seleccione el botón De muestreo de asignación .
Haga clic en incluir objetos descartados por gc principal e incluir objetos descartados por la configuración de GC secundaria .
Haga clic en el botón de Inicio.
En la página web, realice las acciones que quiera investigar.
Haga clic en el botón Detener cuando haya terminado todas las acciones.
DevTools ahora realiza un seguimiento de todos los objetos que fueron GC'd durante la grabación. Use esta configuración para comprender la cantidad de elementos no utilizados que genera el sitio web o la aplicación. Los datos notificados por el muestreo de asignación le ayudarán a identificar las funciones que generan más elementos no utilizados.
Si está investigando objetos que solo eran GC'd durante operaciones de GC principales o secundarias específicas, configure los valores adecuadamente para realizar un seguimiento de la operación que le interesa. Para obtener más información sobre las diferencias entre gc principal y menor, vea Trash talk: the Orinoco garbage collector | Blog para desarrolladores del motor de JavaScript V8.
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 y Meggin Kearney.
Esta obra está licenciada bajo una Licencia Internacional Creative Commons Attribution 4.0.