Heap snapshot чем открыть
Поиск утечек памяти в Chrome 66 стал гораздо удобней. DevTools теперь могут проводить трассировку, делать снапшоты DOM-объектов из C++, отображать все доступные DOM-объекты из JavaScript вместе со ссылками на них. Появление этих возможностей стало следствием нового механизма трассировки C++ в сборщике мусора V8.
Напомню, что стабильный Chrome сейчас (20.03.2018) имеет версию 65, поэтому чтобы подивиться на фичу, придётся установить одну из нестабильных сборок (например, Beta имеет версию 66, а Dev и Canary — 67).
Утечки памяти в сборке мусора возникают, когда ненужный уже объект не собирается из-за неумышленно добавленных ссылок из других объектов. Утечки памяти в веб-страницах зачастую возникают при взаимодействии JS-объектов и DOM-элементов.
Давайте посмотрим на игрушечный пример, показывающий утечку, возникающую, когда программист забывает убрать обработчик события. Обработчик ссылается на объекты, и их больше уже нельзя удалить. В частности, протекает окно iframe.
Что ещё хуже, утекший iframe поддерживает живыми все свои JS-объекты.
Чтобы найти причину утечки, важно осознать понятие подвешенного пути (retaining path). Подвешенный путь — это цепочка объектов, которые мешают сборке утекающего объекта. Цепочка начинается от какого-то корневого объекта, вроде глобального объекта основного окна. Цепь заканчивается утекающим объектом. Все промежуточные объекты имеют прямую ссылку на следующий объект в цепи. Например, подвешенный путь объекта Leak и этом ифрейме выглядит следующим образом:
Заметьте, что подвешенный путь проходит сквозь границу между JavaScript и DOM (они отмечены, соответственно, зелёным и красным цветом) целых два раза. JS-объекты живут в куче V8, а объекты DOM являются C++-объектами в Chrome.
Теперь мы можем изучить подвешенный путь любого выбранного объекта с помощью снапшота кучи. При этом будут сохранены в точности все объекты, находящиеся в куче V8. Совсем недавно там хранились только очень примерные данные о C++ DOM объектах. Например, Chrome 65 показывает неполный подвешенный путь для объекта Leak из предыдущего игрушечного примера:
Только первая строка достаточно точна: объект Leak действительно хранится в global_variable в окне ифрейма. Все остальные строки пытаются аппроксимировать настоящий путь, и это делает отладку утечки памяти весьма сложной.
Начиная с Chrome 66, DevTools трассирует C++ DOM объекты, и точно захватывает объекты и ссылки между ними. Эта фича основана на новом мощном механизме трассировки C++ объектов, который создавался для кросс-компонентной сборки мусора. В резульатате, пути в DevTools стали правильными!
DOM-объекты управляются с помощью Blink — движка рендеринга, используемого в Chrome, отвечающего за трансляцию DOM в реальный текст и картинки на экране. Blink и его внутреняя реализация DOM написаны на C++ — и это значит, что DOM нельзя напрямую отразить в JavaScript. Вместо этого, объекты в DOM как бы делятся на две части: доступную из JS объект-обёртку, и C++-объект, являющийся представлением узла из DOM. Эти объекты содержат прямые ссылки друг на друга. Определение времени жизни и области владения компонентов, которые пересекают границы нескольких систем, в данном случае — Blink и V8, — довольно сложная задача, поскольку в ней частвуют стороны, которым нужно предварительно договориться, какие компоненты всё ещё живы, а какие стоило бы утилизировать.
В Chrome 56 и более старых версиях (например, до марта 2017), Chrome использовал механизм, называемый группировкой объектов (object grouping). Объекты связываются в одну группу, если принадлежат одному и тому же документу. Группа, и все её объекты, держатся живыми до тех пор, пока существует хоть один живой объект на конце другого подвешенного пути. Это имеет смысл в контексте узлов DOM, которые всегда связаны с содержащими их документами, формируя так называемые DOM-деревья. Но эта абстракция теряет все реальные подвешенные пути, что раньше очень осложняло отладку. Как только объекты переставали подходить под вышеописанный сценарий (например, замыкания в JavaScript, используемые как обработчики событий), реализовывать этот подход становилось затруднительно и приводило к багам, в которых JS-обёртки собирались раньше времени, что в свою очередь вело к их замене на пустые JS-обёртки с полной потерей всех свойств.
Начиная с Chrome 57, этот подход заменён на "кросс-компонентную трассировку" — механизм, который определяет живость объектов, трассируя их от JavaScript вплоть до C++ реализации в DOM, и по тому же пути назад. На стороне C++ реализована инкрементальная трассировка, которая создаёт write barriers для того, чтобы не скатиться в stop-the-world. Кросс-компонентное тестирование не только улучшает латентность, но и лучше аппроксимирует живость объектов на границе компонентов, и чинит несколько часто случающихся сценариев, которые раньше приводили к утечкам. Кроме того, благодаря этому, DevTools получили возможность делать снапшоты, которые действительно отражают состояние DOM.
Минутка рекламы. Как вы, наверное, знаете, мы делаем конференции. Ближайшая конференция про JavaScript — HolyJS 2018 Piter, которая пройдет 19-20 мая 2018 года в Санкт-Петербурге. Можно туда прийти, послушать доклады (какие доклады там бывают — описано в программе конференции), вживую пообщаться с практикующими экспертами JavaScript и фронтенда, разработчиками разных моднейших технологий. Короче, заходите, мы вас ждём!
Full format name of files that use HEAPSNAPSHOT extension is Heap Snapshot Data Format. HEAPSNAPSHOT file format is compatible with software that can be installed on Windows system platform. HEAPSNAPSHOT file format, along with 6033 other file formats, belongs to the Misc Files category. The most popular software that supports HEAPSNAPSHOT files is Chrome DevTools. Chrome DevTools software was developed by Google Inc., and on its official website you may find more information about HEAPSNAPSHOT files or the Chrome DevTools software program.
Programs which support HEAPSNAPSHOT file extension
The following listing features HEAPSNAPSHOT-compatible programs. Files with HEAPSNAPSHOT suffix can be copied to any mobile device or system platform, but it may not be possible to open them properly on target system.
Programs that support HEAPSNAPSHOT file
Windows
Updated: 01/13/2021
How to open file with HEAPSNAPSHOT extension?
Being unable to open files with HEAPSNAPSHOT extension can be have various origins. On the bright side, the most encountered issues pertaining to Heap Snapshot Data Format files aren’t complex. In most cases they can be addressed swiftly and effectively without assistance from a specialist. The list below will guide you through the process of addressing the encountered problem.
Step 1. Get the Chrome DevTools
The most common reason for such problems is the lack of proper applications that supports HEAPSNAPSHOT files installed on the system. To address this issue, go to the Chrome DevTools developer website, download the tool, and install it. It is that easy The full list of programs grouped by operating systems can be found above. One of the most risk-free method of downloading software is using links provided by official distributors. Visit Chrome DevTools website and download the installer.
Step 2. Update Chrome DevTools to the latest version
If you already have Chrome DevTools installed on your systems and HEAPSNAPSHOT files are still not opened properly, check if you have the latest version of the software. It may also happen that software creators by updating their applications add compatibility with other, newer file formats. If you have an older version of Chrome DevTools installed, it may not support HEAPSNAPSHOT format. All of the file formats that were handled just fine by the previous versions of given program should be also possible to open using Chrome DevTools.
Step 3. Set the default application to open HEAPSNAPSHOT files to Chrome DevTools
If you have the latest version of Chrome DevTools installed and the problem persists, select it as the default program to be used to manage HEAPSNAPSHOT on your device. The process of associating file formats with default application may differ in details depending on platform, but the basic procedure is very similar.
The procedure to change the default program in Windows
- Choose the Open with entry from the file menu accessed by right-mouse clicking on the HEAPSNAPSHOT file
- Select Choose another app → More apps
- Finally select Look for another app on this PC , point to the folder where Chrome DevTools is installed, check the Always use this app to open HEAPSNAPSHOT files box and conform your selection by clicking OK button
The procedure to change the default program in Mac OS
- From the drop-down menu, accessed by clicking the file with HEAPSNAPSHOT extension, select Information
- Proceed to the Open with section. If its closed, click the title to access available options
- From the list choose the appropriate program and confirm by clicking Change for all. .
- Finally, a This change will be applied to all files with HEAPSNAPSHOT extension message should pop-up. Click Continue button in order to confirm your choice.
Step 4. Check the HEAPSNAPSHOT for errors
Should the problem still occur after following steps 1-3, check if the HEAPSNAPSHOT file is valid. Being unable to access the file can be related to various issues.
1. Check the HEAPSNAPSHOT file for viruses or malware
Should it happed that the HEAPSNAPSHOT is infected with a virus, this may be that cause that prevents you from accessing it. It is advised to scan the system for viruses and malware as soon as possible or use an online antivirus scanner. If the HEAPSNAPSHOT file is indeed infected follow the instructions below.
2. Ensure the file with HEAPSNAPSHOT extension is complete and error-free
If you obtained the problematic HEAPSNAPSHOT file from a third party, ask them to supply you with another copy. During the copy process of the file errors may occurred rendering the file incomplete or corrupted. This could be the source of encountered problems with the file. It could happen the the download process of file with HEAPSNAPSHOT extension was interrupted and the file data is defective. Download the file again from the same source.
3. Check if the user that you are logged as has administrative privileges.
Sometimes in order to access files user need to have administrative privileges. Log in using an administrative account and see If this solves the problem.
4. Make sure that the system has sufficient resources to run Chrome DevTools
If the system is under havy load, it may not be able to handle the program that you use to open files with HEAPSNAPSHOT extension. In this case close the other applications.
5. Ensure that you have the latest drivers and system updates and patches installed
Up-to-date system and drivers not only makes your computer more secure, but also may solve problems with Heap Snapshot Data Format file. It may be the case that the HEAPSNAPSHOT files work properly with updated software that addresses some system bugs.
Do you want to help?
If you have additional information about the HEAPSNAPSHOT file, we will be grateful if you share it with our users. To do this, use the form here and send us your information on HEAPSNAPSHOT file.
Программы, которые поддерживают HEAPSNAPSHOT расширение файла
Следующий список функций HEAPSNAPSHOT -совместимых программ. Файлы с суффиксом HEAPSNAPSHOT могут быть скопированы на любое мобильное устройство или системную платформу, но может быть невозможно открыть их должным образом в целевой системе.
Программы, обслуживающие файл HEAPSNAPSHOT
Windows
Updated: 01/13/2021
Как открыть файл HEAPSNAPSHOT?
Отсутствие возможности открывать файлы с расширением HEAPSNAPSHOT может иметь различное происхождение. С другой стороны, наиболее часто встречающиеся проблемы, связанные с файлами Heap Snapshot Data Format, не являются сложными. В большинстве случаев они могут быть решены быстро и эффективно без помощи специалиста. Приведенный ниже список проведет вас через процесс решения возникшей проблемы.
Шаг 1. Получить Chrome DevTools
Наиболее распространенной причиной таких проблем является отсутствие соответствующих приложений, поддерживающих файлы HEAPSNAPSHOT, установленные в системе. Чтобы решить эту проблему, перейдите на веб-сайт разработчика Chrome DevTools, загрузите инструмент и установите его. Это так просто Полный список программ, сгруппированных по операционным системам, можно найти выше. Одним из наиболее безопасных способов загрузки программного обеспечения является использование ссылок официальных дистрибьюторов. Посетите сайт Chrome DevTools и загрузите установщик.
Шаг 2. Обновите Chrome DevTools до последней версии
Если у вас уже установлен Chrome DevTools в ваших системах и файлы HEAPSNAPSHOT по-прежнему не открываются должным образом, проверьте, установлена ли у вас последняя версия программного обеспечения. Может также случиться, что создатели программного обеспечения, обновляя свои приложения, добавляют совместимость с другими, более новыми форматами файлов. Если у вас установлена более старая версия Chrome DevTools, она может не поддерживать формат HEAPSNAPSHOT. Все форматы файлов, которые прекрасно обрабатывались предыдущими версиями данной программы, также должны быть открыты с помощью Chrome DevTools.
Шаг 3. Настройте приложение по умолчанию для открытия HEAPSNAPSHOT файлов на Chrome DevTools
Если у вас установлена последняя версия Chrome DevTools и проблема сохраняется, выберите ее в качестве программы по умолчанию, которая будет использоваться для управления HEAPSNAPSHOT на вашем устройстве. Процесс связывания форматов файлов с приложением по умолчанию может отличаться в деталях в зависимости от платформы, но основная процедура очень похожа.
Процедура изменения программы по умолчанию в Windows
- Выберите пункт Открыть с помощью в меню «Файл», к которому можно щелкнуть правой кнопкой мыши файл HEAPSNAPSHOT.
- Выберите Выбрать другое приложение → Еще приложения
- Наконец, выберите Найти другое приложение на этом. , укажите папку, в которой установлен Chrome DevTools, установите флажок Всегда использовать это приложение для открытия HEAPSNAPSHOT файлы свой выбор, нажав кнопку ОК
Процедура изменения программы по умолчанию в Mac OS
Шаг 4. Проверьте HEAPSNAPSHOT на наличие ошибок
Если проблема по-прежнему возникает после выполнения шагов 1-3, проверьте, является ли файл HEAPSNAPSHOT действительным. Отсутствие доступа к файлу может быть связано с различными проблемами.
1. Проверьте HEAPSNAPSHOT файл на наличие вирусов или вредоносных программ.
Если случится так, что HEAPSNAPSHOT инфицирован вирусом, это может быть причиной, которая мешает вам получить к нему доступ. Рекомендуется как можно скорее сканировать систему на наличие вирусов и вредоносных программ или использовать онлайн-антивирусный сканер. Если файл HEAPSNAPSHOT действительно заражен, следуйте инструкциям ниже.
2. Убедитесь, что файл с расширением HEAPSNAPSHOT завершен и не содержит ошибок
Если вы получили проблемный файл HEAPSNAPSHOT от третьего лица, попросите его предоставить вам еще одну копию. В процессе копирования файла могут возникнуть ошибки, делающие файл неполным или поврежденным. Это может быть источником проблем с файлом. Это может произойти, если процесс загрузки файла с расширением HEAPSNAPSHOT был прерван и данные файла повреждены. Загрузите файл снова из того же источника.
3. Проверьте, есть ли у пользователя, вошедшего в систему, права администратора.
Иногда для доступа к файлам пользователю необходимы права администратора. Войдите в систему, используя учетную запись администратора, и посмотрите, решит ли это проблему.
4. Убедитесь, что в системе достаточно ресурсов для запуска Chrome DevTools
5. Убедитесь, что у вас установлены последние версии драйверов, системных обновлений и исправлений
Современная система и драйверы не только делают ваш компьютер более безопасным, но также могут решить проблемы с файлом Heap Snapshot Data Format. Возможно, файлы HEAPSNAPSHOT работают правильно с обновленным программным обеспечением, которое устраняет некоторые системные ошибки.
Вы хотите помочь?
Если у Вас есть дополнительная информация о расширение файла HEAPSNAPSHOT мы будем признательны, если Вы поделитесь ею с пользователями нашего сайта. Воспользуйтесь формуляром, находящимся здесь и отправьте нам свою информацию о файле HEAPSNAPSHOT.
Программы, которые поддерживают SNAPSHOT расширение файла
Ниже приведена таблица со списком программ, которые поддерживают SNAPSHOT файлы. SNAPSHOT файлы можно встретить на всех системных платформах, включая мобильные, но нет гарантии, что каждый из них будет должным образом поддерживать такие файлы.
Программы, обслуживающие файл SNAPSHOT
Linux
Как открыть файл SNAPSHOT?
Причин, по которым у вас возникают проблемы с открытием файлов SNAPSHOT в данной системе, может быть несколько. Что важно, все распространенные проблемы, связанные с файлами с расширением SNAPSHOT, могут решать сами пользователи. Процесс быстрый и не требует участия ИТ-специалиста. Мы подготовили список, который поможет вам решить ваши проблемы с файлами SNAPSHOT.
Шаг 1. Установите XZX-Pro программное обеспечение
Основная и наиболее частая причина, препятствующая открытию пользователями файлов SNAPSHOT, заключается в том, что в системе пользователя не установлена программа, которая может обрабатывать файлы SNAPSHOT. Решение этой проблемы очень простое. Загрузите XZX-Pro и установите его на свое устройство. В верхней части страницы находится список всех программ, сгруппированных по поддерживаемым операционным системам. Одним из наиболее безопасных способов загрузки программного обеспечения является использование ссылок официальных дистрибьюторов. Посетите сайт XZX-Pro и загрузите установщик.
Шаг 2. Обновите XZX-Pro до последней версии
Если проблемы с открытием файлов SNAPSHOT по-прежнему возникают даже после установки XZX-Pro, возможно, у вас устаревшая версия программного обеспечения. Проверьте веб-сайт разработчика, доступна ли более новая версия XZX-Pro. Разработчики программного обеспечения могут реализовать поддержку более современных форматов файлов в обновленных версиях своих продуктов. Это может быть одной из причин, по которой SNAPSHOT файлы не совместимы с XZX-Pro. Последняя версия XZX-Pro должна поддерживать все форматы файлов, которые совместимы со старыми версиями программного обеспечения.
Шаг 3. Свяжите файлы ZX Spectrum Emulator Mirage Microdrive Snapshot Format с XZX-Pro
После установки XZX-Pro (самой последней версии) убедитесь, что он установлен в качестве приложения по умолчанию для открытия SNAPSHOT файлов. Процесс связывания форматов файлов с приложением по умолчанию может отличаться в деталях в зависимости от платформы, но основная процедура очень похожа.
Изменить приложение по умолчанию в Windows
- Щелкните правой кнопкой мыши на файле SNAPSHOT и выберите « Открыть с помощью опцией».
- Нажмите Выбрать другое приложение и затем выберите опцию Еще приложения
- Последний шаг - выбрать опцию Найти другое приложение на этом. указать путь к папке, в которой установлен XZX-Pro. Теперь осталось только подтвердить свой выбор, выбрав Всегда использовать это приложение для открытия SNAPSHOT файлы и нажав ОК .
Изменить приложение по умолчанию в Mac OS
Шаг 4. Проверьте SNAPSHOT на наличие ошибок
Вы внимательно следили за шагами, перечисленными в пунктах 1-3, но проблема все еще присутствует? Вы должны проверить, является ли файл правильным SNAPSHOT файлом. Проблемы с открытием файла могут возникнуть по разным причинам.
1. Убедитесь, что SNAPSHOT не заражен компьютерным вирусом
Если SNAPSHOT действительно заражен, возможно, вредоносное ПО блокирует его открытие. Рекомендуется как можно скорее сканировать систему на наличие вирусов и вредоносных программ или использовать онлайн-антивирусный сканер. Если сканер обнаружил, что файл SNAPSHOT небезопасен, действуйте в соответствии с инструкциями антивирусной программы для нейтрализации угрозы.
2. Проверьте, не поврежден ли файл
3. Проверьте, есть ли у вашей учетной записи административные права
Иногда для доступа к файлам пользователю необходимы права администратора. Переключитесь на учетную запись с необходимыми привилегиями и попробуйте снова открыть файл ZX Spectrum Emulator Mirage Microdrive Snapshot Format.
4. Проверьте, может ли ваша система обрабатывать XZX-Pro
5. Убедитесь, что у вас установлены последние версии драйверов, системных обновлений и исправлений
Современная система и драйверы не только делают ваш компьютер более безопасным, но также могут решить проблемы с файлом ZX Spectrum Emulator Mirage Microdrive Snapshot Format. Возможно, файлы SNAPSHOT работают правильно с обновленным программным обеспечением, которое устраняет некоторые системные ошибки.
Вы хотите помочь?
Если у Вас есть дополнительная информация о расширение файла SNAPSHOT мы будем признательны, если Вы поделитесь ею с пользователями нашего сайта. Воспользуйтесь формуляром, находящимся здесь и отправьте нам свою информацию о файле SNAPSHOT.
На первый поверхностный взгляд, слова JavaScript и «утечка памяти» рядом стоять не могут. Настоящих утечек памяти в JS, конечно, не может быть, потому что процесс сборки мусора происходит автоматически и не может контролироваться из нашего кода. Выделить память под объект и забыть освободить невозможно. Но могут быть ситуации, связанные с ошибками в логике работы приложения, которые приводят к утечкам памяти другого рода. Например, забиндили обработчик, в котором что-то делаем с методами общего объекта и забыли его анбиндить. Или же посылаем письмо с большим телом и не очищаем тело даже после отправки.
Мы в Яндекс.Почте, сложном и массовом проекте, накопили заметный опыт в поиске и устранении таких утечек, и хотим им поделиться.
Немного матчасти
Как мы знаем, в JS есть объекты и примитивы. Свойства объектов могут ссылаться на другие объекты, либо содержать примитивы. JSHeap — это просто граф из связанных объектов. Корнем этого графа обычно является глобальный объект (GC Roots). У узлов в этом графе есть два типа размеров: shallow size и retained size. Shallow size — чистое количество памяти, занимаемое объектом. Retained size — это общее количество памяти, которое освободится при сборке мусора, если удалить объект и все ссылки на него от корня графа. На shallow size нужно смотреть только для массивов или примитивов (у которых собственно retained size === shallow size). Путь, по которому объект может быть получен от корня графа, называется retaining path. Объекты, для которых нельзя получить retaining path, являются мусором и удаляются при следующей его сборке.
Инструменты
Тут ситуация еще хуже, чем с профилированием рендеринга. Нормальные инструменты есть только в браузерах на Хромиуме (Chrome Developer Tools) и в будущем IE 11. Я буду использовать Chrome Developer Tools.
Условия профилирования
- у вас не дожны быть запущены другие программы;
- Хромиум должен быть запущен с дефолтными настройками (если используете какие-то экспериментальные возможности, сбросьте их в дефолт на странице chrome://flags);
- открытой нужно оставить только одну вкладку с тестируемым сайтом (это ограничение связано с тем, что Хромиум может рендерить несколько вкладок в одном процессе, и, соответственно, в результатах профилирования будут лишние объекты);
- не должны быть установлены плагины (или они должны быть выключены). Лучше всего профилировать в приватном режиме или запуская Хромиум с отдельным профилем через: --user-data-dir= .
Определяем кейсы, в которых могут быть утечки
Вообще, для этого можно попробовать пологировать информацию из window.performance.memory (только в Хромиум > 22) и посмотреть, какие действия совершали пользователи, у которых usedJSHeapSize (размер используемой памяти) приближается к totalJSHeapSize (общий размер JS-памяти выделенной на процесс), или же просто большое число в totalJSHeapSize . Но мне кажется, что эта штука показывает неверные числа, потому что после логирования у нас только 5% пользователей, после 7+ часов использования почты у которых, totalJSHeapSize приближается к 100 МБ.
У всех остальных эти значения либо не меняются со временем, либо равны нулю. Поэтому я решил поискать утечки вручную. Чтобы определить случаи, когда есть возможность утечки памяти, мы воспользуемся панелью timeline в Chrome Developer Tools, а конкретнее режимом Memory:
- Document Count — количество html документов (сюда входят и фреймы);
- DOM Node Count — количество ДОМ нод;
- Event Listener Count — количество обработчиков событий,
Находим причину утечки
Ок, мы нашли последовательность действий, которая приводит к утечке. Чтобы найти причину утечки воспользуемся панелью Profiles и пунктом Take Heap Snapshot в ней.
Нажав на кнопку Take Snapshot, можно получить снапшот JSHeap на текущий момент:
В левой колонке под названием снапшота (у нас Snapshot 1) указан общий размер памяти занимаемой живыми объектами — такими, у которых есть retaining path. Только живыми, потому что после каждого нажатия на эту кнопку первым делом вызывается сборщик мусора. В панели, занимающей основную часть правой части скриншота, можно просматривать сами объекты, размеры занимаемой ими памяти (абсолютные значения в байтах или же процент от общего размера снапшота) и другую полезную информацию. По умолчанию в этой панели объекты показываются в режиме Summary, где они сгруппированы по имени своего конструктора. Колонка Distance — количество ссылок до этого объекта от корня (GC Roots). Objects Count — количество объектов с этим конструктором.
Если название конструктора в скобках, то это внутренний тип объектов или примитив (за исключением array). В принципе, на большинство объектов с конструктором в скобках можно не обращать внимание ("(compiled code)", "(closure)", "(system)"), за исключением, пожалуй, "(string)" и "(array)" — и то только если у них большой shallow size. Представить содержимое снапшота можно и в других режимах:
- Comparison — сравнивает два снапшота и показывает только те объекты, которые изменились.
- Containment — показывает весь граф в виде дерева с глобальными объектами. Удобен для обнаружения неиспользуемых ДОМ нод (Detached DOM tree).
- Dominators — Показывает доминаторы (объекты, которые есть в как можно большем числе retaining path'ей).
Серым указаны айдишники объектов. Если объект подсвечен желтым, значит, где-то есть ссылка на него, которая удерживает его от сборки мусора. Если объект подсвечен красным — это ДОМ нода, которая была задетачена, но на нее осталась ссылка из JS. На многие объекты можно навести мышкой и появится дополнительная информация в желтом бабле (особенно это полезно для функций и ДОМ нод, потому что для них можно узнать тело функции и атрибуты ноды).
Техника трех снапшотов
- Зайти в инбокс.
- Прокрутить немного скролл, чтобы появился фиксированный тулбар.
- Несколько раз нажать на «Проверить».
- Делаем первый снапшот перед действиями из кейса (он нужен для базовой линии). Иногда перед ним нужно также совершить некоторые разогревочные действия. Например, если у нас кейс связан со страницей написания письма, то нужно сначала зайти на неё (чтобы подгрузились и выполнились все необходимые модули).
- Повторяем несколько раз действия из кейса (лучше повторять нечетное количество раз, чтобы можно было легче определить текущие объекты при анализе снапшота) и делаем второй снапшот.
- Повторяем снова эти же действия столько же раз и делаем третий снапшот.
- Дальше выбираем третий снапшот и в режиме Summary в селекте внизу выделяем «Objects allocated between Snapshots 1 and 2» (или 2 и 3 — как угодно).
Вот мы и получили все утекшие объекты. Отсортируем результаты по колонке Objects Count:
В топе после объектов с системными конструкторами и массивов кэшированных писем, видим какие-то подозрительные дивы, спаны, ссылки и инпуты. И их ровно 7 — именно столько раз я нажимал на кнопку «Проверить». Если раскрыть HTMLInputElement, то мы увидим, что все 7 объектов — это задетаченные инпуты с классом b-mail-dropdown__search__input , на которые просто остались ссылки в JS:
На скриншоте не видно, но, чтобы узнать класс, я просто навел курсор на один из инпутов. По retaining path можно быстро понять, что это инпут из дропдауна (первый HTMLDivElement имеет класс b-mail-dropdown ), на который в свою очередь есть ссылка в обработчике какого-то события (можно понять по стандартной jQuery структуре $ — cache — [..] — handle — elem — наш элемент). Есть еще проблема с лоадером в тулбаре — див с лоадером не очищается после сборки мусора.
Фиксим утечку
Делаем тоже самое в labels-actions. После проверки все задетаченные дивы, ссылки и инпуты из дропдауна пропадают. А с лоадером в тулбаре все немного по-другому. В «neo2/js/components/loader.js» есть такой код:
Подобным образом я устранил еще несколько утечек (на странице написания письма, парочку в трёхпанельном интерфейсе, при просмотре письма, одну в настройках). Еще я удалил Jane.Page.Log, который сохранял параметры при каждом ране или вызове экшена, но ничего с ними потом не делал. И ограничил количество записей в объекте Logger xiva. Это все потому, что при отправке писем туда добавлялись объекты со всеми параметрами отправляемого письма (если письма с большим телом — это потенциальная утечка). Также я стал удалять body из параметров после отправки письма.
Record Heap Allocations
Чтобы упростить нахождение утечек, в Хромиум, начиная с 29 версии, введен дополнительный пункт в панели «Profiles» — «Record Heap Allocations». При нажатии на Start он начинает непрерывно раз в N секунд делать снапшот и сравнивать его с предыдущим, а в верхней панели столбиками показывать отношение очищенных объектов к живым. Живые — синие, очищенные — серые. После остановки записи можно выбрать любой интервал времени и в нижней панели посмотреть на объекты в привычном виде (как после Take Snapshot).
Читайте также: