В Facebook разработали бесплатный инструмент для JavaScript: что это и как установить

Meta (Facebook) решила помочь сообществу JavaScript и бесплатно поделилась инструментом для оптимизации памяти. Об этом сообщается в блоге компании.

Подробности

В корпорации создали MemLab — среду тестирования памяти JavaScript, которая автоматизирует обнаружение утечек памяти. Как уточнили создатели, устранение основной причины утечек памяти важно для обеспечения качественного взаимодействия с пользователем в веб-приложениях.

«Люди, использующие наши веб-приложения, часто сразу замечают проблемы с производительностью и функциональной корректностью. Однако утечка памяти — это отдельная история. Это не сразу заметно, потому что съедает кусок памяти за раз, влияя на весь веб-сеанс и делая последующие взаимодействия более медленными», — объясняют в Meta.

Высокий уровень использования памяти оказывает влияние на:

• загрузку страницы и производительность взаимодействия (сколько времени требуется для загрузки страницы или выполнения взаимодействия);
• показатели вовлеченности пользователей (активные пользователи, время, проведенное на сайте, количество выполненных действий).

Как работает MemLab

В двух словах, MemLab находит утечки памяти, запуская headless-браузер (браузер без интерфейса, прим.) с помощью предопределенных тестовых сценариев, а также изучая и анализируя снимки кучи (heap — сегмент памяти, предназначенный для хранения ссылочных типов вроде объектов, строк и замыканий, прим.) JavaScript.

Этот процесс происходит в шесть шагов:

1. Взаимодействие с браузером

Чтобы найти просочившиеся объекты на целевой странице (B), MemLab автоматизирует браузер с помощью Puppeteer и посещает тестовые страницы в следующем порядке:

•       Перейдите на другую вкладку (A) и получите кучу SA.
•       Перейдите на целевую страницу (B) и получите кучу SB.
•       Вернитесь на предыдущую страницу (A’) и получите кучу SA’.

2. Диффинг кучи

Когда мы переходим на страницу, а затем уходим с нее, мы ожидаем, что большая часть памяти, выделенной этой страницей, также будет освобождена. Если нет, то это наталкивает на мысль об утечке памяти. MemLab находит потенциальные утечки памяти, анализируя кучу JavaScript и записывая набор объектов, выделенных на странице B, которые не были выделены на странице A, но все еще присутствуют при перезагрузке страницы A. Или, более формально, надмножество объектов, просочившихся с целевой страницы, может быть получено как (SB \ SA) ∩ SA’).

3. Уточнение списка утечек памяти

Детектор утечек дополнительно включает в себя знания, специфичные для платформы, для уточнения списка утекших объектов. Например, узлы Fiber, выделенные React (внутренняя структура данных, которую React использует для рендеринга виртуального DOM), должны быть освобождены, когда мы очищаемся после посещения нескольких вкладок.

4. Генерация следов фиксатора

MemLab просматривает кучу и генерирует трассировки фиксаторов для каждого просочившегося объекта. Трассировка остатка — это цепочка ссылок на объекты от корней GC (объекты входа в графе кучи, из которых сборщики мусора обходят кучу) до объекта с утечкой. Трассировка показывает, почему и как просочившийся объект сохраняется в памяти. Разрыв цепочки ссылок означает, что утекший объект больше не будет доступен из корня GC и, следовательно, может быть удален сборщиком мусора. Следуя трассировке фиксатора шаг за шагом, вы можете найти ссылку, которая должна быть установлена ​​на null (но не была установлена ​​из-за ошибки).

5. Кластеризация следов ретейнеров

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

6. Сообщение об утечке

Чтобы получать непрерывный сигнал о регрессии памяти, инструмент следует запускать несколько раз в течение дня. Любые новые регрессии добавляются на внутреннюю панель мониторинга, где собираются и классифицируются сгруппированные следы хранения всех обнаруженных утечек памяти. Затем можно просмотреть свойства объектов на трассировке фиксатора каждой утечки памяти.

Как установить MemLab

Инструмент можно установить через npm или собрать его из репозитория GitHub. Также Meta сделала краткое руководство, которое поможет начать работу c MemLab.