Quay lại danh sách case study
Quan ly Memory Leak trong Single Page Application
Phat hien va xu ly hien tuong ro ri bo nhho do su kien lang nghe khong duoc huy.
Bối cảnh
Ung dung SPA su dung React/Vue, khi chuyen trang lien tuc thi bo nhho RAM cua trinh duyet tang dan va gay treo may.
Vấn đề cần xử lý
Cac event listener hoac timer set setInterval duoc tao ra o component nhung khong duoc xoa khi component unmount.
Hướng xử lý đề xuất
Dam bao luon huy bo (cleanup) event listener va timer trong ham componentWillUnmount hoac useEffect cleanup function.
Câu trả lời mẫu khi phỏng vấn
Khi gap memory leak, em se dung Chrome DevTools Memory tab de chup snapshot. Nguyen nhan thuong la do chua removeEventListener hoac clear timer, nen em se bo sung ham cleanup tai vong doi huy cua component.
Trade-off
Them code cleanup lam code dai hon chut nhung dam bao do ben cho ung dung ve lau dai.
Kết quả kỳ vọng
Giam han hien tuong tran bo nhho, giup ung dung chay muot ma trong thoi gian dai.
Bài học khi trả lời phỏng vấn
Quan ly vong doi cua tai nguyen la ky nang bat buoc khi xay dung ung dung JavaScript hien dai.