Анализ данных об использовании памяти (JavaScript)

В этом разделе описывается анализатор памяти JavaScript. Это средство доступно для приложений для Магазина Windows, разработанных в Visual Studio 2012 Обновление 1 с использованием JavaScript. Руководство по использованию этого средства см. в разделе Руководство. Поиск утечек памяти (JavaScript).

Просмотр данных об использовании памяти

Анализатор памяти JavaScript можно использовать, когда в Visual Studio открыто работающее приложение для Магазина Windows.

Запуск анализатора памяти JavaScript

1. При запуске приложения из Visual Studio щелкните Локальный компьютер, Имитатор или Удаленный компьютер в раскрывающемся списке Начать отладку на панели инструментов Отладка.

   Дополнительные сведения об этих возможностях см. в разделе Запуск приложений для Магазина Windows из Visual Studio.

2. В меню Отладка выберите пункт Анализ памяти JavaScript, а затем щелкните один из следующих пунктов:

   • Запустить запускаемый проект. Щелкните этот вариант, чтобы запустить текущий запускаемый проект. При запуске приложения на удаленном компьютере необходимо выбрать этот параметр.

   • Запустить установленный пакет приложения. Щелкните этот вариант, чтобы выбрать установленное приложение, которое необходимо проанализировать. Этот параметр не поддерживается при запуске приложения на удаленном компьютере.

     Этот параметр можно использовать для анализа использования памяти приложениями, установленными на локальном компьютере при отсутствии доступа к исходному коду. Этот параметр также может быть полезен, если необходимо проанализировать использование памяти любым приложением, не относящимся к приложениям, которые вы разрабатываете.

   • Присоединить к выполняющемуся приложению. Щелкните этот параметр, чтобы выбрать приложение из списка выполняющихся приложений. Этот параметр не поддерживается при запуске приложения на удаленном компьютере.

     Этот параметр можно использовать для анализа использования памяти приложениями, запущенными на локальном компьютере при отсутствии доступа к исходному коду.

   При запуске анализатора памяти может появиться сообщение системы контроля учетных записей с запросом разрешения на запуск файла VsEtwCollector.exe. Нажмите кнопку Да.

3. Перейдите в Visual Studio, нажав сочетание клавиш ALT+TAB.

   Представление "Сводка" для анализатора памяти JavaScript отображается на вкладке "Диагностика".

Представления использования памяти

При запуске анализатора памяти JavaScript доступны следующие представления использования данных.

• Представление "Сводка". Предоставляет граф использования памяти для выполняющегося приложения и коллекцию всех плиток сводки снимков. Это представление отображается на вкладке "Диагностика".

• Просмотр сведений о снимке. Содержит подробные сведения об использовании памяти для отдельного снимка.

• Просмотр разницы между снимками. Содержит подробные сведения об использовании памяти в виде разностных значений между двумя выбранными снимками.

Представление "Сводка"

Представление сводки содержит граф использования памяти для выполняющегося приложения и коллекцию всех плиток сводки снимков. В этом представлении можно выполнять основные задачи, такие как создание снимков, анализ сводных сведений и переход к другим представлениям.

Граф памяти показывает использование памяти процессом приложения в реальном времени, включая байты исключительного использования и кучу JavaScript. Ниже показано, как выглядит граф.

Граф памяти представляет собой прокручиваемое представление памяти процесса.

Если все метки профилирования были добавлены в код приложения, на графе использования памяти будет отображаться треугольник Пользовательский маркер, показывающий, когда достигается тот или иной фрагмент кода. Дополнительные сведения см. в разделе Команды консоли JavaScript.

Часть показанной на графе памяти выделяется средой выполнения JavaScript. В приложении невозможно контролировать использование этой памяти. Показываемое на графе использование памяти увеличивается при получении первого снимка, а затем увеличивается с меньшим шагом для каждого дополнительного снимка.

Просмотр сводки снимков

Вы можете сделать снимок текущего состояния использования памяти приложением, щелкнув Создать снимок кучи в сводном представлении. Плитка сводки снимков, которая также появится в сводном представлении, содержит сведения о куче JavaScript и ссылки на более подробные сведения. При наличии двух или более снимков снимок будет содержать дополнительную информацию, сравнивающую его данные с предыдущим снимком.

На этом рисунке показан пример снимка, для которого существует предыдущий снимок.

В сводке снимка отображаются следующие сведения:

• заголовок снимка и метка времени;

• размер кучи (синий текст слева). Это число включает объекты и элементы DOM, которые среда выполнения JavaScript, добавляет в кучу JavaScript. Размер кучи является ссылкой на представление "Доминаторы" снимка;

