Shulou(Shulou.com)06/02 Report--

This article introduces you how to use the new JavaScript heap memory analysis tool OneHeap, the content is very detailed, interested friends can refer to, I hope it can be helpful to you.

OneHeap focuses on the display of running JavaScript memory information and restores HeapGraph visually, which helps to understand v8 memory management.

Most of the data during JavaScript running is stored in the Heap, so another important aspect of JavaScript performance analysis is memory, that is, heap analysis.

Chrome Dev Tools can be used to generate a heap snapshot (HeapSnapshot) of an application at a certain time, which records a variety of objects and references completely, and can be called an artifact to find memory leaks. As with Profile results, snapshots can be exported as .heapsnapshot files.

The tool OneProfile was released last week, which can be used to dynamically display the results of Profile and analyze the call relationship of various functions. I studied the .heapsnapshot file in a similar way over the weekend and made this web gadget to show Heap Snapshot in a directed graph.

The Origin of the name OneHeap

There are only two hard things in Computer Science: cache invalidation and naming things. -- Phil Karlton

At present, I don't have time to think of a high-end, magnificent, high-end name, because the company I work for is called OneAPM (omitting 1000 words in SoftGuang, which is very good at performance monitoring), so I named it OneHeap. It is the second one in Toolkit.

How to generate Heap Snapshot files

Open the test page using Chrome press F12 to open Devtools, switch to the Profiles page, and select Take Heap Snapshot. Wait a moment, right-click on the generated Snapshot to export, the file suffix is usually .heapsnapshot.

Node.JS

Https://github.com/bnoordhuis/node-heapdump

Both of the above methods can generate a .heapsnapshot file, which is the nodejs.heapsnapshot used for testing

Understand the .heapsnapshot file format

Open the nodejs.heapsnapshot file for the test, which is a large JSON object:

The snapshot attribute holds some basic information about snapshots, such as uid, snapshot name, number of nodes, etc.

Nodes stores the id,name and size information of all nodes, corresponding to the HeapGraphNode in the v8 source code

The edges attribute preserves the mapping between nodes, corresponding to the HeapGraphEdge of the v8 source code

Strings saves all strings. Strings are not stored directly in nodes and edges, but the index of strings in strings.

Heap snapshot is actually a directed graph data structure, but the .heapsnapshot file uses an array to store the graph structure during storage, which is ingenious and reduces the amount of disk space required.

Nodes attribute

Nodes is a very long one-dimensional array, but for ease of reading, v8 automatically adds line breaks when serializing. Depending on the v8 version, it may be five lines or six lines, and if it is six lines, there is an extra trace_node_id attribute.

This is the end of how to use OneHeap, a new tool for JavaScript heap memory analysis. I hope the above content can be of some help and learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.