JavaScript堆内存分析新工具OneHeap怎么用

这篇文章给大家介绍JavaScript 堆内存分析新工具OneHeap怎么用，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。

创新互联建站专业成都网站制作、做网站，集网站策划、网站设计、网站制作于一体，网站seo、网站优化、网站营销、软文推广等专业人才根据搜索规律编程设计，让网站在运行后，在搜索中有好的表现，专业设计制作为您带来效益的网站！让网站建设为您创造效益。

OneHeap 关注于运行中的 JavaScript 内存信息的展示，用可视化的方式还原了 HeapGraph，有助于理解 v8 内存管理。

JavaScript 运行过程中的大部分数据都保存在堆 (Heap) 中，所以 JavaScript 性能分析另一个比较重要的方面是内存，也就是堆的分析。

利用 Chrome Dev Tools 可以生成应用程序某个时刻的堆快照 (HeapSnapshot)，它较完整地记录了各种对象和引用的情况，堪称查找内存泄露问题的神器。和 Profile 结果一样，快照可以被导出成 .heapsnapshot 文件。

JavaScript 堆内存分析新工具OneHeap怎么用

上周发布了工具 OneProfile ，可以用来动态地展示 Profile 的结果，分析各种函数的调用关系。周末我用类似的思路研究了一下 .heapsnapshot 文件，做了这个网页小工具，把 Heap Snapshot 用有向图的方式展现出来。

JavaScript 堆内存分析新工具OneHeap怎么用

OneHeap 名字的由来

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

目前还没有时间想一个高端、大气、上档次的名字，因为我供职的公司名叫 OneAPM ( 省去软广1000字，总之做性能监控很牛)，所以就取名 OneHeap 啦。它是 Toolkit 里的第二个。

如何生成 Heap Snapshot 文件

使用 Chrome 打开测试页面按 F12 打开 Devtools，切换到 Profiles 页，选择 Take Heap Snapshot。稍等片刻，在生成的 Snapshot 上点击右键可以导出，文件后缀一般是 .heapsnapshot。

Node.JS

如果你是 Node.JS 工程师，可以安装 heapdump 这个很有名的模块。

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

上面两种方法都可以生成 .heapsnapshot 文件，这个是用来测试的 nodejs.heapsnapshot

理解 .heapsnapshot 文件格式

打开测试用的 nodejs.heapsnapshot 文件，这是一个很大的 JSON 对象：

snapshot 属性保存了关于快照的一些基本信息，如 uid，快照名，节点个数等

nodes 保存了是所有节点的 id，name，大小信息等,对应 v8 源码里的 HeapGraphNode

edges 属性保存了节点间的映射关系，对应 v8 源码的 HeapGraphEdge

strings 保存了所有的字符串， nodes 和 edges 中不会直接存字符串，而是存了字符串在 strings 中的索引

堆快照其实是一个有向图的数据结构，但是 .heapsnapshot 文件在存储的过程中使用了数组来存储图的结构，这一设计十分巧妙而且减少了所需磁盘空间的大小。

nodes 属性

nodes 是一个很长一维的数组，但是为了阅读方便，v8 在序列化的时候会自动加上换行。按照 v8 版本的不同，可能是5个一行，也可能是6个一行，如果是 6 个一行，则多出来的一个 trace_node_id 属性。

关于JavaScript 堆内存分析新工具OneHeap怎么用就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。

标题名称：JavaScript堆内存分析新工具OneHeap怎么用
分享URL：http://6mz.cn/article/pijdii.html

网站建设知识