Question

我正在尝试使用以下代码片段在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年给出的示例，但是该示例也不再造成内存泄漏。

How do I create a memory leak in JavaScript?

Answer 1

直接从本地文件系统打开页面时，

performance.memory.usedJSHeapSize不会更新。

下图显示了从问题中复制粘贴的完全相同的代码，表明在本地主机上访问时内存使用率不断增加：

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

如何像上面一样托管HTML：

最简单的选择是使用开发工具，例如Browsersync或Parcel。这些工具可让您从本地文件系统中打开文件，就像它们是从服务器托管的，其网址为http://localhost:1234/之类。（因为您的计算机上启动了一个临时Web服务器。）

另一种选择是将文件实际托管在服务器上。有很多选项可以做到这一点：

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

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

Chrome版本74.0.3729.131（正式版本）（64位）
Windows 10

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

1 个答案: