Acelerar el tiempo de ejecución de JavaScript

Identifique funciones costosas mediante el panel Memoria.

Perfiles de ejemplo

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.

  1. Vaya al panel Memoria de DevTools.
  2. Elija el botón de radio Asignación de muestreo.
  3. Elija Inicio.
  4. 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.
  5. 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  las siguientes opciones.

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

Gráfico de llamas

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.

Gráfico pesado

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

Gráfico de árbol

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

Vista gráfico de llamas

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.

Gráfico de llama anotado

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

Gráfico zoomed

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.

Ver detalles de funciones en el gráfico

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 .

El icono enviar comentarios en el DevTools de Microsoft Edge

Nota

Algunas partes de esta página son modificaciones basadas en el trabajo creado y compartido por Google y se usan según los términos descritos en la Licencia internacional de Creative Commons Attribution 4.0.
La página original se encuentra aquí y está redactada por Kayce Basques (Technical Writer, Chrome DevTools & Lighthouse) y Meggin Kearney (Tech Writer).

Licencia de Creative Commons
Este trabajo dispone de licencia conforme a Licencia internacional de Creative Commons Attribution 4.0.