Usar la herramienta de generador de perfiles para analizar el rendimiento del código

Este contenido hace referencia a una versión anterior de las herramientas de desarrollo F12. Visita nuestra documentación más actualizada sobre las herramientas F12.

Las herramientas F12 proporcionan un generador de perfiles de script integrado que te permite analizar el rendimiento del código JavaScript que se ejecuta en Windows Internet Explorer 9. Este tema explica las características de esta herramienta y cómo puedes usarla para comprobar el rendimiento de los scripts.

Generar perfiles de script

Para comenzar, abre la página de la que deseas genera un perfil en Internet Explorer 9. En Internet Explorer 9, presiona F12 para abrir las herramientas de F12 y, a continuación, haz clic en la pestaña Generador de perfiles.

El generador de perfiles te permite iniciar y detener la generación de perfiles, y ofrece varias vistas o informes de las funciones, la cantidad de veces que se ejecutaron y la hora en que se ejecutó cada una.

Cuando haces clic por primera vez en la pestaña Generador de perfiles, la cuadrícula está vacía. Haz clic en el botón Iniciar la creación de perfiles y, a continuación, ejecuta el código del que deseas generar el perfil en el explorador. Si deseas comenzar desde la carga inicial de la página web, haz clic en Actualizar para ejecutar el código en la página. Haz clic en Detener la creación de perfiles cuando quieras detener la recopilación de datos y ver los resultados. Para generar el perfil de una sección del código, haz clic en Iniciar la operación de perfiles, ejecuta solamente esa sección en el explorador (como una función llamada con el clic de un botón) y, a continuación, haz clic en Detener la creación de perfiles.

Ver informes de perfiles

Los informes de la herramienta del generador de perfiles se generan automáticamente cuando haces clic en Detener la creación de perfiles. Cada sesión del generador de perfiles es un informe distinto, de modo que puedes ejecutar un perfil todas las veces que quieras, como para varias secciones del script, o modificar los valores y el perfil en la misma sección nuevamente. Solamente el informe del generador de perfiles más actualizado se muestra de manera predeterminada, pero puedes hacer clic en la lista desplegable Informe actual para ver otros.

Los informes se pueden ver de dos maneras, en funciones o en vistas de árbol de llamadas. La vista Funciones muestra todas las funciones en el orden en el que se ejecutaron. La vista Árbol de llamadas muestra la jerarquía de las funciones, para que puedas ver las relaciones principales y secundarias con mayor facilidad.

Captura de pantalla de la pestaña del perfil de herramientas F12 con vista de funciones.

Tipos de datos de perfil

El generador de perfiles devuelve hasta 12 columnas de datos del perfil. En el informe, puedes hacer clic con el botón secundario en la parte superior de las columnas y agregar o quitar columnas. La siguiente tabla muestra los datos disponibles.

Encabezado de columnaQué muestra
FunciónEl nombre de la función de la que se genera el perfil.
NúmeroEl número total de veces que se llamó a esta función.
Tiempo transcurrido (ms)La cantidad de tiempo de ejecución que transcurrió dentro de esa función. Esto incluye el tiempo transcurrido en funciones secundarias y externas llamadas desde esa función.
Tiempo transcurrido %El porcentaje de tiempo de ejecución que transcurrió dentro de esa función. Esto incluye el tiempo transcurrido en funciones secundarias y externas llamadas desde esa función.
Tiempo exclusivo (ms)La cantidad de tiempo de ejecución que transcurrió dentro de esa función. Esto excluye el tiempo transcurrido en funciones externas y secundarias llamadas desde esa función.
Tiempo exclusivo %El porcentaje de tiempo de ejecución que transcurrió dentro de esa función. Esto excluye el tiempo transcurrido en funciones externas y secundarias llamadas desde esa función.
Promedio de tiempo (ms)El tiempo promedio transcurrido en esta función y en sus funciones secundarias y externas.
Tiempo máx. (ms)El tiempo máximo transcurrido en esta función y en sus funciones secundarias y externas.
Tiempo mín. (ms)El tiempo mínimo transcurrido en esta función y en sus funciones secundarias y externas.
Tipo de funciónTipo de función: DOM, usuario, incorporada.
URLURL del archivo de origen donde se define esta función.
Número de líneaEl número de línea para el comienzo de esta función en el código de origen.

 

