Computer >> Máy Tính >  >> Lập trình >> Javascript

Làm cách nào để các phần tử DOM tách rời có thể gây rò rỉ bộ nhớ trong JavaScript?

Các phần tử Dom tách rời

Các phần tử DOM tách rời là các phần tử đã bị xóa khỏi DOM nhưng bộ nhớ của chúng vẫn được giữ lại do JavaScript. Điều này có nghĩa là miễn là phần tử có tham chiếu đến bất kỳ biến hoặc một đối tượng nào ở bất kỳ đâu, nó sẽ không bị thu thập rác ngay cả sau khi bị hủy khỏi DOM.

DOM giống như một cây được liên kết đôi, có nghĩa là một tham chiếu đến một nút trong cây sẽ ngăn toàn bộ cây khỏi quá trình thu thập rác.

Hãy lấy một ví dụ về việc tạo một phần tử DOM trong javascript. Sau khi tạo phần tử, hãy phá hủy nó nhưng quên xóa biến đang giữ nó. Trường hợp này dẫn đến một DOM tách rời có tham chiếu không chỉ đến phần tử DOM cụ thể mà còn cho toàn bộ cây.

Ví dụ

Trong ví dụ sau, ngay cả sau khi bị xóa khỏi DOM, 'someText' sẽ vẫn có một tham chiếu trong đối tượng "value" toàn cục, đây là lý do tại sao nó không thể bị loại bỏ khỏi bộ thu gom rác và tiếp tục sử dụng bộ nhớ. Điều này gây ra rò rỉ bộ nhớ.

<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>

Tránh rò rỉ bộ nhớ

Để tránh rò rỉ bộ nhớ, cách tốt nhất là đặt var example bên trong trình nghe, biến nó thành một biến cục bộ. Khi var example bị xóa, đường dẫn của đối tượng sẽ bị cắt, cho phép bộ thu gom rác giải phóng bộ nhớ.