Диагностика неполадок памяти на веб-страницах

Используйте средство Memory для диагностики ошибок памяти, которые могут повлиять на скорость и устойчивость работы веб-страниц.

Проблемы памяти

Если первичная загрузка вашей веб-страницы происходит хорошо, но постепенно работа замедляется, а иногда происходят сбои, то проблемой может быть использование памяти страницей. Средство Memory — новинка в средствах разработчика F12 в Internet Explorer 11.

Чтобы оперативно посмотреть, какой объем памяти использует ваша веб-страница, откройте пункт Панель мониторинга производительности в меню IE11 Сервис или нажмите клавиши CTRL+SHIFT+U. Щелкните объем использованной памяти, чтобы просмотреть динамическую диаграмму ее использования. Для возвращения на информационную панель щелкните диаграмму.

Если вы хотите узнать, почему Панель мониторинга производительности показывает те или иные данные, то вам необходимо средство Memory. Оно детально проверяет использование памяти вашей веб-страницей, а также рост использования памяти, и определяет способы улучшения ситуации.

Диагностика ошибок памяти

После того как вы загрузили свою веб-страницу в браузере, запустите средства разработчика F12 и откройте средство Memory (используйте значок камеры или клавиши CTRL+7). С этого экрана вы можете запустить создание профилей и сделать снимки динамической памяти во время сеанса создания профилей.

Если вашей проблемой является не рост использования памяти, а значительное использование памяти с самого начала, сделайте один снимок и изучите его, чтобы найти самые крупные зоны использования памяти. Если со временем использование памяти нарастает, вы можете сравнить снимки для определения зон этого роста.

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

После того как вы запустили создание профилей и сделали несколько снимков, вы увидите краткую сводку по сеансам, выглядящую примерно так:

Средство Memory в представлении краткой сводки с тремя снимками динамической памяти

Когда вы начнете записывать сеанс, временная шкала Общая память отобразит использование памяти текущими процессами вкладок браузера в виде диаграммы в динамике.

Вы можете добавить настраиваемые пользовательские отметки на временную шкалу с помощью метода performance.mark() в вашем коде JavaScript, используя метку для отметки в качестве аргумента. Так вы сможете добавить специальные события. Метка отображается в виде подсказки, когда указатель мыши наводится на отметку на временной шкале.

Под временной шкалой вы увидите сводки по снимкам динамической памяти.

Что показывают сводки по снимкам динамической памяти

Каждый снимок показывает эскиз вашей веб-страницы в том виде, в каком она была в момент выполнения снимка, а также показывает подробности о памяти, используемой вашим кодом. После первого снимка последующие снимки добавляют сводку по изменениям в использовании памяти и подсчете объектов.

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

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

Если вы щелкнете показатели использования памяти, то увидите подробное представление снимка. Если вы щелкнете показатели изменений памяти, то увидите сравнительное представление, выделяющее добавленные или измененные объекты. На изображении сверху (снимок №2) показан значок "Дополнительные сведения" (круг с буквой "i" внутри) и цифрой 30 рядом с ним. Эта цифра показывает число объектов, которое средство Memory опознало как потенциальные ошибки памяти.

Важные параметры

Другим важным фактором, о котором следует помнить, является разность между количеством добавляемых и удаляемых объектов. Она отображается на втором и последующих снимках в правом верхнем углу в формате "+x/-y".

В представленном выше наборе снимков показано, что каждый раз, когда запускался процесс, в котором предполагалась проблема с памятью, мы увеличивали число объектов на 90, а удаляли только 9 объектов. Это сильное указание на утечку памяти в процессе. Утечки памяти продолжают увеличивать объем памяти, используемой веб-страницей в течение сеанса пользователя, что вызывает замедление работы, а когда расход памяти чрезмерно возрастает — и нестабильность работы.

Просмотр подробностей снимка

Щелкните на снимке один из показателей измерения, чтобы посмотреть подробности данного измерения. На изображении снизу показано, что происходит после щелчка на показателях ошибок памяти на снимке.

В режиме просмотра подробностей снимка средство Memory составляет список потенциальных ошибок памяти

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

При наведении указателя мыши на значок "Дополнительные сведения" вы увидите подсказку, в которой объясняется, почему этот элемент является потенциальной проблемой. В примере, приведенном выше, узел модели DOM не присоединен к DOM. Такое может случиться, если узел был удален из DOM, но на него есть ссылка откуда-либо.

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

Три типа представления

  • Представление Доминаторы разбивает все отдельные элементы HTML, узлы DOM, а также объекты JavaScript, которые создает ваш код. Это самое подробное представление.
  • Представление Типы группирует объекты по функции их конструктора и подсчитывает каждый тип. Это облегчает получение информации о числе массивов, строк и т. п., которые у вас есть. Данные группы можно развернуть, чтобы просмотреть отдельные объекты.
  • Представление Корни показывает наибольшее число корневых объектов, которые вы можете развернуть, чтобы увидеть дочерние объекты, сопоставленные с ними.

