DOM树保留在内存中，如果你点击处理元素上删除它里面的树

请考虑下面的示例：DOM树保留在内存中，如果你点击处理元素上删除它里面的树

<!DOCTYPE html> 
<html> 
<head> 
    <title>Detached HTML</title> 
    <script type="text/javascript" src="js/jquery-2.0.3.js"></script> 
    <script type="text/javascript"> 
     $(function() { 
      $(".summary").on("click", ".close", function() { 
       $(".summary").remove(); 
      }) 
     }) 
    </script> 
</head> 
<body> 
<div class="body"> 
    <div class="summary"> 
     <button class="close">Close</button> 
    </div> 
</div> 
</body> 
</html>

现在，请点击关闭按钮，然后采取堆快照（我在Chrome浏览器所做的那样）。在“Detached”上过滤结果。你可以看到被删除的元素变成了Detached DOM Tree，并且因为缓存/属性声音而停留。

这是预料的，这怎么处理？

来源

2014-01-22 Ilya Tsuryev

你的意思是在网络督察？它保持在元素树中？ –

开发者工具 - >配置文件 - >采取堆快照。它留在内存中，而不是在元素树中。我希望并希望它被垃圾收集。 –

已阅读此文http://stackoverflow.com/questions/11042492/jquery-remove-and-memory-leaks –

Sizzle保留内部缓存，这就是为什么在删除功能后仍然会看到分离元素。

不要担心，这不是内存泄漏，Sizzle会在缓存满时从其缓存中移除分离的元素。

注意，您可以通过之前的任何DOM选择设置值“$ .expr.cacheLength”如果你想减少缓存的大小设置缓存大小：

$.expr.cacheLength = 1;

我读的源代码滋滋的，你不能清除缓存（这是一个内部数据，并且您不能访问它），因为当你阅读功能创建缓存不能缓存大小设置为零：

function createCache() { 
    var keys = []; 

    function cache(key, value) { 
     // Use (key + " ") to avoid collision with native prototype properties (see Issue #157) 
     if (keys.push(key += " ") > Expr.cacheLength) { 
      // Only keep the most recent entries 
      delete cache[ keys.shift() ]; 
     } 
     return (cache[ key ] = value); 
     } 
    return cache; 
}

最后一行“缓存”功能：

return (cache[ key ] = value);

意味着缓存中至少有一个元素（函数不检查缓存的大小是否已设置为零并始终缓存该值）。

你也可以看到这个问题：jQuery/Sizzle checkContext memory leak

来源

2014-01-22 14:08:24 Mickael

谢谢。我也看到了这个代码部分，并指出cacheLength会修复它。不知道这是做事的正确方法。 –

DOM树保留在内存中，如果你点击处理元素上删除它里面的树

回答

相关问题