How to use Chrome and DevTools find memory problems affect the page performance, including memory leaks, memory expansion and frequent garbage collection

Learn how to use Chrome and DevTools find memory problems affect the page performance, including memory leaks, memory expansion and frequent garbage collection.

TL;DR

Use Chrome's Task Manager to understand the amount of memory your page that is currently being used.
Using the Timeline recording memory provided with a time visualization.
Heap snapshot determine detached DOM tree (a common cause of memory leaks).
Line with the assigned time to understand the new record time in the memory allocation JS heap.

Overview

In RAIL essence of the performance of the model, the focus of your job performance should be the user.

Memory problems is critical, as they are often perceived user. Users can detect memory problems in the following ways:

The performance of the page over time getting worse. This may be a symptom of a memory leak. Memory leak means that the page errors over time more and more pages of memory used.
Page performance has been very bad. This may be a memory expansion symptoms. Refers to the expansion memory, the page of memory than optimal use of the present speed should be used more memory.
Page often delayed or suspended. This may be the symptoms of frequent garbage collection. Garbage collection refers to the browser to recover the memory. Browser decide when garbage collection. During recovery, all the script execution will be suspended. Therefore, if the browser is often garbage collection, script execution will be suspended frequently.

Memory expansion: how to define "too much"?

Memory leaks is easy to determine. If a site uses more and more memory, then the memory leak occurs. However, memory expansion is more difficult to define. What is considered "use too much memory"?

Here there is no hard numbers, because of the different devices and browsers have different capabilities. Smooth running on high-end smart phones on the same page may collapse on low-end smartphones.

The key is to use RAIL defined and user-centric model. Learn what equipment popular in your user, and then test your pages on these devices. If the experience has been bad, the pages may exceed the memory capabilities of these devices.

Use Chrome Task Manager to monitor memory usage in real time

Chrome Task Manager to use as a starting point for the investigation of memory problems. Task Manager is a real-time monitor that can tell you the amount of memory pages currently in use.

Press the Shift+ Esc or go to the main menu and select Chrome More Tools > Task Manager , open the Task Manager.
Right-click on the table header Task Manager and enable JavaScript Memory .
The following two pages can tell you that the memory usage of different information about:
- Memory column represents the native memory. DOM node is stored in a native memory. If this value is increasing, then you are creating a DOM node.
- JavaScript Memory column represents JS heap. This column contains two values. The value you are interested in real-time digital (numbers in parentheses). Real-time numbers indicate the amount of memory that can reach objects on your pages are using. If this number is increasing, either you are creating a new object, either an existing object is growing.
Using the Timeline recording visual memory leak

You can also use the Timeline panel as a starting point for the investigation. Timeline panel can help you to understand intuitively the page memory usage over a period of time.
1. Open on DevTools Timeline panel.
2. Enable Memory check box.
3. Take notes .
Tip: A better approach is to use mandatory garbage collection start and end recording. When recording Click Collect garbage button ( ) can force garbage collection.

To display the Timeline memory recording, please consider using the following code:
```
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);
```
```
 
```
Each time the button referenced by the code, the body of the document will be additional 10,000 div nodes, and 1,000,000 of a x string of characters pushed xarray. Timeline run this code will generate a record similar to the following screenshot:
First, let's explain the user interface. Overview pane HEAP chart ( NET below) indicate JS heap. Overview of the lower pane is counter pane. From here, you can see the memory usage by JS heap (and Overview pane HEAP same chart), document, DOM nodes, listeners and GPU memory segments. Deactivate the corresponding check box to hide in the chart.

Now, we will analyze a screenshot of the code. If you look node counter (green chart), you'll see that it exactly matches the code. Node count mode to increase in discrete steps. You can assume that each node count is increased to grow() a call. JS graph display stack (blue chart) not directly. To comply with best practices, the first decline is actually a forced garbage collection (by pressing the Collect garbage realized button). As the records, you will see the level of staggered JS heap size changes. This phenomenon is normal and to be expected: Each click of a button, JavaScript code that will create a DOM node to create a string during a one million-character code that will accomplish a great deal. The key here is, JS heap will be greater than at the beginning (here the "Start" refers to the point in time after the mandatory garbage collection) at the end. In actual use, if you've seen this node JS heap size or increasing the size of the pattern, there may be a memory leak.

