Analizar datos de uso de memoria (JavaScript)

En este tema se describe el Analizador de memoria de JavaScript. Esta herramienta está disponible para las aplicaciones de la Tienda Windows compiladas mediante JavaScript en Visual Studio 2012 Update 1. Para obtener un tutorial que muestra cómo usar la herramienta, consulta Tutorial: Buscar una pérdida de memoria (JavaScript).

Ver datos de uso de memoria

Puedes usar el Analizador de memoria de JavaScript cuando tengas abierta en Visual Studio una aplicación de la Tienda Windows en funcionamiento.

Para ejecutar el Analizador de memoria de JavaScript

1. Si estás ejecutando la aplicación desde Visual Studio, haz clic en Equipo local, Simulador o Equipo remoto en la lista desplegable Iniciar depuración de la barra de herramientas Depuración.

   Para obtener más información sobre estas opciones, consulta Ejecutar aplicaciones de la Tienda Windows desde Visual Studio.

2. En el menú Depurar, apunta a Análisis de memoria de JavaScript y haz clic en una de estas opciones:

   • Iniciar proyecto de inicio. Haz clic en esta opción para iniciar el proyecto de inicio actual. Si estás ejecutando la aplicación en un equipo remoto, debes hacer clic en esta opción.

   • Iniciar paquete de aplicaciones instalado. Haz clic en esta opción para seleccionar una aplicación instalada que deseas analizar. Esta opción no se admite cuando la aplicación se ejecuta en un equipo remoto.

     Puedes usar esta opción para analizar el uso de memoria de las aplicaciones que has instalado en el equipo cuando no tienes acceso al código fuente. Esta opción también es útil cuando solo deseas analizar el uso de memoria de cualquier aplicación, fuera de tu propio desarrollo de aplicaciones.

   • Adjuntar a aplicación en ejecución. Haz clic en esta opción para seleccionar la aplicación en una lista de aplicaciones en ejecución. Esta opción no se admite cuando la aplicación se ejecuta en un equipo remoto.

     Puedes usar esta opción para analizar el uso de memoria de las aplicaciones que se ejecutan en el equipo cuando no tienes acceso al código fuente.

   Al iniciar el analizador de memoria, puede aparecer un Control de cuentas de usuario que solicite tu permiso para ejecutar VsEtwCollector.exe. Haz clic en Sí.

3. Cambia a Visual Studio presionando Alt+Tab.

   La Vista Resumen para el analizador de memoria de JavaScript aparece en la pestaña Concentrador de diagnósticos.

Vistas del uso de memoria

Al ejecutar el analizador de memoria de JavaScript, están disponibles estas vistas de los datos de uso de memoria:

• Vista Resumen. Proporciona un gráfico de uso de memoria de la aplicación en ejecución y una colección de todos los mosaicos del resumen de la instantánea. Esta vista aparece en la pestaña Concentrador de diagnósticos.

• Ver detalles de la instantánea. Muestra datos detallados de uso de memoria de una sola instantánea.

• Ver una diferencia de instantánea. Muestra datos detallados de uso de memoria como valores diferenciales entre dos instantáneas seleccionadas.

Vista Resumen

La vista de resumen proporciona un gráfico de uso de memoria de la aplicación actual y una colección de todos los mosaicos de resumen de la instantánea. En esta vista, puedes realizar tareas básicas como tomar instantáneas, analizar información de resumen y navegar a otras vistas.

El gráfico de memoria muestra una vista dinámica de la memoria de proceso de la aplicación, que incluye bytes privados, memoria nativa y el montón de JavaScript. Esta es la apariencia del gráfico:

El gráfico de memoria es una vista desplazable de la memoria de proceso.

Si se ha agregado alguna marca de perfil al código de la aplicación, aparece un triángulo Marca de usuario en el gráfico de uso de memoria para indicar cuándo se llega a dicha sección de código. Para obtener más información, consulta Comandos de la Consola JavaScript.

Parte de la memoria mostrada en el gráfico de memoria está asignada por el runtime de JavaScript. No puedes controlar este uso de memoria en tu aplicación. El uso de memoria que se muestra en el gráfico aumenta cuando tomas la primera instantánea y, a continuación, aumenta más despacio para cada instantánea adicional.

