Aceleración del tiempo de ejecución de JavaScript
Para identificar funciones costosas, use la herramienta Memoria .
Resumen
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.
Registro de un perfil de muestreo
Si observa jank (interrupciones de la representación) en JavaScript, recopile un perfil de muestreo. Los perfiles de muestreo muestran dónde se dedica el tiempo de ejecución a las funciones de la página.
En DevTools, vaya a la herramienta Memoria .
Haga clic en el botón De muestreo de asignación .
Haga clic en Iniciar.
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.
Cuando haya terminado, haga clic en el botón Detener .
También puede usar la API Utilidades de consola para registrar y agrupar perfiles desde la línea de comandos.
Ver perfil de muestreo
Cuando termine de grabar, DevTools rellena automáticamente el panel Memoria en PERFILES DE MUESTREO con los datos de la grabación.
La vista predeterminada es Heavy (abajo arriba).. Esta vista le permite revisar qué funciones tuvieron más impacto en el rendimiento y examinar la ruta de acceso de solicitud para cada función.
Cambiar el criterio de ordenación
Para cambiar el orden, seleccione el menú desplegable situado junto al icono de función seleccionada de foco (
) y, a continuación, seleccione una de las siguientes opciones:
Gráfico. Muestra un gráfico cronológico de la grabación.
Pesado (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). Muestra una imagen general de la estructura de llamada, empezando en la parte superior de la pila de llamadas.
Excluir funciones
Para excluir una función del perfil de muestreo, selecciónela y 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.
Ver perfil de muestreo como 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, vea la grabación como un gráfico de llama cambiando el criterio de ordenación a Gráfico.
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. |
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 (Technical Writer, Chrome DevTools & Lighthouse) y Meggin Kearney (Escritor técnico).
Esta obra está licenciada bajo una Licencia Internacional Creative Commons Attribution 4.0.