如何在JavaScript中创建内存泄漏并监视内存使用情况 [英] How to create memory leak and monitor memory usage in JavaScript
问题描述
我正在尝试使用以下代码片段在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年给出的示例，但是该示例也不再造成内存泄漏.
当直接从本地文件系统打开页面时， performance.memory.usedJSHeapSize不会更新.
下图显示了从问题中复制粘贴的完全相同的代码，表明在本地主机上访问时内存使用率增加了:
或者，您可以自己检查: https://memory-leak.surge.sh/simple/(您还可以检查原始代码: https://memory-leak.surge. sh/，但是如果您打开浏览器超过几秒钟，浏览器可能会冻结.)
如何像上面一样托管HTML:
最简单的选择是使用开发工具，例如浏览器同步或 http://localhost :1234/. (因为您的计算机上启动了一个临时Web服务器.)
另一个选择是将文件实际托管在服务器上.有很多选项可以做到这一点:
注意:结果可能会因浏览器/硬件而异.我的环境:
- Chrome版本74.0.3729.131(官方内部版本)(64位)
- Windows 10
I am trying to allocate memory in JavaScript to study memory leak/consumption using the code snippet below. However
performance.memory.usedJSHeapSize
always shows the same number, 10000000 in my case. How come that number never changes despite dynamically creation of elements and attaching to DOM ?
I need a JavaScript snippet to create memory leak and monitor the usage using performance.memory.usedJSHeapSize dynamically( or any other functions if exists).
I tried this code but performance.memory.usedJSHeapSize remains at 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>
I already tired the example given in 2013 in this post, but this one no longer create memory leak either.
How do I create a memory leak in JavaScript?
performance.memory.usedJSHeapSize does not update when the page is opened directly from the local file system.
The image below shows that the exact same code copy-pasted from the question shows increasing memory usage when accessed at localhost:
Or, you can check for yourself: https://memory-leak.surge.sh/simple/ (You can also check the original code: https://memory-leak.surge.sh/ but your browser might freeze up if left open for more than a few seconds.)
How to host the HTML like I did above:
The simplest option is to use dev tools like Browsersync or Parcel. These tools will let you open files from your local file system as if they were hosted from a server with a URL like http://localhost:1234/ . (Because a temporary web server is started on your computer.)
Another option is to actually host the files on a server. There are many options to do this:
- surge The tool I used for the examples above
- Glitch (This one is cool because you can edit the files online and see changes right away)
- Github pages
Note: results may vary based on browser/hardware. My environment:
- Chrome Version 74.0.3729.131 (Official Build) (64-bit)
- Windows 10
这篇关于如何在JavaScript中创建内存泄漏并监视内存使用情况的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
