This article mainly introduces some experience in sorting out and troubleshooting memory leaks, hoping to be useful to everyone, but also a way of self-encouragement, refueling ^_^

JS garbage collection and memory leaks

How do I know if there is a memory leak

Method 1: Open the Performance Monitor of Chrome to check the memory usage in real time

If memory continues to climb steadily over a period of time, there is a memory leak. This requires a real-time view of the memory footprint.Copy the code

Method 2: Use the Node command line

Process.memoryusage () // displays memoryUsage in the following fields

Resident set size (RSS) : All memory usage, including instruction area and stack. > heapTotal: the memory occupied by the heap, both used and unused. > heapUsed: part of the heapUsed. > external: memory occupied by C++ objects inside the V8 engineCopy the code

Determine the memory usage based on heapUsed.

Method 3: Output the current memory size periodically in HTML

// Periodically observe whether the output memory changes
setInterval((a)= >{
    console.log(window.performance.memory);
},2000)
Copy the code

Window. The performance. The memory: output current memory properties

UsedJsHeapSize is the total memory: refers to the memory occupied by JS objects, including V8 internal objects. TotalJsHeapSize is the current total memory: refers to the memory occupied by the JS heap, including the free memory of any JS object.

How to use chrome Analysis panel

1. Performance Monitor: Monitors memory in real time

Open the Chrome Panel – Performace TAB, click on the upper right corner… , choose More Tools > Performance Monitor

> CPU Usage - The CPU usage of the current site; > JS heap size - application memory usage; > DOM Nodes - The number of DOM Nodes in memory; > JavaScript event listeners- number of JavaScript event listeners registered on the current page; > Documents - The number of styles or script files used in the current page; > Frames - Number of Frames on the current page, including iframe and workers; > Layouts/SEC - Number of DOM relayouts per second; Word-wrap: break-word! Important; ">Copy the code

Focus on the first four items, and if you need to optimize performance, focus on the last three items.

2.memory

If the performance Monitor panel detects that the memory slowly increases, memory leaks occur.

In my case, I add 1-2MB of memory roughly every 30 seconds, which is not much, but as time goes on, the web process freezes, so I need to analyze it in detail.

Open the Memory panel in Chrome and record snapshot 1 before and snapshot 2 after memory leaks, as shown in the following figure.

Different types of lists can be displayed in each result view, but the most useful ones for our task are the summary and comparison lists.

The summary view provides the different types of allocation objects and their combined size:

Retained size: shallow size plus the size of the other objects that reference it. The amount of memory that can be reclaimed after the object and its references are freed. That is, the memory size of an object and its dependent objects. Distance shows the minimum distance an object can travel to the GC root (the memory originally referenced). > constructor: represents all objects generated by this constructor.Copy the code

The Comparison view provides the same information but allows you to compare different snapshots. This is very helpful in finding leaks.

3.JavaScript profiler

Function: You can record the time of functions to find out the functions that are time-consuming. USES:

4.Performance

Flame chart of various performance indicators on the statistics page, where you can see white screen time, FPS, resource loading timeline, LongTask, memory change curve and other information. Purpose: Web page performance optimization.

This article refer to

1. Ruan Da Shen — Memory Leak Tutorial

2.JS memory leaks and Chrome analysis tools

3. Analysis of front-end memory leaks

4. Front-end performance optimization analysis tool

5. Incomplete guide to Chrome Development Tools