Giới thiệu

Bạn đã bao giờ gặp tình trạng ứng dụng web chạy càng lâu càng chậm, thậm chí làm treo trình duyệt của người dùng chưa? Rò rỉ bộ nhớ (memory leak) là một trong những bài toán khó nhằn nhất đối với các lập trình viên JavaScript. Để giải quyết vấn đề này, các kỹ sư tại Facebook (Meta) đã phát triển và mã nguồn mở MemLab.

MemLab là một framework kiểm thử end-to-end (E2E) mạnh mẽ, chuyên dùng để phân tích heap snapshot và tự động phát hiện các điểm rò rỉ bộ nhớ. Với hơn 4,800 stars và 135 forks trên GitHub, đây là công cụ không thể thiếu trong bộ kỹ năng tối ưu hiệu suất ứng dụng hiện đại.

Tính năng nổi bật

  • Tự động phát hiện rò rỉ trên trình duyệt: MemLab sử dụng Puppeteer để tương tác với trang web, tự động so sánh các heap snapshot để tìm ra các object không được giải phóng.
  • API phân tích Heap hướng đối tượng: Cung cấp khả năng truy vấn và duyệt qua các snapshot bộ nhớ của Chromium, Node.js, Electron và cả Hermes engine.
  • Bộ công cụ CLI đa năng: Tìm kiếm các cơ hội tối ưu hóa bộ nhớ thay vì chỉ dừng lại ở việc tìm lỗi leak.
  • MemLens: Công cụ trực quan hóa giúp bạn nhìn thấy các mối quan hệ phức tạp giữa các object trong bộ nhớ ngay trên trình duyệt.
  • Memory Assertions cho Node.js: Cho phép viết unit test để kiểm tra trạng thái bộ nhớ, đảm bảo code của bạn không để lại "rác" sau khi thực thi.

Cài đặt

Để bắt đầu sử dụng MemLab, bạn có thể cài đặt CLI toàn cục thông qua npm:

npm install -g memlab

Hoặc nếu bạn muốn dùng trong project Node.js:

npm install @memlab/core

Hướng dẫn sử dụng

Cách tìm Memory Leak cơ bản

Giả sử bạn muốn kiểm tra xem một hành động trên trang web có gây leak hay không. Bạn cần tạo một file scenario (ví dụ: test-leak.js):

// URL khởi đầu
function url() {
  return 'https://example.com';
}

// Hành động mà bạn nghi ngờ gây leak (ví dụ: mở một modal)
async function action(page) {
  await page.click('#open-modal-button');
}

// Hành động quay lại trạng thái cũ (ví dụ: đóng modal)
async function back(page) {
  await page.click('#close-modal-button');
}

module.exports = { action, back, url };

Sau đó, chạy lệnh sau để MemLab thực hiện quy trình: Truy cập -> Action -> Back và phân tích bộ nhớ:

memlab run --scenario test-leak.js

Kết quả phân tích

MemLab sẽ trả về một "Retainer trace" cực kỳ chi tiết. Nó cho bạn biết chính xác object nào đang bị giữ lại trong bộ nhớ và chuỗi tham chiếu (reference chain) nào đang ngăn cản Garbage Collector (GC) dọn dẹp nó.

MemLab found 1 leak(s)
[Window] (native) @35847
  --context (internal)---> [<function scope>] (object) @181905
  --bigArray (variable)---> [Array] (object) @182925

Nhìn vào trace này, bạn sẽ biết ngay biến bigArray trong scope của function nào đó đang là thủ phạm!

Kết luận

Ưu điểm:

  • Tự động hóa hoàn toàn quy trình chụp và so sánh heap snapshot.
  • Hỗ trợ tốt cho cả Frontend và Backend (Node.js).
  • Trực quan hóa dữ liệu tốt, dễ dàng tìm ra root cause.

Nhược điểm:

  • Cần kiến thức cơ bản về cách bộ nhớ hoạt động để đọc hiểu các trace phức tạp.
  • Việc chạy Puppeteer có thể tốn tài nguyên hệ thống.

Ai nên dùng? Nếu bạn là Senior Developer hoặc Performance Engineer đang đau đầu với các ứng dụng Single Page Application (SPA) phức tạp, MemLab chính là "vị cứu tinh" giúp bạn nâng tầm chất lượng sản phẩm của mình. Hãy thử cài đặt và quét project của mình ngay hôm nay nhé!

Nguồn: https://github.com/facebook/memlab