当我打开 Chrome 开发者工具，打开这个网页，并进行快照时，大小为 2.1MB。
当我单击其中一个按钮时，所有按钮及其 div 都被删除。如果我再拍一张快照，大小是 1.6MB。
那么在使用 Chrome 开发者工具和拍摄快照时，网页是否总是会消耗一些内存，您在拍摄快照和查找内存泄漏时需要考虑到这一点？
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript">
var onLoadFunc = function() {
for(var x=0;x<30000;x++) {
var button = document.createElement("input");
button.type = "button";
button.value = "Destroy Content";
button.onclick = destroyFunc;
document.getElementById('mainDiv').appendChild(button);
}
};
var destroyFunc = function() {
var el = document.getElementById( 'mainDiv' );
el.parentNode.removeChild(el);
};
</script>
</head>
<body onLoad="onLoadFunc()">
<div id="mainDiv"/>
</body>
</html>
最佳答案
您在快照中看到 javascript 引擎保存在堆中的所有内容。 javascript 引擎 (v8) 实际上将堆用于几乎所有内容，包括为页面生成的代码、内部 v8 脚本、对象、 map 等。
这可能会让您感到困惑，因为您无法控制这些对象的生命周期，但如果我们在快照中隐藏这些内部事物，问题会更大。在那种情况下，你会问为什么当我的对象对它的所有引用都被删除时这个对象仍然存在。或者为什么空页面使用 1.6mb 的 js 堆和堆快照什么都不显示。等
关于javascript - 为什么从 dom 中删除几乎所有对象不会导致内存减少？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20764376/