Как найти утечки памяти JS?

Ответ 1

Google с открытым исходным кодом для этой цели, leak-finder-for-javascript. Они также предложили метод, называемый три метода снимка (также см. Краткое описание в в этой статье).

Первый абзац ссылки поиска утечки

Примечание: jsleakcheck больше не поддерживается! Он работал против неофициального и нестабильного протокола Dev Tools для получения снимков кучи. Протокол работает, и он недостаточно стабилен, так что я может работать jsleakcheck с различными версиями Chrome. В дополнение, инструмент совместимости на более низком уровне, remote_inspector_client.py, который jsleakcheck использовал для связи с Dev Tools, удалены.

Ответ 2

В инструментах разработчика Chrome есть вкладка Timeline-Memory:

Мы можем наблюдать за занимаемой им памятью.

Также есть профили - память, где мы можем сделать снимок и посмотреть, что внутри. Снимки можно сравнить друг с другом:

Большую часть времени он ничего не говорит. Но, по крайней мере, вы можете видеть, какие объекты накапливаются и, вероятно, структура утечки.

Другой способ: 'Task Manager' вот статья об этом:

http://www.javascriptkit.com/javatutors/closuresleak/

Ответ 3

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

Здесь вы найдете утечки памяти в javascript с недавним браузером Chrome:

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

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

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

4. Теперь выберите Временная шкала записи и нажмите Начать. Повторите действие, которое вы хотите проверить на наличие утечек несколько раз. Так, например, откройте диалоговое окно, закройте его и повторите. Пока вы делаете это, Chrome рисует временную шкалу с частично серыми или синими полосами. Обычно вы видите панель каждый раз, когда вы выполняете действие на своей странице. Когда панель из нескольких предыдущих итераций действия остается частично синей, обычно это означает, что происходит утечка памяти. Синяя часть панели представляет собой память, которая была выделена в это время и еще не была выпущена. Остановите запись, нажав красную точку в левом верхнем углу инструментов разработчика.

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

6. В списке фиксаторов отображаются "родительские" объекты, которые ссылаются на выбранный объект. Теперь вам нужно посмотреть на фиксаторы и ваш код, чтобы понять, почему память не была выпущена. Например, на изображении вы видите объект области видимости. Во второй строке указано, что область - это "контекст в initFormat()". Проблема заключалась в том, что initFormat был прослушивателем событий, который не был отключен после того, как диалог остался.

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

Дополнительные подсказки:

• Иногда есть кеши, которые сохраняют часть памяти. Обычно вы можете игнорировать их.
• Когда вы видите элементы HTMLDivElement или другие DOM в списке типов объектов, посмотрите. Если объекты в этом списке выделены красным цветом, это означает, что они больше не присутствуют на вашей странице. Это означает, что они должны быть ссылкой где-то в коде. Возможно, вы забыли отключить прослушиватель событий.
• Прочитайте об утечках памяти в целом, чтобы вы могли быстрее идентифицировать их в своем коде.

Ответ 4

Я нашел эту статью очень проницательной:

http://addyosmani.com/blog/taming-the-unicorn-easing-javascript-memory-profiling-in-devtools/

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

Ответ 5

Вот очень хорошая статья о том, как найти утечки памяти с помощью Google Developper Tools: http://gent.ilcore.com/2011/08/finding-memory-leaks.html

Вот еще одна хорошая веб-страница об этом: http://javascript.crockford.com/memory/leak.html

Ответ 6

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

Разработчик Microsoft Justing Rogers описал шаблоны утечки IE в своей замечательной статье.

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

Почему утечка памяти?

Проблема утечки памяти не ограничивается Internet Explorer. Почти любой браузер (включая, помимо прочего, Mozilla, Netscape и Opera) будет утечка памяти, если вы обеспечите адекватные условия (и это не так сложно сделать, как мы вскоре увидим). Но (по моему скромному мнению, ymmv и т.д.) Internet Explorer является королем лиц, принимающих решения.

Не поймите меня неправильно. Я не принадлежу к толпе, кричащей "Hey IE имеет утечки памяти, проверяйте этот новый инструмент [link-to-tool] и смотрите сами". Давайте обсудим, как дерьмовый Internet Explorer и покрывает все недостатки в других браузерах ".

Каждый браузер имеет свои сильные и слабые стороны. Например, Mozilla потребляет слишком много памяти при начальной загрузке, это не хорошо в операциях с строками и массивами; Opera может упасть, если вы напишете смехотворно сложный DHTML script, который смущает его механизм рендеринга.

Хотя мы будем фокусироваться на ситуациях утечки памяти в Internet Explorer, это обсуждение одинаково применимо к другим браузерам.

Ниже приведено полное описание описания проблемы утечки памяти...

Продолжить здесь