简介
网页test.html
<doctype html> <!-- html5版本申明，需要写在文档的第一行 -->
<html>
<head>
<meta charset="utf-8" />
<title>标题：基础语法</title>
<link rel="stylesheet" href="引入CSS文件的路径" />
<script src="引入的JS文件的路径" type="text/javascpript" charset="UTF-8"></script>
</head>
<body bgcolor="#eeeeef">
<h1>test</h1>
</body>
</html>
按F12：
构造函数（Constructor ）：对象分类（构造器）和数量
距离（Distance）：从根节点（Roots）到达该对象经过的最短路径的长度
浅层大小（Shallow size）：对象自身大小（单位是 Byte），不含持有对象大小
保留的大小（Retained size）：对象自身大小加上它依赖链路上的所有对象的自身大小（Shallow size）之和
问题：对象的被引用关系丢失显示为“-”
例子：丢失的情况
文件：test.heapsnapshot
{"snapshot":
{"meta":
{"node_fields":["type","name","id","self_size","edge_count","trace_node_id","detachedness"],
"node_types":[["hidden","array","string","object","code","closure","regexp","number","native","synthetic","concatenated string","slicedstring","symbol","bigint"],"string","number","number","number","number","number"],
"edge_fields":["type","name_or_index","to_node"],
"edge_types":[["context","element","property","internal","hidden","shortcut","weak"],"string_or_number","node"],
"trace_function_info_fields":["function_id","name","script_name","script_id","line","column"],
"trace_node_fields":["id","function_info_index","count","size","children"],
"sample_fields":["timestamp_us","last_assigned_id"],
"location_fields":["object_index","script_id","line","column"]},
"node_count":9,
"edge_count":6,
"trace_function_count":0
},
"nodes":[
9,0,1,0, 2,0,0
,2,1,3,80,1,0,0
,8,3,5,80,2,0,0
,5,6,7,80,1,0,0
,8,2,9,80,0,0,0
,0,4,11,8,0,0,0
,2,5,13,8,0,0,0
,8,7,15,8,0,0,0
,2,8,17,8,0,0,0
],
"edges": [
5,9,7,
5,9,14,
5,9,28,
5,9,35,
5,9,42,
5,9,49
],
"trace_function_infos": [],
"trace_tree": [],
"samples": [],
"locations": [],
"strings": [
"GC roots",
"n1",
"n2",
"n3",
"n4",
"n5",
"n6",
"n7",
"n8",
"edge"
]
}
显示的情况
格式文件解析
{"snapshot":
{"meta":
{"node_fields":["type（type编号）","name（名字str索引）","id（v8 会确保该对象在本次应用生命周期中的多次的 dump 下中保持相同的 id）","self_size（shallow size浅层大小）","edge_count（边数量）","trace_node_id","detachedness"],
"node_types":[["hidden","array","string","object","code","closure","regexp","number","native","synthetic","concatenated string","slicedstring","symbol","bigint"],"string","number","number","number","number","number"],
"edge_fields":["type（边类型）","name_or_index（名字或者名字索引，当为element类型时为本身）","to_node（指向节点的索引）"],
"edge_types":[["context","element","property","internal","hidden","shortcut","weak"],"string_or_number","node"],
"trace_function_info_fields":["function_id","name","script_name","script_id","line","column"],
"trace_node_fields":["id","function_info_index","count","size","children"],
"sample_fields":["timestamp_us","last_assigned_id"],
"location_fields":["object_index","script_id","line","column"]},
"node_count":9,
"edge_count":6,
"trace_function_count":0
},
"nodes":[
9,0,1,0, 2,0,0 //ROOT，两条边
,2,1,3,80,1,0,0 //7,n1
,8,3,5,80,2,0,0 //14,n3
,5,6,7,80,1,0,0 //21,n6
,8,2,9,80,0,0,0 //28,n2
,0,4,11,8,0,0,0 //35,n4
,2,5,13,8,0,0,0 //42,n5
,8,7,15,8,0,0,0 //49,n7
,2,8,17,8,0,0,0 //56,n8
],
"edges": [
5,9,7(n1的起始索引), //root-n1
5,9,14, //root-n3
5,9,28, //n1-n2
5,9,35, //n3-n4
5,9,42, //n3-n5
5,9,49 //n6-n7
],
"trace_function_infos": [],
"trace_tree": [],
"samples": [],
"locations": [],
"strings": [
"GC roots",
"n1",
"n2",
"n3",
"n4",
"n5",
"n6",
"n7",
"n8",
"edge"
]
}
解析后如下图：
图展示：
graph LR 1[1: GC roots]--edge-->3[3: n1] 1[1: GC roots]--edge-->5[5: n3] 3[3: n1]--edge-->9[9: n2] 5[5: n3]--edge-->11[11: n4] 5[5: n3]--edge-->13[13: n5] 7[7: n6]--edge-->15[15: n7] 8[8: n8]修复问题
{"snapshot":
{"meta":
{"node_fields":["type","name","id","self_size","edge_count","trace_node_id","detachedness"],
"node_types":[["hidden","array","string","object","code","closure","regexp","number","native","synthetic","concatenated string","slicedstring","symbol","bigint"],"string","number","number","number","number","number"],
"edge_fields":["type","name_or_index","to_node"],
"edge_types":[["context","element","property","internal","hidden","shortcut","weak"],"string_or_number","node"],
"trace_function_info_fields":["function_id","name","script_name","script_id","line","column"],
"trace_node_fields":["id","function_info_index","count","size","children"],
"sample_fields":["timestamp_us","last_assigned_id"],
"location_fields":["object_index","script_id","line","column"]},
"node_count":9,
"edge_count":7,
"trace_function_count":0
},
"nodes":[
9,0,1,0, 2,0,0
,2,1,3,80,1,0,0
,8,3,5,80,2,0,0
,5,6,7,80,1,0,0
,8,2,9,80,0,0,0
,0,4,11,8,0,0,0
,2,5,13,8,1,0,0 //n5增加一条边
,8,7,15,8,0,0,0
,2,8,17,8,0,0,0
],
"edges": [
5,9,7,
5,9,14,
5,9,28,
5,9,35,
5,9,42,
5,9,49,
5,9,21 //n5增加一条边，指向21 n7的起始位置
],
"trace_function_infos": [],
"trace_tree": [],
"samples": [],
"locations": [],
"strings": [
"GC roots",
"n1",
"n2",
"n3",
"n4",
"n5",
"n6",
"n7",
"n8",
"edge"
]
}
最后效果：
标签：node,文件,heapsnapshot,--,fields,number,edge,解析,id From： https://www.cnblogs.com/UFO-blogs/p/18112309