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. snapshot
attributes hold some basic information about the snapshot, such as UID, snapshot name, number of nodes, etc.
2. nodes
Save the Id,name of all the nodes, size information, etc., corresponding to the V8 sourceHeapGraphNode
3. The edges
attribute preserves the mappings between nodes, corresponding to the V8 sourceHeapGraphEdge
4. strings
all strings are saved, and the string is nodes
edges
not stored directly, but the index in the string is stored strings
.
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
It is also a one-dimensional array, which 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. nodes
initialize a variable before traversing, the edge_offset
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's a total 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
Printing http://www.biyinjishi.com/
Printing Knowledge http://www.biyinjishi.com/kdocs/
Printing Tips http://www.biyinjishi.com/kdocslist/1/
Print Template http://www.biyinjishi.com/kdocslist/2/
Printing Process http://www.biyinjishi.com/kdocslist/3/
Printed material http://www.biyinjishi.com/kdocslist/4/
Print Creative http://www.biyinjishi.com/kdocslist/5/
Printing Platform http://www.biyinjishi.com/kdocslist/6/
Ordinary business card http://www.biyinjishi.com/products/a10-b1010/d100001/
mid-end business card http://www.biyinjishi.com/products/a10-b1010/d100002/
High-end business card http://www.biyinjishi.com/products/a10-b1010/d100003/
Creative Business Card http://www.biyinjishi.com/products/a10-b1010/d100004/
Membership card http://www.biyinjishi.com/products/a10-b1020/
PVC Membership Card http://www.biyinjishi.com/products/a10-b1020/d100006/
Magnetic stripe membership card http://www.biyinjishi.com/products/a10-b1020/d100007/
Chip membership card http://www.biyinjishi.com/products/a10-b1020/d100008/
JavaScript Heap Memory analysis new tool Oneheap