Ver un resumen de la instantánea

Puedes tomar una instantánea del estado actual del uso de memoria de la aplicación si haces clic en Tomar instantánea de montón en la vista de resumen. Un mosaico de resumen de la instantánea, que también aparece en la vista de resumen, muestra información sobre el montón de JavaScript y ofrece vínculos a información más detallada. Si has tomado dos o más instantáneas, una instantánea proporciona información adicional comparando sus datos con los de la instantánea anterior.

Nota

El analizador de memoria de JavaScript fuerza una recolección de elementos no utilizados antes de cada instantánea. Esto ayuda a garantizar que los resultados sean más coherentes entre las distintas ejecuciones.

En esta ilustración se muestra un ejemplo de una instantánea cuando se ha tomado una instantánea anterior.

Esta es la información que aparece en el resumen de la instantánea:

• Título de la instantánea y la marca de tiempo.

• Tamaño del montón (texto azul, lado izquierdo). Este número incluye los elementos y los objetos DOM que el runtime de JavaScript agrega al montón de JavaScript. El tamaño del montón es un vínculo a la vista Dominadores de la instantánea.

• Tamaño diferencial del montón (texto rojo o verde, lado izquierdo). Este valor muestra la diferencia entre el tamaño del montón de la instantánea actual y el de la instantánea anterior. El valor se muestra en color rojo si hay un aumento de memoria; si no, se muestra en color verde. Si el tamaño del montón es el mismo, el valor es Ninguna diferencia. Para la primera instantánea, el valor es simplemente Línea base (texto gris). Este valor es un vínculo a la vista Dominadores de la diferencia de instantánea.

• Recuento de objetos (texto azul, lado derecho). Este recuento solo muestra los objetos creados en la aplicación y filtra los objetos integrados creados por el runtime de JavaScript. El recuento de objetos tiene un vínculo a la vista Tipos de los detalles de la instantánea.

• Recuento de objetos diferencial (texto rojo o verde, lado derecho). Este valor muestra la diferencia entre el recuento de objetos de la instantánea actual y el de la instantánea anterior. El valor se muestra en color rojo si hay un aumento en el recuento de objetos; si no, se muestra en color verde. Si el recuento de objetos es el mismo, el valor es Ninguna diferencia. Para la primera instantánea, el valor es simplemente Línea base (texto gris). Este valor es un vínculo a la vista Tipos de la diferencia de instantánea.

• Captura de la pantalla en el momento en que se toma la instantánea.

Sugerencia

Es posible que un resumen de la instantánea no muestre ningún incremento, o que muestre una diferencia negativa de tamaño/recuento, pero puede ocultar una pérdida de memoria. Esto puede ocurrir cuando el número o el tamaño de los objetos recién creados es menor que el número o el tamaño de los objetos que se han eliminado. Por ejemplo, puede ser el resultado de una recolección de elementos no utilizados.

Ver detalles de la instantánea

Puedes ver información detallada sobre el uso de memoria de cada instantánea en la vista de detalles de la instantánea.

Desde la vista de resumen, puedes ver los detalles de la instantánea si haces clic en un vínculo de un resumen de la instantánea. Por ejemplo, el vínculo del tamaño del montón de un resumen de la instantánea abre los detalles de la instantánea. La vista Dominadores se abre de forma predeterminada.

Esta ilustración muestra la vista Tipos de un detalle de la instantánea.

En la vista detalles de la instantánea, están disponibles estas vistas adicionales de los datos de uso de memoria:

• Dominadores. Muestra una lista de todos los objetos que hay en el montón, ordenados por tamaño retenido.

• Tipos. Muestra el número de instancias y el tamaño total de objetos, agrupados por tipo de objeto. De forma predeterminada, están ordenados por número de instancia.

• Raíces. Muestra un árbol de objetos desde los objetos raíz a las referencias secundarias. De forma predeterminada, los nodos secundarios están ordenados por la columna de tamaño retenido, apareciendo el mayor en la parte superior.

• DOM. Muestra los objetos que son elementos de marcado (DOM) y su tamaño retenido. De forma predeterminada, están ordenados por tamaño retenido.

