Learn how to use Chrome and DevTools to find memory issues that affect page performance, includingmemory leaks, memory bloat, and frequent garbage collections.
Summary
- Find out how much memory your page is currently using with the Chrome Task Manager.
- Visualize memory usage over time with Timeline recordings.
- Identify detached DOM trees (a common cause of memory leaks) with Heap Snapshots.
- Find out when new memory is being allocated in your JS heap with Allocation Timeline recordings.
Overview
In the spirit of the RAIL performance model, the focus of your performance efforts should beyour users.
Memory issues are important because they are often perceivable by users. Users can perceive memoryissues in the following ways:
- A page's performance gets progressively worse over time. This is possibly a symptom of amemory leak. A memory leak is when a bug in the page causes the page to progressively use more andmore memory over time.
- A page's performance is consistently bad. This is possibly a symptom of memory bloat. Memorybloat is when a page uses more memory than is necessary for optimal page speed.
- A page's performance is delayed or appears to pause frequently. This is possibly a symptom offrequent garbage collections. Garbage collection is when the browser reclaims memory. The browserdecides when this happens. During collections, all script execution is paused. So if the browseris garbage collecting a lot, script execution is going to get paused a lot.
Memory bloat: how much is "too much"?
A memory leak is easy to define. If a site is progressively using more and more memory, then you'vegot a leak. But memory bloat is a bit harder to pin down. What qualifies as "using too much memory"?
There are no hard numbers here, because different devices and browsers have different capabilities.The same page that runs smoothly on a high-end smartphone might crash on a low-end smartphone.
The key here is to use the RAIL model and focus on your users. Find out what devices are popularwith your users, and then test out your page on those devices. If the experience is consistentlybad, the page may be exceeding the memory capabilities of those devices.
Monitor memory use in realtime with the Chrome Task Manager
Use the Chrome Task Manager as a starting point to your memory issue investigation. The Task Manageris a realtime monitor that tells you how much memory a page is currently using.
Press Shift+Esc or go to the Chrome main menu and select More tools > Task manager toopen the Task Manager.
See AlsoTop 7 Ways to Fix Memory Leak In Google Chrome on Windows and MacFix Chrome Memory Leak & Reduce High RAM UsageHow to Fix Chrome Memory Leak? - ChromeFixesMemory leaks and how to find them using Chrome Dev Tools
Right-click on the table header of the Task Manager and enable JavaScript memory.
These two columns tell you different things about how your page is using memory:
- The Memory column represents native memory. DOM nodes are stored in native memory. If thisvalue is increasing, DOM nodes are getting created.
- The JavaScript Memory column represents the JS heap. This column contains two values. Thevalue you're interested in is the live number (the number in parentheses). The live numberrepresents how much memory the reachable objects on your page are using. If this number isincreasing, either new objects are being created, or the existing objects are growing.
Visualize memory leaks with Performance recordings
You can also use the Performance panel as another starting point in your investigation. The Performancepanel helps you visualize a page's memory use over time.
- Open the Performance panel on DevTools.
- Enable the Memory checkbox.
- Make a recording.
To demonstrate Performance memory recordings, consider the code below:
var x = [];function grow() { for (var i = 0; i < 10000; i++) { document.body.appendChild(document.createElement('div')); } x.push(new Array(1000000).join('x'));}document.getElementById('grow').addEventListener('click', grow);Every time that the button referenced in the code is pressed, ten thousand div nodes are appendedto the document body, and a string of one million x characters is pushed onto the x array.Running this code produces a Timeline recording like the following screenshot:
First, an explanation of the user interface. The HEAP graph in the Overview pane (belowNET) represents the JS heap. Below the Overview pane is the Counter pane. Here you cansee memory usage broken down by JS heap (same as HEAP graph in the Overview pane),documents, DOM nodes, listeners, and GPU memory. Disabling a checkbox hides it from the graph.
Now, an analysis of the code compared with the screenshot. If you look at the node counter (thegreen graph) you can see that it matches up cleanly with the code. The node count increases indiscrete steps. You can presume that each increase in the node count is a call to grow(). The JSheap graph (the blue graph) is not as straightforward. In keeping with best practices, the first dipis actually a forced garbage collection (achieved by pressing the collect garbage button). Asthe recording progresses you can see that the JS heap size spikes. This is natural and expected: theJavaScript code is creating the DOM nodes on every button click and doing a lot of work when itcreates the string of one million characters. The key thing here is the fact that the JS heap endshigher than it began (the "beginning" here being the point after the forced garbage collection). Inthe real world, if you saw this pattern of increasing JS heap size or node size, it wouldpotentially mean a memory leak.
Discover detached DOM tree memory leaks with Heap Snapshots
A DOM node can only be garbage collected when there are no references to it from either the page'sDOM tree or JavaScript code. A node is said to be "detached" when it's removed from the DOM tree butsome JavaScript still references it. Detached DOM nodes are a common cause of memory leaks. Thissection teaches you how to use DevTools' heap profilers to identify detached nodes.
Here's a simple example of detached DOM nodes.
var detachedTree;function create() { var ul = document.createElement('ul'); for (var i = 0; i < 10; i++) { var li = document.createElement('li'); ul.appendChild(li); } detachedTree = ul;}document.getElementById('create').addEventListener('click', create);Clicking the button referenced in the code creates a ul node with ten li children. These nodesare referenced by the code but do not exist in the DOM tree, so they're detached.
Heap snapshots are one way to identify detached nodes. As the name implies, heap snapshots show youhow memory is distributed among your page's JS objects and DOM nodes at the point of time of thesnapshot.
To create a snapshot, open DevTools and go to the Memory panel, select the HeapSnapshot radio button, and then press the Take Snapshot button.
The snapshot may take some time to process and load. Once it's finished, select it from the lefthandpanel (named HEAP SNAPSHOTS).
Type Detached in the Class filter textbox to search for detached DOM trees.
Expand the carats to investigate a detached tree.
Nodes highlighted yellow have direct references to them from the JavaScript code. Nodes highlightedred do not have direct references. They are only alive because they are part of the yellow node'stree. In general, you want to focus on the yellow nodes. Fix your code so that the yellow node isn'talive for longer than it needs to be, and you also get rid of the red nodes that are part of theyellow node's tree.
Click on a yellow node to investigate it further. In the Objects pane you can see moreinformation about the code that's referencing it. For example, in the screenshot below you can seethat the detachedTree variable is referencing the node. To fix this particular memory leak, youwould study the code that uses detachedTree and ensure that it removes its reference to the nodewhen it's no longer needed.
Identify JS heap memory leaks with Allocation Timelines
The Allocation Timeline is another tool that can help you track down memory leaks in your JS heap.
To demonstrate the Allocation Timeline consider the following code:
var x = [];function grow() { x.push(new Array(1000000).join('x'));}document.getElementById('grow').addEventListener('click', grow);Every time that the button referenced in the code is pushed, a string of one million characters isadded to the x array.
To record an Allocation Timeline, open DevTools, go to the Profiles panel, select the RecordAllocation Timeline radio button, press the Start button, perform the action that you suspectis causing the memory leak, and then press the stop recording button(
) whenyou're done.
As you're recording, notice if any blue bars show up on the Allocation Timeline, like in thescreenshot below.
Those blue bars represent new memory allocations. Those new memory allocations are your candidatesfor memory leaks. You can zoom on a bar to filter the Constructor pane to only show objects thatwere allocated during the specified timeframe.
Expand the object and click on its value to view more details about it in the Object pane. Forexample, in the screenshot below, by viewing the details of the object that was newly allocated,you'd be able to see that it was allocated to the x variable in the Window scope.
Investigate memory allocation by function
Use the Allocation Sampling type in the Memory panel to view memory allocation by JavaScript function.
- Select the Allocation Sampling radio button. If there is a worker on the page, youcan select that as the profiling target using the dropdown menu next to the Start button.
- Press the Start button.
- Perform the actions on the page which you want to investigate.
- Press the Stop button when you have finished all of your actions.
DevTools shows you a breakdown of memory allocation by function. The default view is Heavy (BottomUp), which displays the functions that allocated the most memory at the top.
Spot frequent garbage collections
If your page appears to pause frequently, then you may have garbage collection issues.
You can use either the Chrome Task Manager or Timeline memory recordings to spot frequent garbagecollections. In the Task Manager, frequently rising and falling Memory or JavaScript Memoryvalues represent frequent garbage collections. In Timeline recordings, frequently rising and fallingJS heap or node count graphs indicate frequent garbage collections.
Once you've identified the problem, you can use an Allocation Timeline recording to find out wherememory is being allocated and which functions are causing the allocations.