• Разностный размер кучи (красный или зеленый текст слева). Это значение показывает разницу между размер кучи текущего снимка и размером кучи предыдущего снимка. Значение отображается красным цветом, если объем кучи увеличился, и зеленым цветом в противном случае. Если размер кучи остался прежним, отображается значение Разница отсутствует. Для первого снимка значение просто равно Базовому (серый текст). Это значение является ссылкой на представление "Доминаторы" разницы между снимками;

• число объектов (синий текст справа). Этот счетчик показывает только объекты, созданные в приложении, и не учитывает объекты, созданные средой выполнения JavaScript. Число объекта является ссылкой на представление "Типы" сведений о снимке;

• разность числа объектов (красный или зеленый текст справа). Это значение показывает разницу между числом объектов текущего снимка и числом объектов предыдущего снимка. Значение отображается красным цветом, если число объектов увеличилось, и зеленым цветом в противном случае. Если число объектов осталось прежним, отображается значение Разница отсутствует. Для первого снимка значение просто равно Базовому (серый текст). Это значение является ссылкой на представление "Типы" разницы между снимками.

• Снимок экрана в момент создания снимка.

Просмотр сведений о снимке

Подробные сведения об использовании памяти можно просматривать для каждого отдельного снимка в представлении сведений о снимке.

Чтобы открыть сведения о снимки из сводного представления, щелкните ссылку в сводке снимков. Например, если в сводке снимков щелкнуть ссылку размера кучи, по умолчанию будет открыто представление "Доминаторы" сведений.

На этом рисунке показано представление "Типы" в сведениях о снимке.

В представлении сведений о снимке доступные следующие дополнительные представления данных об использовании памяти.

• Доминаторы. Отображает список всех объектов в куче, отсортированный по полному размеру.

• Типы. Отображает число экземпляров и общий размер объектов, сгруппированных по типам. По умолчанию список сортируется по числу экземпляров.

• Корни. Отображает дерево объектов от корневых объектов через дочерние ссылки. По умолчанию дочерние узлы сортируются по убыванию значения в столбце полного размера.

• DOM. Отображает объекты, являющиеся элементами разметки (DOM), и их полный размер. По умолчанию объекты сортируются по полному размеру.

• WinRT. Отображает управляемые и неуправляемые объекты Windows, на которые ссылается приложение JavaScript. По умолчанию объекты сортируются по полному размеру.

Большинство представлений, например представление "Доминаторы", содержат значения одних и тех же типов. К этим значениям относятся следующие.

• Идентификаторы. Имена, определяющие объекты. Например, для элементов HTML отображается значение атрибута ID, если он используется.

• Тип. Имя типа объекта.

• Размер. Размер объекта без учета размера объектов, на которые он ссылается.

• Полный размер. Сумма размера самого объекта и всех его дочерних объектов, у которых нет других родительских объектов. С практической точки зрения эта сумма представляет собой полный объем памяти объекта, поэтому при удалении объекта высвобождается именно этот объем памяти.

• Число. Число экземпляров объекта. Это значение отображается только в представлении "Типы".

Просмотр разницы между снимками

В анализаторе памяти JavaScript можно сравнить снимок с предыдущим снимком в представлении разницы снимков.

В сводном представлении разностные данные о снимках можно просматривать, выбирая другой снимок в раскрывающемся списке в правом верхнем углу плитки сводки снимков.

Разница между снимками позволяет просматривать разностные данные о доминаторах, типах, корнях, объектах DOM и объектах среды выполнения Windows.

В разностном представлении отображаются все объекты, которые были добавлены в кучу между двумя снимками. В разностном представлении "Корни" (и на графе ссылок) светло-серым цветом текста выделяются объекты, которые существовали в предыдущем снимке, но имеющие дочерние объекты, которые тогда не существовали.

На этом рисунке показано разностное представление "Доминаторы".

В разностных представлениях снимков такие представления как "Доминаторы" не отличаются от представления Просмотр сведений о снимке. В разностных представлениях снимков отображаются те же типы значений, что и в представлении сведений о снимке, а также следующие дополнительные значения.

• Разница размера. Разница между размером объекта в текущем снимке и его размером в сравниваемом снимке (более старом снимке) без учета размера объектов, на которые он ссылается.

• Разница полного размера. Разница между полным размером объекта в текущем снимке и его полным размером в сравниваемом снимке (более старом снимке). Полный размер включает размер самого объекта и всех его дочерних объектов, у которых нет других родительских объектов. С практической точки зрения полный размер представляет собой весь объем памяти, связанной с объектом, поэтому при удалении объекта высвобождается именно этот объем памяти.

• Разница количества. Разница между числом экземпляров объекта в текущем снимке и числом его экземпляров в сравниваемом снимке. Это значение отображается только в представлении "Типы".

Показ в корневом представлении

