У Facebook розробили безкоштовний інструмент для JavaScript: що це та як встановити

Meta (Facebook) вирішила допомогти спільноті JavaScript та безкоштовно поділилася інструментом для оптимізації пам’яті. Про це повідомляється у блозі компанії.

Подробиці

У корпорації створили MemLab — середовище тестування пам’яті JavaScript, яке автоматизує виявлення витоків пам’яті. Як уточнили творці, усунення основної причини витоків пам’яті є важливим для забезпечення якісної взаємодії з користувачем у веб-застосунках.

«Люди, які використовують наші веб-програми, часто відразу помічають проблеми з продуктивністю та функціональною коректністю. Проте витік пам’яті — це окрема історія. Це не відразу помітно, тому що з’їдає шматок пам’яті за раз, впливаючи на весь веб-сеанс і роблячи подальші взаємодії повільнішими», — пояснюють у Meta.

Високий рівень використання пам’яті впливає на:

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

Як працює MemLab

У двох словах, MemLab знаходить витоки пам’яті, запускаючи headless-браузер (браузер без інтерфейсу, прим .) за допомогою зумовлених тестових сценаріїв, а також вивчаючи та аналізуючи знімки купи (heap — сегмент пам’яті, призначений для зберігання типів посилань на кшталт об’єктів, рядків і замикань, прим .) JavaScript.

Цей процес відбувається за шість кроків:

1. Взаємодія з браузером

Щоб знайти об’єкти, що просочилися, на цільовій сторінці (B), MemLab автоматизує браузер за допомогою Puppeteer і відвідує тестові сторінки в наступному порядку:

• Перейдіть на іншу вкладку (A) та отримайте купу SA.
• Перейдіть на цільову сторінку (B) та отримайте купу SB.
• Поверніться до попередньої сторінки (A’) та отримайте купу SA’.

Ілюстрація, джерело: Meta

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 зробила короткий посібник, який допоможе почати роботу з MemLab.