JavaScript 中分离的 DOM 元素如何导致内存泄漏?


分离的 DOM 元素

分离的 DOM 元素是指已从 DOM 中移除但其内存仍因 JavaScript 而保留的元素。这意味着只要该元素在任何地方都引用任何变量或对象,即使从 DOM 中销毁后,它也不会被垃圾回收。

DOM 就像一个双向链表,这意味着对树中某个节点的引用将阻止整个树被垃圾回收。

让我们以在 javascript 中创建 DOM 元素为例。创建元素后将其销毁,但忘记删除保存它的变量。这种情况会导致分离的 DOM,它不仅引用特定的 DOM 元素,还引用整个树。

示例

在下面的示例中,即使从 DOM 中移除,'someText' 仍然在全局 'value' 对象中具有引用。这就是为什么它无法从垃圾回收器中删除并继续消耗内存。这会导致内存泄漏。

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

避免内存泄漏

为了避免内存泄漏,最佳实践是将 var example 放入监听器中,使其成为局部变量。当 var example 被删除时,对象的路径将被切断,允许垃圾回收器释放内存。

更新于: 2019-07-30

2K+ 浏览量

开启你的 职业生涯

通过完成课程获得认证

开始学习
广告