• WinRT. Muestra los objetos administrados y no administrados de Windows a los que se hace referencia desde la aplicación JavaScript. De forma predeterminada, están ordenados por tamaño retenido.

La mayoría de las vistas, como la vista Dominadores, muestran tipos de valor similares. Estos valores incluyen:

• Identificadores. Nombre que identifica mejor el objeto. Por ejemplo, para los elementos HTML mostramos el valor de atributo ID, si se usa alguno.

• Tipo. Nombre de tipo del objeto.

• Tamaño. Tamaño del objeto, sin incluir el tamaño de los objetos a los que se hace referencia.

• Tamaño retenido. Suma del tamaño del objeto más el de todos los objetos secundarios que no tienen ningún otro objeto primario. A efectos prácticos, esta suma es la cantidad de memoria retenida por el objeto, por lo que si eliminas el objeto recuperas la cantidad de memoria especificada.

• Recuento. Número de instancias del objeto. Este valor solo aparece en la vista Tipos.

Ver una diferencia de instantánea

En el analizador de memoria de JavaScript, puedes comparar una instantánea con una instantánea anterior en una vista de diferencias de instantánea.

En la vista de resumen, puedes ver los detalles diferenciales de instantánea si haces clic en otra instantánea en la lista desplegable que aparece en la esquina superior derecha de un mosaico del resumen de la instantánea.

La diferencia de instantánea te permite ver información diferencial sobre dominadores, tipos, raíces, objetos DOM y objetos de Windows en tiempo de ejecución.

La diferencia de instantánea muestra todos los objetos que se agregaron al montón entre las dos instantáneas. En la vista diferencial Raíces (y en el Gráfico de referencia), un color de texto gris claro indica que el propio objeto existía en la instantánea anterior, pero que tiene un elemento secundario que no tenía antes.

En esta ilustración se muestra la vista Dominadores en una diferencia de instantánea.

En las vistas de diferencia de instantánea, las vistas como Dominadores son iguales que en la vista de Ver detalles de la instantánea. Las vistas de diferencia de instantánea muestran los mismos tipos de valor que las vistas de detalles de la instantánea, con estos valores adicionales:

• Diferencia de tamaño. Diferencia entre el tamaño del objeto en la instantánea actual y su tamaño en la instantánea de comparación (la instantánea anterior), sin incluir el tamaño de los objetos a los que se hace referencia.

• Diferencia de tamaño retenido. Diferencia entre el tamaño retenido del objeto en la instantánea actual y su tamaño retenido en la instantánea de comparación (la instantánea anterior). El tamaño retenido incluye el tamaño del objeto más el tamaño de todos los objetos secundarios que no tienen ningún otro objeto primario. A efectos prácticos, el tamaño retenido es la cantidad de memoria retenida por el objeto, por lo que si eliminas el objeto recuperas la cantidad de memoria especificada.

• Diferencia de recuento. Diferencia entre el número de instancias del objeto en la instantánea actual y el número de instancias en la instantánea de comparación. Este valor solo aparece en la vista Tipos.

Mostrar en vista raíz

En las vistas Dominadores, Tipos, DOM y WinRT, puedes ver la relación de un objeto determinado con el objeto Global. Con esta característica, puedes buscar fácilmente un objeto conocido en la vista raíz sin buscar a través del árbol de objetos de Global.

Para usar la característica, haz clic con el botón secundario en un identificador en la vista Dominadores, Tipos, DOM o WinRT y, a continuación, haz clic en Mostrar en vista raíz.

Filtrar datos

En las vistas Dominadores, Tipos, DOM y WinRT, puedes buscar determinados identificadores para filtrar datos. Para buscar un identificador, simplemente escribe el valor en el cuadro de texto Filtro de identificador. Al empezar a escribir caracteres, se filtran los identificadores que no contienen los caracteres escritos.

Cada vista tiene su propio filtro, por lo que la información filtrada no se traslada de una vista a otra.

Ver referencias

Los paneles inferiores de las vistas Dominadores, Tipos, DOM y WinRT contienen un Gráfico de referencia que puedes usar para ver referencias compartidas. Si seleccionas un objeto en el panel superior, el Gráfico de referencia muestra una lista de referencias que apuntan al objeto seleccionado.