В представлениях "Доминаторы", "Типы", "DOM" и "WinRT" можно видеть связь между определенным объектом и объектом Global. С помощью этой функции можно легко находить известный объект в представлении "Корни" без поиска по дереву объектов Global.

Чтобы использовать функцию, щелкните правой кнопкой мыши идентификатор в представлении "Доминаторы", "Типы", "DOM" или "WinRT" и выберите команду Показать в корневом представлении.

Фильтрация данных

В представлениях "Доминаторы", "Типы", "DOM" и "WinRT" можно отфильтровывать данные путем поиска по определенным идентификаторам. Для поиска идентификатора просто введите значение в текстовое поле Фильтр идентификаторов. При начале ввода символов идентификаторы, которые не содержат введенные символы, отфильтровываются.

Каждое представление имеет свой собственный фильтр, поэтому отфильтрованные сведения не переносятся над между представлениями.

Просмотр ссылок

Нижняя область представлений "Доминаторы", "Типы", "DOM" и "WinRT" содержит граф ссылок, с помощью которого можно просматривать общие ссылки. Если выбрать объект в верхней области, на графе ссылок будет показан список ссылок, указывающих на выбранных объект.

Если вам требуется помощь при определении эквивалентных объектов, щелкните Отображать идентификаторы объектов в раскрывающемся списке параметров в правом верхнем углу верхней области. При выборе этого параметра идентификаторы объектов будут отображаться рядом с объектами в списке Идентификаторы. Объекты с одинаковыми идентификаторами являются общими ссылками.

Отображение встроенных значений

В представлениях "Доминаторы", "Типы", "DOM" и "WinRT" можно отображать встроенные объекты. По умолчанию эти представления отображают только объекты, которые создаются в приложении. Это помогает отфильтровать ненужные сведения и изолировать проблемы, связанные с приложением. Однако иногда бывает удобно посмотреть все объекты, созданные для приложения средой выполнения JavaScript. Анализатор памяти JavaScript позволяет просматривать эти объекты.

Для отображения этих объектов нажмите Показывать встроенные объекты в раскрывающемся списке параметров в правом верхнем углу области.

Файлы диагностических сеансов

Сводки диагностических снимков, а также связанные представления сведений, сохраняются в файлах .diagsession. Обозреватель решений отображает предыдущие диагностические сеансы в папке диагностических сеансов. В обозревателе решений можно открыть предыдущие сеансы, удалить или переименовать файлы.

Команды консоли JavaScript

Анализатор памяти JavaScript поддерживает следующие две Команды консоли JavaScript, которые можно использовать для изоляции фрагментов кода, в которых возникают проблемы памяти. Если добавить эти команды в приложение и запустить приложение, они создадут исключение в любом контексте, отличном от анализатора памяти (хотя вы можете протестировать эти команды перед использованием, они не будут существовать на раннем этапе запуска сеанса).

• console.takeHeapSnapshot делает снимок кучи, который отображается в анализаторе памяти JavaScript.

• console.profileMark устанавливает маркер профилирования (треугольник Пользовательский маркер), который отображается на временной шкале графа памяти в сводном представлении. Эта команда принимает один строковый аргумент, представляющий описание события, и отображается в виде подсказки в графе памяти. Этот описание не может быть длиннее 100 знаков.

В следующем примере кода показан безопасный вызов takeHeapSnapshot.

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

В следующем примере кода показан безопасный вызов profileMark.

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

Советы по выявлению проблем памяти

Эти советы могут помочь диагностировать проблемы использования памяти.

• Используйте представление "Доминаторы" для просмотра различий между снимками и быстрого выявления значительных проблем использования памяти.

• Используйте команду Показ в корневом представлении для поиска ссылок на объект в общей иерархии памяти.

• Если найти причину проблем с памятью не удается, используйте различные представления (например, "Доминаторы" и "Типы") для поиска совпадений, например связанных объектов и типов.

• Подумайте о том, можно ли изолировать проблему, временно изменив код. Например, можно сделать следующее:

  • используйте Команды консоли JavaScript анализатора памяти: console.takeSnapshot и console.profileMark;

    С помощью этих команд можно изолировать проблемы, которые не удается изолировать вручную с помощью команды Сделать снимок кучи.

  • Создайте тестовый объект, который можно легко найти в представлениях анализатора памяти JavaScript, например в представлении "Доминаторы". Например, можно прикрепить очень большой объект к другому объекту, чтобы увидеть, был ли определенный объект или элемент удален сборщиком мусора.

• Попробуйте найти объекты, которые случайно сохраняются в памяти после перехода на новую страницу, что является распространенной причиной проблем памяти. Например, неверное использование функции URL.CreateObjectUrl может привести к такой проблеме.

См. также

Задачи

Руководство. Поиск утечек памяти (JavaScript)