如何在JavaScript中创建内存泄漏并监视内存使用情况

Question

如何在JavaScript中创建内存泄漏并监视内存使用情况

8

我正在尝试使用以下代码片段在JavaScript中分配内存，以研究内存泄漏/消耗。然而

performance.memory.usedJSHeapSize

在我的情况下，它总是显示相同的数字10000000。尽管动态创建元素并将其附加到DOM中，但为什么这个数字从未改变？

我需要一个JavaScript片段来动态地创建内存泄漏并监视使用情况，使用performance.memory.usedJSHeapSize或任何其他可用的函数。

我尝试了这段代码，但performance.memory.usedJSHeapSize仍然保持在10000000：

<body>
    <p id="memory" style="position: fixed; top:10px; left:10px"></p>
<script>

    setInterval(() => {
        document.getElementById("memory").innerHTML = performance.memory.usedJSHeapSize
    }, 300);
     btn = [];
    let i = 0;
    setInterval(() => {
        for (let j = 0; j < 1000; j++) {
            ++i;
            let k=i;
            btn[k] = document.createElement("BUTTON");
            document.body.appendChild(btn[k]);
            btn[k].innerHTML = k;
            btn[k].addEventListener("click", function () {
                alert(k);
            });
        }
    }, 5000);
</script>
</body>

我已经尝试了这篇文章中2013年提供的示例，但是这个示例也不再会导致内存泄漏。

如何在JavaScript中创建内存泄漏？

- Waterfr Villa

我的猜测是，你创建的元素太少了，无法真正影响到堆。每5秒钟创建1000个DOM元素和闭包整数的函数对象？那算不了什么。试着分配大型数组并用随机值填充它们，然后将它们存储在这些按钮中。 - Bergi

没有帮助。你能提供一个可行的例子吗？ - Waterfr Villa

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Leftium · Accepted Answer

performance.memory.usedJSHeapSize在直接从本地文件系统打开页面时不会更新。

下面的图片显示，当通过localhost访问时，从问题中复制粘贴的完全相同的代码显示出内存使用量增加：

或者，您可以自己检查：https://memory-leak.surge.sh/simple/（您还可以检查原始代码：https://memory-leak.surge.sh/，但如果保持打开时间超过几秒钟，您的浏览器可能会冻结。）

如何像我上面所做的一样托管HTML：

最简单的选择是使用开发工具，比如 Browsersync 或 Parcel。这些工具会让你像从服务器访问URL那样打开本地文件系统中的文件，例如 http://localhost:1234/。（因为计算机上会启动一个临时Web服务器。）

另一个选择是实际上将文件托管在服务器上。有许多选项可以实现这一点：

surge 我用于上面示例的工具
Glitch（这个很酷，因为你可以在线编辑文件并立即查看更改）
Github pages

注意：结果可能因浏览器/硬件而异。我的环境：

Chrome 版本 74.0.3729.131（官方版本）（64 位）
Windows 10