Not enough memory to open this illustration

NOT ENOUGH MEMORY TO OPEN THIS ILLUSTRATION HOW TO
NOT ENOUGH MEMORY TO OPEN THIS ILLUSTRATION CODE

The node count increases in discrete steps. If you review the node counter (the green graph), it matches up cleanly with the code.

NOT ENOUGH MEMORY TO OPEN THIS ILLUSTRATION CODE

Now, an analysis of the code compared with the previous figure. Clear a checkbox to hide it from the graph. The memory usage is broken down by JS heap (same as HEAP graph in the Overview pane), documents, DOM nodes, listeners, and GPU memory. Below the Overview pane is the Counter pane. The HEAP graph in the Overview pane (below NET) represents the JS heap. Running the previous code sample produces a recording in the Performance panel like the following figure:ДЇirst, an explanation of the user interface. To demonstrate memory recordings, consider the following code: var x = Д(document.createElement('div')) Дocument.getElementById('grow').addEventListener('click', grow) Д®very time that the button referenced in the code is clicked, 10,000 div nodes are appended to the document body, and a string of 1,000,000 x characters is pushed onto the x array. To force garbage collection, click the collect garbage button while recording. It's a good practice to start and end your recording with a forced garbage collection. The Performance panel helps you visualize the memory use of a page over time. You can also use the Performance panel as another starting point in your investigation. Visualize memory leaks with Performance panel If this number is increasing, either new objects are being created, or the existing objects are growing. The live number represents how much memory the reachable objects on your page are using. The value you are interested in is the live number (the number in parentheses). The JavaScript Memory column represents the JS heap. If this value is increasing, DOM nodes are getting created. The Memory column represents native memory. These two columns tell you different things about how your page is using memory: Right-click the table header of the Microsoft Edge Browser Task Manager, and then enable JavaScript memory. Press Shift+ Esc or go to the Microsoft Edge main menu and select More tools > Browser Task Manager to open the Microsoft Edge Browser Task Manager. The Microsoft Edge Browser Task Manager is a realtime monitor that tells you how much memory a page is currently using.

Use the Microsoft Edge Browser Task Manager as a starting point to your memory issue investigation. Monitor memory use in realtime with the Microsoft Edge Browser Task Manager If the experience is consistently bad, the page may be exceeding the memory capabilities of those devices. Find out what devices are popular with your users, and then test out your page on those devices. The key here is to use the RAIL model and focus on your users. The same page that runs smoothly on a high-end smartphone may crash on a low-end smartphone.

There are no hard numbers here, because different devices and browsers have different capabilities. What qualifies as 'using too much memory'? But memory bloat is a bit harder to pin down. If a site is progressively using more and more memory, then you have a leak. So if the browser is garbage collecting a lot, script runtime is going to get paused a lot.ДЄ memory leak is easy to define. During collections, all script running is paused. Garbage collection is when the browser reclaims memory. This is possibly a symptom of frequent garbage collections. The performance of a page is delayed or appears to pause frequently. Memory bloat is when a page uses more memory than is necessary for optimal page speed. This is possibly a symptom of memory bloat. The performance of a page is consistently bad. A memory leak is when a bug in the page causes the page to progressively use more and more memory over time. This is possibly a symptom of a memory leak. The performance of a page gets progressively worse over time. Users may perceive memory issues in the following ways: Memory issues are important because they are often perceivable by users. In the spirit of the RAIL performance model, the focus of your performance efforts should be your users. See also Debug DOM memory leaks with the Detached Elements tool.

Find out when new memory is being allocated in your JavaScript heap (JS heap) with Allocation instrumentation on timeline.

Identify detached DOM trees (a common cause of memory leaks) with Heap snapshot.

Visualize memory usage over time with the Memory panel.

Find out how much memory your page is currently using with the Microsoft Edge Browser Task Manager.

NOT ENOUGH MEMORY TO OPEN THIS ILLUSTRATION HOW TO

Learn how to use Microsoft Edge and DevTools to find memory issues that affect page performance, including memory leaks, memory bloat, and frequent garbage collections.

Not enough memory to open this illustration