proto.lib

Rò rỉ bộ nhớ SPA: DOM node bị detach nhưng vẫn giữ tham chiếu

Khi chuyển route trong SPA, nếu listener, timer, observer hoặc closure vẫn giữ tham chiếu tới node DOM đã bị gỡ khỏi cây, garbage collector không thể thu hồi node đó; lặp lại việc điều hướng nhiều lần khiến heap tăng dần cho tới khi tab chậm hẳn hoặc bị crash.

ApplicationNâng cao2026-08-25
Rò rỉ bộ nhớ SPA: DOM node bị detach nhưng vẫn giữ tham chiếu

Tags

#memory-leak#detached-dom#spa#event-listener#cleanup#heap-snapshot

Tài liệu tham khảo

Mở rộng

Animation gốc là một file HTML tự chứa, có thể nhúng lại ở bất kỳ trang nào khác. Mở file gốc

Liên quan

ApplicationTrung bình

Navigation API: điều hướng SPA thay History API

Navigation API cho SPA đăng ký intercept() để nhận toàn bộ điều hướng — link click, back/forward, submit form — commit khi dữ liệu đã sẵn sàng, giữ scroll và trạng thái focus, đồng thời báo lỗi điều hướng thất bại đúng cách thay vì im lặng.

#navigation-api#spa#routing#history-api
ApplicationTrung bình

Callback OAuth trong SPA: khôi phục route sau đăng nhập

Trước khi chuyển hướng sang identity provider, SPA lưu tham số state cùng route đích vào storage; khi provider redirect về callback, ứng dụng đối chiếu state, đổi code lấy token rồi điều hướng lại đúng route ban đầu — không phải trang chủ.

#oauth#spa#callback#state-param
ApplicationTrung bình

Page Visibility & throttling khi tab chạy nền

Khi tab bị đưa xuống nền, browser throttle hoặc dừng hẳn timer và requestAnimationFrame, thậm chí có thể discard tab để giải phóng bộ nhớ; polling loop dựa vào setInterval sẽ chạy sai nhịp hoặc dừng hẳn, nên cần Page Visibility API, tính thời gian từ timestamp, và flush dữ liệu quan trọng khi trang bị ẩn.

#page-visibility#background-tab#throttling#requestanimationframe