Element DOM tách rời (Detached DOM) gây rò rỉ bộ nhớ trong JavaScript

Detached DOM Elements

Là các phần tử DOM đã bị xóa khỏi cây DOM nhưng bộ nhớ vẫn được giữ do JavaScript vẫn giữ tham chiếu (reference) đến chúng. Miên là element còn được tham chiếu bởi biến/đối tượng nào đó, nó không bị garbage collect ngay cả khi đã remove khỏi DOM.

DOM là cây liên kết đôi (double-linked tree). Tham chiếu đến một node sẽ giữ toàn bộ cây không bị thu gom.

Ví dụ gây rò rỉ

<html> <body> <script> var example = document.createElement("p"); example.id = "someText"; document.body.appendChild(example); var value = { text: document.getElementById('someText') }; function createFun() { value.text.innerHTML = "Javascript is not Java"; } createFun(); function deleteFun() { document.body.removeChild(document.getElementById('someText')); } deleteFun(); </script> </body> </html>

Sau deleteFun(), element #someText đã rời DOM nhưng biến value.text vẫn giữ tham chiếu → không bị GC → rò rỉ bộ nhớ.

Cách tránh

Đặt biến example bên trong listener/event handler để nó thành biến cục bộ (local). Khi hàm kết thúc, tham chiếu bị ngắt → GC giải phóng bộ nhớ.