Во всех этих представлениях есть заголовки столбцов, в которых указаны размер объектов и сохраненный размер. Столбец Размер содержит данные об объеме памяти, которую использует данный объект сам по себе. Столбец Сохраненный размер содержит данные об объеме памяти, используемой как объектом, так и его дочерними узлами. Например, HTMLDivElement сам по себе использует десятки байт, но может иметь сохраненный размер в несколько мегабайт, поскольку имеет большое изображение или видео в качестве дочерних элементов.

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

Дополнительные параметры

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

  • Меню Показать встроенные показывает внутренние объекты, созданные браузером для веб-страницы, которые не были созданы данной страницей самостоятельно. Они не отображены по умолчанию, поэтому ничто не будет отвлекать вас от собственного кода. Однако иногда полезно на них посмотреть.
  • Меню Показать ИД объектов помогает распознавать объекты, у которых есть более одной ссылки. Например, объект jQuery зачастую использует и jQuery, и $ в качестве ссылок. Обе представленные ссылки имеют одинаковый объем использованной памяти, но используют одну и ту же память и один и тот же ИД объекта. Использование ИД объектов помогает отделить уникальные объекты от объектов со множеством ссылок.
  • Отображение циклических ссылок: (этот параметр отсутствует в Накопительном пакете обновления для системы безопасности Internet Explorer (KB2976627)) в простейшей форме циклическая ссылка возникает, когда один объект ссылается на другой объект, который ссылается обратно на первый, создавая цикл. В более сложных случаях в циклической ссылке могут быть задействовано множество объектов. Для простоты поиска корня объекта циклические ссылки не показываются. Если вам необходимо проследить путь циклических ссылок, то для их отображения используйте следующий параметр:
    • Когда циклические ссылки отобразятся, будьте внимательны и не изучайте вновь и вновь один и тот же объект. Включение параметра Показать ИД объектов помогает избежать путаницы.

Накопительный пакет обновления для системы безопасности Internet Explorer (KB2976627) предоставляет автоматическую фильтрацию циклических ссылок, обнаруживая и усекая их. Это облегчает получение подробных сведений о корнях объекта без необходимости рассмотрения множества циклических путей.

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

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

Представление сравнения

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

Сравнение двух снимков динамической памяти с помощью средства Memory средств разработчика F12

Представление сравнения работает подобно просмотру подробностей снимка за исключением следующих трех отличий:

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

В Windows 8.1 с обновлением удалены столбец Операция и цветовая кодировка и добавлено меню Область. Область показывает различные представления сравнения и особенно полезна в сочетании с методом трех снимков для анализа памяти.

Накопительный пакет обновления для системы безопасности Internet Explorer (KB2976627) предоставляет возможность свертывания доминант. Это упрощает содержимое снимка благодаря удалению объектов из представлений верхнего уровня, когда они являются логическими частями другого объекта (например, <BR> внутри <DIV> или область, сохраняемая функцией). Это улучшает упорядоченность и легкость просмотра важных элементов.

Например, на изображении ниже приведены представления "до" и "после", отображая, как свертывание доминант помогает просматривать сведения, предоставляемые средством. Свернутое представление (внизу) отображает 30 элементов <DIV> HTML, что занимает 15,64 МБ памяти и предоставляет сведения об отключенных узлах DOM. Довольно часто не так важно знать композицию объекта как mhch, как знать то, что она слишком велика и подвержена утечкам (особенно при использовании сторонних библиотек).

До и после свертывания доминант

Метод трех снимков работает следующим образом.

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

Щелкните числа, представляющие рост расхода памяти или добавление и удаление объектов, на снимке 3, чтобы сравнить их со снимком 2. В этом представлении сравнения меню Область содержит три параметра.

  • Объекты, оставшиеся от снимка 2.
  • Объекты, добавленные между снимком 2 и снимком 3.
  • Все объекты на снимке 3.

При сравнении снимка 1 со снимком 2 вариант Объекты, оставшиеся от снимка 1 будет включать все объекты на странице, присутствовавшие в начальный момент. Большинство из них служат для сборки страницы, и их обилие лишь затрудняет содержательный анализ. Они постоянно занимают некоторую часть памяти веб-страницы, но не являются источником увеличения расхода памяти.

При сравнении снимка 2 со снимком 3 вариант Объекты, оставшиеся от снимка 2 определяет только объекты, которые добавлены на снимок 2 и остались на снимке 3. Теперь вы видите, какие объекты добавлены после начала записи и сохранились после повторного выполнения сценария. Они заслуживают более пристального изучения при поиске источника проблем с использованием памяти на веб-странице.

Сеансы загрузки и сохранения

Не обязательно копировать тестовый сценарий при каждом намерении проанализировать данные, произведенные им. Добавленные в накопительном пакете обновления для Internet Explorer (KB2976627), значки импорта (папка) и экспорта (диск) на панели значков средства позволяют сохранять сеансы профилирования памяти для последующей проверки.

Контейнеры ECMAScript 6

В Windows 8.1 с обновлением появилась поддержка объектов-контейнеров Set, Map и WeakMap в средстве Память, что упрощает проверку данных по использованию памяти этими объектами. Эта поддержка доступна, только если Internet Explorer 11 не переключен в более низкий режим браузера.

Связанные разделы

Основные сведения и решения проблем утечки памяти в Internet Explorer
Использование средств разработчика F12

 

 

Показ:
© 2015 Microsoft