Понимание «Профилирование собственной памяти» в инструментах разработчика Chrome

Question

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

После нескольких поисков (вызов AJAX на сервер) страница загружается так сильно, что она в конце концов сработает. Я проверил количество DOM и использование кучи JavaScript для возможных утечек памяти. Я не мог найти там ничего плохого. Однако, когда я запускал экспериментальный профилировщик собственной памяти, я вижу, что в разделе «Внешний ресурс JavaScript» используется память более 600 МБ. При запуске сборщика мусора он переходит на несколько МБ. У меня есть пара вопросов:

1. Что входит в раздел «Внешний ресурс JavaScript»? Я думал, что это соответствует источникам данных JSON/JavaScript, которые передаются с сервера. FYI, gzipped ответ JSON с сервера составляет ~ 1 МБ.
2. Почему Chrome не выпускает активную память вместо сбоя страницы? Опять же, когда я вручную запускаю сборщик мусора, он освобождает память, используемую «внешними ресурсами JavaScript».

Как исправить исходную проблему?

Answer 1

JS Heap Profiler делает снимок объектов в javascript, но javascript-код может использовать встроенную память с помощью «Int8Array», «Uint8Array», «Uint8ClampedArray», «Int16Array», «Uint16Array», «Int32Array», «Uint32Array», «Float32Array» и «Float64Array». Итак, когда вы делаете снимок, у него будут только небольшие обертки, указывающие на блоки памяти. К сожалению, снимки кучи не содержат данных о собственной памяти, которая использовалась для этих объектов. Native heap snapshot способен подсчитать эту память, и теперь мы знаем, что страница использует встроенную память через массив или через внешнюю строку.

Хотелось бы узнать, как вы проверили, что страница не имеет утечек памяти? Вы использовали три метода снимка или просто отметили определенные объекты? Tool to track down JavaScript memory leak