Debug Memory Leak trong Single Page Application bằng Chrome DevTools Memory Profiler

Hiện tượng ứng dụng càng dùng lâu càng giật lag#

Trong các ứng dụng Single Page Application (SPA), người dùng có thể mở tab và làm việc suốt 8 tiếng mà không hề F5 tải lại trang.

Nếu mã nguồn có lỗi rò rỉ bộ nhớ:

• Tab trình duyệt ngốn từ 80MB lên tới 1.5GB RAM.
• Máy tính của người dùng bắt đầu hú quạt tản nhiệt, pin sụt nhanh.
• Trình duyệt crash với thông báo "Out of Memory".

Dưới đây là quy trình 3 bước sử dụng Chrome DevTools Memory Profiler để truy tìm thủ phạm rò rỉ bộ nhớ.

Quy trình chụp Heap Snapshot 3 bước#

1. Bước 1 (Chụp Snapshot ban đầu): Mở Chrome DevTools $\rightarrow$ Tab Memory $\rightarrow$ Chọn Heap Snapshot $\rightarrow$ Bấm nút "Take snapshot" (Snapshot 1).
2. Bước 2 (Thực hiện hành động nghi ngờ): Mở một Modal phức tạp, cuộn danh sách, rồi đóng Modal lại (lặp lại 3 lần để rác tích tụ).
3. Bước 3 (Chụp Snapshot so sánh): Bấm "Take snapshot" lần 2 (Snapshot 2). Đổi chế độ xem từ Summary sang Comparison (So sánh giữa Snapshot 2 và Snapshot 1).

Xem cột # Delta (Số lượng object tăng thêm):
Nếu thấy Detached HTMLElement hoặc EventListener có số Delta > 0, 
đó chính là rò rỉ bộ nhớ!

3 Thủ phạm Memory Leak phổ biến nhất trong React#

1. Quên dọn dẹp Event Listener toàn cục:
   TYPESCRIPT Sao chép

   useEffect(() => {
     const handleResize = () => { /* ... */ };
     window.addEventListener('resize', handleResize);
     // QUÊN RETURN HÀM CLEANUP:
     return () => window.removeEventListener('resize', handleResize);
   }, []);
   

2. Quên hủy subscription của WebSocket hoặc Interval: Luôn nhớ clearInterval(timer).
3. Detached DOM Tree: Một biến JavaScript toàn cục vẫn giữ tham chiếu tới một phần tử DOM đã bị gỡ khỏi trang.

Góc thảo luận#

Anh em đã từng dùng tab Memory Profiler để bắt memory leak ở frontend bao giờ chưa? Ca leak khó nhằn nhất mà anh em từng gặp là gì?

Xem thêm nội dung liên quan:

• Học Lập trình Web Hiệu năng cao
• Bộ đề trắc nghiệm JavaScript