JavaScript Heap Memory Analysis new tool Oneheap

ONEHEAP focuses on the presentation of in-run JavaScript memory information, and visually restores the heapgraph to help understand V8 memory management.

Background

Most of the data in JavaScript runs is stored in the heap, so another important aspect of JavaScript performance analysis is memory, which is the heap analysis.

Using Chrome Dev Tools, you can build a heap snapshot (heapsnapshot) at some point in your application, which is a complete record of the various objects and references, and is an artifact of finding memory leaks. As with the 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 a profile and analyze the invocation relationships of various functions. This weekend I studied the document in a similar .heapsnapshot way, made this web gadget, and showed the Heap Snapshot in a graph.

The origin of Oneheap's name

There is only a things in computer science:cache invalidation and naming things. –phil Karlton

There is no time to think of a high-end, the atmosphere, the name of the top grade, because I work for the company called OneAPM (omit soft wide 1000 words, in short, do performance monitoring is very cow), so the name Oneheap. It's the second in the Toolkit.

How to generate a Heap Snapshot file browser

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

node. js

If you are a node. JS Engineer, you can install heapdump this well-known module.

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

Both of the above methods can generate .heapsnapshot files, this is used to test the Nodejs.heapsnapshot

Understand the. heapsnapshot file format

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

1. snapshotProperty holds some basic information about the snapshot, such as UID, snapshot name, number of nodes, etc.

2. nodesAll nodes are saved id,name, size information, etc., corresponding to the V8 sourceHeapGraphNode

3. edgesAttributes preserve the mappings between nodes, corresponding to the V8 sourceHeapGraphEdge

4. stringsAll strings are saved, and the string is nodes edges not stored directly, but the strings index in the string is stored.

A heap snapshot is actually a graph-aware data structure, but the .heapsnapshot file uses an array to store the structure of the graph in the process of storing it, a design that is ingenious and reduces the amount of disk space required.

Nodes Property

Nodes is a long one-dimensional array, but for readability, V8 automatically adds line breaks when serializing. Depending on the version of V8, it is possible to have 5 or 6 rows, or a property that is more than 6 rows trace_node_id .

Subscript

	Properties	type
N	Type	Number
N+1	Name	String
N+2	Id	Number
N+3	Self_size	Number
N+4	Edge_count	Number

Where type is a 0~12 number, the current Chrome has only 0~9 these properties, their corresponding meanings are

numbering	Properties	Description
0	Hidden	Hidden node, May is filtered when shown to user.
1	Array	An array of elements.
2	String	A string.
3	Object	A JS object (except for arrays and strings).
4	Code	Compiled code.
5	Closure	Function closure.
6	Regexp	Regexp.
7	Number	Number stored in the heap.
8	Native	Native object (not from V8 heap).
9	Synthetic	Synthetic object, usualy used for grouping snapshot items together.
10	Concatenated	String concatenated string. A pair of pointers to strings.
11	Sliced string	Sliced string. A fragment of another string.
12	Symbol	A Symbol (ES6).

Edges Property

Edges is also a one-dimensional array that is several times longer and more complex than it is nodes nodes :

Subscript

	Properties	type
N	Type	Number
N+1	Nameorindex	StringOrNumber
N+2	To_node	Node

Where type is a 0~6 number:

numbering	Properties	Description
0	Context	A variable from a function context.
1	Element	An element of an array
2	Property	A named object property.
3	Internal	A link that can ' t is accessed from Js,thus, its name isn ' t a real property name (e.g. parts of a consstring).
4	Hidden	A link that is needed for proper sizes calculation, and May was hidden from user.
5	Shortcut	A link, must not being followed during sizes calculation.
6	Weak	A weak reference (ignored by the GC).

The correspondence between nodes and edges

If you know the ID of a node, there is no way to detect it directly from the edges Point and its adjacent points, because it is edges not a from-to Hash. Want to know from a node to reach those nodes, need to traverse once nodes .

The following are the specific practices:

1. nodesInitializes a variable before the traversal edge_offset , the initial value is 0, and each traversal of a node changes its value.

2. During the process of traversing a node Nx:

The first Edge from Nx

edges[ edge_offset ]      是 Edge 的类型edges[ edge_offset +1 ]   是 Edge 的名称或下标edges[ edge_offset +2 ]   是 Edge 指向的对象的节点类型在 `nodes` 里的索引

2nd Edge from Nx

edges[ edge_offset + 3 ]       ............         是下一个 Edge edges[ edge_offset + 5 ]

From Nx, there are edge_count edge

...

3. After each node is traversed, edge_offset add it 3 x edge_count and go back to step 2 until all the nodes have traversed

Steps 1 through 3 are represented by pseudo-code:

edge_offset=0// 遍历每一个节点for(node in nodes){  // edges 下标从 edge_offset 到 edge_offset + 3 x edge_count    都是 node 可以到达的点  edge_offset+= 3 x node.edge_count}

The above is .heapsnapshot the file format defined, based on these findings, in conjunction with a front-end drawing of the library, it can be visualized to show the Heap Snapshot.

ONEHEAP Instructions for use

Link Address

Open with Chrome: oneheap

Something interesting.

@1

node. js

Pauling's "in-depth node. js" has a detailed introduction to buffer, which mentions that buffer is a typical representation of the combination of JavaScript and C + + technology

Browser

It's obvious that the browser has more Window and Document objects, and Detached DOM tree is a high-level place for front-end memory leaks.

Objects

The center of the densest part is the object constructor, and if you hide the object and the Array constructor, it becomes the following

Mathconstructor

The upper left corner is a constant such as 自然对数E this, V8 source code

Regular expressions

All of the regular expression instances point to the __proto__ RegExp constructor, while the REGEXP points to the __proto__ Object

Stream

The design and similarity of several classes related to node. js and Stream Java are used in the decorator design pattern, layered nesting, such as V8 source

Resources

Heap Profiling

Understanding memory leaks in JavaScript applications

About

This article is related to the source code: https://github.com/wyvernnot/javascriptperformancemeasurement/tree/gh-pages/heap_snapshot;
This article is OneAPM Engineer original. OneAPM is an emerging leader in application performance management, enabling enterprise users and developers to easily implement slow program code and real-time crawling of SQL statements. To read more technical articles, please visit the OneAPM official blog.

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

JavaScript Heap Memory Analysis new tool Oneheap