How to create memory leak and monitor memory usage in JavaScript

Question

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?

My guess is that you are creating far too few elements to really affect to heap. 1000 dom elements and function objects closing over an integer, every 5 seconds? That's nothing. Try allocating large arrays filled with random values and store them in those buttons. — Bergi
– Bergi, Commented May 14, 2019 at 19:20

Leftium · Accepted Answer · 2019-05-21 04:49:12Z

1

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

edited May 21, 2019 at 4:49

answered May 14, 2019 at 19:01

Leftium

18k6 gold badges73 silver badges110 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

C graphics Over a year ago

I need to try it at a remotely hosted version. Yes with youtube websites and many other website performance.memory.usedJSHeapSize keeps on increasing . I need a simple html.js file which does the same thing. Please provide a working example that can be hosted and yet increases the performance.memory.usedJSHeapSize

Leftium Over a year ago

@Cgraphics: Here is the exact sample code hosted on a server; it will show memory use as expected: memory-leak.surge.sh My answer already explained how to get the same results without a server, but I will add more details about how to host locally. (Also, a much simple example should work, too.)

Collectives™ on Stack Overflow

How to create memory leak and monitor memory usage in JavaScript

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related