Si deseas ayuda general para identificar objetos equivalentes, puedes hacerlo en el panel superior haciendo clic en Mostrar Identificadores de objeto en la lista desplegable de valores situada en la esquina superior derecha del panel. Al hacer clic en esta opción, los identificadores de objeto aparecen junto a los objetos de la lista Identificadores. Los objetos que tienen el mismo identificador son referencias compartidas.

Mostrar valores integrados

En las vistas Dominadores, Tipos, DOM y WinRT, puedes mostrar objetos integrados. De forma predeterminada, estas vistas solo muestran los objetos que creas en la aplicación. Esto ayuda a filtrar información innecesaria y aislar problemas relacionados con la aplicación. Sin embargo, a veces puede ser útil ver todos los objetos que el runtime de JavaScript genera para la aplicación. Puedes ver estos objetos en el analizador de memoria de JavaScript.

Para mostrar estos objetos, haz clic en Mostrar elementos integrados en la lista desplegable de valores situada en la esquina superior derecha del panel.

Archivos de sesión de diagnóstico

Los resúmenes de instantánea de diagnóstico, junto con las vistas de detalles asociadas, se guardan como archivos .diagsession. El Explorador de soluciones muestra las sesiones de diagnóstico anteriores en la carpeta Diagnostic Sessions. En el Explorador de soluciones, puedes abrir sesiones anteriores o quitar o cambiar el nombre de archivos.

Comandos de la Consola JavaScript

El analizador de memoria de JavaScript admite los dos Comandos de la Consola JavaScript siguientes que puedes usar en el código como ayuda para aislar la sección del código donde se está produciendo un problema de memoria. Estos comandos inician una excepción si los agregas a la aplicación y ejecutas la aplicación en cualquier contexto distinto del analizador de memoria. (No obstante, puedes probar si los comandos existen antes de usarlos. Los comandos no existirán al principio de la fase de inicio de sesión).

• console.takeHeapSnapshot toma una instantánea de montón que aparece en el analizador de memoria de JavaScript.

• console.profileMark establece una marca de perfil (el triángulo Marca de usuario) que aparece en la escala de tiempo del gráfico de memoria en la vista de resumen. Este comando toma un argumento de cadena que representa una descripción del evento y aparece como información sobre herramientas en el gráfico de memoria. Esta descripción no debe tener más de 100 caracteres.

En el siguiente ejemplo de código se muestra cómo llamar de forma segura a takeHeapSnapshot.

    if (console && console.takeHeapSnapshot) { console.takeHeapSnapshot(); }

En el siguiente ejemplo de código se muestra cómo llamar de forma segura a profileMark.

    if (console && console.profileMark) { console.profileMark("Initialized"); }

Sugerencias para identificar problemas de memoria

Estas sugerencias pueden ayudarte a diagnosticar problemas de uso de memoria:

• Usa la vista Dominadores de una diferencia de instantánea para intentar identificar problemas importantes de memoria rápidamente.

• Usa la Mostrar en vista raíz como ayuda para identificar dónde se hace referencia a un objeto en la jerarquía de memoria total.

• Cuando la causa de un problema de memoria es difícil de identificar, usa las diferentes vistas (como Dominadores y Tipos) para buscar cosas en común, como objetos relacionados y tipos.

• Considera si sería útil modificar temporalmente el código para aislar problemas. Por ejemplo, puedes:

  • Usa los Comandos de la Consola JavaScript para el analizador de memoria, console.takeSnapshot y console.profileMark.

    Puedes usar estos comandos para aislar los problemas que no se puede aislar haciendo clic manualmente en Tomar instantánea de montón.

  • Crea un objeto de prueba que se pueda encontrar fácilmente en las vistas del analizador de memoria de JavaScript, como la vista Dominadores. Por ejemplo, puedes adjuntar un objeto muy grande a otro objeto para ver si un objeto o un elemento determinado ha sido detectado durante la recolección de elementos no utilizados.

• Busca objetos que se conserven en memoria involuntariamente después de la navegación a una nueva página. Esta es una causa frecuente de los problemas de memoria. Por ejemplo, el uso incorrecto de la función URL.CreateObjectUrl puede producir este problema.

Vea también

Tareas

Tutorial: Buscar una pérdida de memoria (JavaScript)