Acelerar el tiempo de ejecución de JavaScript

02/12/2021
Tiempo de lectura: 4 minutos

Identifique funciones costosas mediante el panel Memoria.

Resumen

Registre exactamente qué funciones se llamaron y cuánta memoria necesita cada una con el muestreo de asignación en el panel Memoria.
Visualiza los perfiles como un gráfico de llamas.

Registrar un perfil de muestreo

Si observa jank en JavaScript, recopile un perfil de muestreo. Los perfiles de muestreo muestran dónde se dedica el tiempo de ejecución en las funciones de la página.

Vaya al panel Memoria de DevTools.
Elija el botón de radio Asignación de muestreo.
Elija Inicio.
Según lo que intente analizar, puede actualizar la página, interactuar con la página o simplemente dejar que se ejecute la página.
Elija el botón Detener cuando haya terminado.

Nota

También puede usar la API de 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 (Bottom Up). 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 criterio de ordenación

Para cambiar el orden de ordenación, seleccione el menú desplegable junto al icono de la función seleccionada de foco ( Función seleccionada por foco ) y, a continuación, elija una de opciones.

Gráfico. Muestra un gráfico cronológico de la grabación.

Heavy (Bottom Up). Enumera las funciones por impacto en el rendimiento y permite examinar las rutas de acceso de llamadas a las funciones. Esta es la vista predeterminada.

Tree (Top Down). Muestra una imagen general de la estructura de llamadas, comenzando en la parte superior de la pila de llamadas.

Funciones de exclusión

Para excluir una función del perfil de muestreo, selecciónelo y, a continuación, seleccione el botón excluir la función seleccionada ( ). La función de solicitud (parent) de la función excluida (child) se carga con la memoria asignada a la función excluida (child).

Elija el botón restaurar todas las funciones ( 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 con el 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 llama se divide en dos partes.

index	Parte	Descripción
1	Introducción	Una vista visual 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 están organizadas de arriba abajo. Por lo tanto, la función en la parte superior llamada a la que está debajo de ella, y así sucesivamente.

Las funciones se coloreadas aleatoriamente. No hay ninguna correlación con los colores usados en los otros paneles. Sin embargo, las funciones siempre tienen el mismo color entre invocaciones para que pueda observar patrones en cada tiempo de ejecución.

Una pila de llamadas alta no es necesariamente significativa, solo significa que se llamaron a muchas funciones. Pero una barra ancha significa que una función tardó mucho tiempo en completarse. Estos son los candidatos para la optimización.

Acercar partes específicas de la grabación

Elija, mantenga presionado y arrastre el mouse hacia la izquierda y la derecha a través de la información general para acercarse a partes concretas de la pila de llamadas. 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

Elija una función para ver la definición en el panel Orígenes.

Mantenga el mouse sobre una función para mostrar el nombre y los datos de temporización. Se proporciona la siguiente información.

Detalle	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ó.
Dirección URL	La ubicación de la definición de función en forma de dónde es el nombre del archivo donde se define la función y es el número de línea `base.js:261` `base.js` de la `261` definición.

Contactar al equipo de Microsoft Edge DevTools

Use las siguientes opciones para discutir las nuevas características y cambios de la publicación, o cualquier otro tema relacionado con DevTools.

Envíe sus comentarios con el icono Enviar comentarios o seleccione Alt + Shift + I \ (Windows, Linux ) o Option + Shift + I \ (MacOS ) en DevTools.
Tweet a @EdgeDevTools.
Enviar una sugerencia a la webque queremos.
Para archivar errores sobre este artículo, use la siguiente sección de comentarios .