Learn how to use Chrome and DevTools to find memory issues that affect page performance, including memory leaks, memory bloat, and frequent garbage collections. Show
Summary
OverviewIn the spirit of the RAIL performance model, the focus of your performance efforts should be your users. Memory issues are important because they are often perceivable by users. Users can perceive memory issues in the following ways:
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've got 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 popular with your users, and then test out your page on those devices. If the experience is consistently bad, the page may be exceeding the memory capabilities of those devices. Monitor memory use in realtime with the Chrome Task ManagerUse the Chrome Task Manager as a starting point to your memory issue investigation. The Task Manager is a realtime monitor that tells you how much memory a page is currently using.
These two columns tell you different things about how your page is using memory:
Visualize memory leaks with Timeline recordingsYou can also use the Timeline panel as another starting point in your investigation. The Timeline panel helps you visualize a page's memory use over time.
Tip: It's a good practice to start and end your recording with a forced garbage collection. Click the collect garbage button ( ) while recording to force garbage collection.To demonstrate Timeline memory recordings, consider the code below:
Every time that the button referenced in the code is pressed, ten thousand First, an explanation of the user interface. The HEAP graph in the Overview pane (below NET) represents the JS heap. Below the Overview pane is the Counter pane. Here you can see 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 (the green graph) you can see that it matches up cleanly with the code. The node count increases in discrete steps. You can presume that each increase in the node count is a call to Discover detached DOM tree memory leaks with Heap SnapshotsA DOM node can only be garbage collected when there are no references to it from either the page's DOM tree or JavaScript code. A node is said to be "detached" when it's removed from the DOM tree but some JavaScript still references it. Detached DOM nodes are a common cause of memory leaks. This section teaches you how to use DevTools' heap profilers to identify detached nodes. Here's a simple example of detached DOM nodes.
Clicking the button referenced in the code creates a Heap snapshots are one way to identify detached nodes. As the name implies, heap snapshots show you how memory is distributed among your page's JS objects and DOM nodes at the point of time of the snapshot. To create a snapshot, open DevTools and go to the Profiles panel, select the Take Heap Snapshot 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 lefthand panel (named HEAP SNAPSHOTS). Type Expand the carats to investigate a detached tree. Nodes highlighted yellow have direct references to them from the JavaScript code. Nodes highlighted red do not have direct references. They are only alive because they are part of the yellow node's tree. In general, you want to focus on the yellow nodes. Fix your code so that the yellow node isn't alive for longer than it needs to be, and you also get rid of the red nodes that are part of the yellow node's tree. Click on a yellow node to investigate it further. In the Objects pane you can see more information about the code that's referencing it. For example, in the screenshot below you can see that the 0 variable is referencing the node. To fix this particular memory leak, you would study the code that uses 0 and ensure that it removes its reference to the node when it's no longer needed.Identify JS heap memory leaks with Allocation TimelinesThe 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:
Every time that the button referenced in the code is pushed, a string of one million characters is added to the To record an Allocation Timeline, open DevTools, go to the Profiles panel, select the Record Allocation Timeline radio button, press the Start button, perform the action that you suspect is causing the memory leak, and then press the stop recording button ( ) when you're done.As you're recording, notice if any blue bars show up on the Allocation Timeline, like in the screenshot below. Those blue bars represent new memory allocations. Those new memory allocations are your candidates for memory leaks. You can zoom on a bar to filter the Constructor pane to only show objects that were allocated during the specified timeframe. Expand the object and click on its value to view more details about it in the Object pane. For example, 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 4 scope.Investigate memory allocation by functionUse the Record Allocation Profiler type to view memory allocation by JavaScript function.
DevTools shows you a breakdown of memory allocation by function. The default view is Heavy (Bottom Up), which displays the functions that allocated the most memory at the top. Spot frequent garbage collectionsIf 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 garbage collections. In the Task Manager, frequently rising and falling Memory or JavaScript Memory values represent frequent garbage collections. In Timeline recordings, frequently rising and falling JS 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 where memory is being allocated and which functions are causing the allocations. |