El tiempo exclusivo y el tiempo transcurrido puedan dar un indicio de los problemas del código. El tiempo exclusivo proporciona el tiempo total de la función y de las funciones llamadas o llamadas por las funciones secundarias. El tiempo exclusivo muestra solamente el tiempo transcurrido dentro de esa función específica. Es posible tener un tiempo transcurrido alto en una función, pero el tiempo exclusivo es mínimo. Por ejemplo:



function bar() {
// do some work for a 250 milliseconds
}

function foo() {
// do some work for 200 milliseconds and then call bar()
bar();
}

function main() {
//do some work for 50 milliseconds then call foo()
foo();
}


En este ejemplo, se llama a la función "main()", que funciona durante 50 milisegundos y, a continuación, llama a "foo()", que toma 200 milisegundos y, a continuación llama a "bar()", que funciona durante 250 milisegundos antes de finalizar. El siguiente cuadro muestra los valores que pueden mostrar el tiempo transcurrido y el tiempo exclusivo.

FunciónTiempo transcurridoTiempo exclusivo
main()500 ms50 ms
foo()450 ms200 ms
bar()250 ms250 ms

 

El tiempo transcurrido de cada función es el tiempo que le lleva a la función ejecutarse, más todo el tiempo que tomarán para ejecutarse las funciones que la siguen (secundarias). El tiempo exclusivo es solamente el tiempo de la función actual. La función "bar()", como la última de la cadena, muestra el mismo tiempo para ambos.

Buscar y ordenar informes

Puedes buscar funciones específicas en tus informes con el cuadro Buscar de las herramientas de F12 en la esquina superior derecha de la herramienta. Escribe todo o parte del nombre en el cuadro Buscar y haz clic en el botón de búsqueda o presiona Entrar. Se resaltan todas las instancias del teclado y el informe se desplaza hasta la primera instancia. Puedes navegar entre las coincidencias presionando Entrar, Mayús + Entrar o haciendo clic en los botones de resultado Siguiente o Anterior.

Imagen de los botones Siguiente y Anterior de la búsqueda de las herramientas F12.

Cuando buscas en la vista Árbol de llamadas, se expanden todas las funciones principales situadas por encima de las funciones que coinciden.

Haz clic en el encabezado de cualquier columna visible para ordenar por ese dato. Puedes pasar de orden ascendente a descendente y viceversa volviendo a hacer clic en el encabezado. También puedes hacer clic con el botón secundario en el área de datos de la pestaña Generador de perfiles, hacer clic en Ordenar por y, a continuación, elegir la columna que quieres.

Cuando ordenas la vista de informe Árbol de llamadas, solamente se ordenan los valores de las funciones de nivel superior. Las funciones secundarias permanecen en su orden de jerarquía.

Copiar y guardar informes

Puedes copiar toda la información o parte de ella en los informes del generador de perfiles seleccionando las filas y presionando Ctrl+C o haciendo clic con el botón secundario y haciendo clic en Copiar. Para seleccionar todas las filas, presiona Ctrl + A y, a continuación, presiona Ctrl+C.

Para exportar directamente a un archivo delimitado por comas (.csv), haz clic en el icono Exportar (al lado del botón Iniciar la creación de perfiles). La función de exportación guarda todas las filas, incluidos los encabezados, mientras que copiar y pegar incluye las filas seleccionadas sin los encabezados.

Temas relacionados

Cómo usar las herramientas de desarrollo F12 para depurar las páginas web

 

 

Mostrar:
© 2014 Microsoft