Use snapshot heap memory leaks have been found in separate DOM tree

Only when the page's DOM tree or JavaScript code that is no longer referenced DOM node, DOM node will be recovered as waste. If a node is removed from the DOM tree, but some JavaScript still refer to it, we call this node as "isolated." Detached DOM node is a common cause of memory leaks. This section will teach you how to use DevTools heap analyzer determines the node separated.

The following is a simple example of DOM nodes separated.
```
var detachedNodes;

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);
```
　　
```
 
```
Click referenced in the code creates a button that contains 10 li sub-level ul node. These nodes are referenced by the code, but not in the DOM tree, and therefore they have been separated.

One way to determine the stack snapshot is separated nodes. As the name suggests, a snapshot of heap memory can be allocated between the object and the JS DOM nodes take a snapshot of your page when you display.

To create a snapshot, open DevTools and go to Profiles panel, select Take Heap Snapshot radio button, and then press the Take Snapshot button.

Snapshots may take some time to process and load. When finished, the left panel (named HEAP SNAPSHOTS select the snapshot).

In Class filter text box, type Detachedthe search separated DOM tree.
Expand the triangle to investigate a separate tree.
Highlighted in yellow node having a direct reference to the JavaScript code thereof. Highlighted in red nodes are not directly referenced. Only part of the tree yellow nodes, which are only active. In general, you need to focus on the yellow node. Fix the code, the yellow node active time is not longer than the time you need, you also need to eliminate red nodes belonging to the yellow node of the tree.

Click the yellow nodes carry out further investigation. In the Object pane, you can see more information related to the code that is being referenced node. For example, in the screenshot below, you can see detachedTree the variables are referencing the node. To address this specific memory leak, you need to study the use detachedTree of code and make sure that when not needed, this code can remove its reference to the node.
Using the Timeline allocated heap memory leaks determined JS

You can assign the timeline is another tool for tracking JS heap memory leaks.

To show the distribution of the time line, consider the following code:
```
var x =[];

function grow(){
  x.push(newArray(1000000).join('x'));
}

document.getElementById('grow').addEventListener('click', grow);
```
Each time the button when referenced by code, will be to x add a string of one million characters array.

To record distribution timeline, open DevTools, then go to the Profiles panel, select Record Allocation Timeline radio button, press the Start button to perform your operation suspected of causing a memory leak. When finished, press the stop recording button ( ).

When recording, note that any allocation is displayed on the timeline blue vertical (as shown in the screenshot below).

The blue vertical line represents the new memory allocation. There may be a memory leak new memory allocation. You can zoom in on a vertical line, the Constructor filter pane to show only distributed within the specified time frame of the object.

Expand the object and click on its value, may Object view it for more details pane. For example, in the screenshot below, the distribution by viewing the details of the new object, you can see that it is assigned to the Window scope of x variables.

Press survey memory allocation function

Use Record Allocation Profiler type JavaScript function may view memory allocation.

Select Record Allocation Profiler radio button. If there is a worker on the page, you can use the Start drop-down menu next to the button to select it as the analysis target.
Press the Start button.
Perform an operation on a page you want to investigate.
Upon completion of all operations by Stop button.

DevTools memory allocation as a function of display details. The default view is Heavy (Bottom Up) , will be allocated the most memory function displayed at the top.

Found that frequent garbage collection

If you feel the page often pause, there may be garbage collection.

You can use the Chrome Task Manager or Timeline memory records found frequent garbage collection. In Task Manager, Memory or JavaScript Memory values often rise and fall indicates the presence of frequent garbage collection. In recording Timeline, JS heap or node count rising and falling graph frequently indicative of the presence of frequent garbage collection.

After determining the problem, you can assign a timeline record to find out what memory is being allocated, and what led to the distribution function.