heapsnapshot文件解析
简介
网页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" ] }
解析后如下图：
图展示：
修复问题
{"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" ] }
最后效果：
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 单线程的Redis速度为什么快？
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 展开说说关于C#中ORM框架的用法！