JavaScript 運(yùn)行過程中的大部分?jǐn)?shù)據(jù)都保存在堆 (Heap) 中，所以 JavaScript 性能分析另一個(gè)比較重要的方面是內(nèi)存，也就是堆的分析。

利用 Chrome Dev Tools 可以生成應(yīng)用程序某個(gè)時(shí)刻的堆快照 (HeapSnapshot)，它較完整地記錄了各種對(duì)象和引用的情況，堪稱查找內(nèi)存泄露問題的神器。 和 Profile 結(jié)果一樣，快照可以被導(dǎo)出成 .heapsnapshot 文件。

上周發(fā)布了工具 OneProfile ， 可以用來動(dòng)態(tài)地展示 Profile 的結(jié)果，分析各種函數(shù)的調(diào)用關(guān)系。周末我用類似的思路研究了一下 .heapsnapshot 文件，做了這個(gè)網(wǎng)頁小工具，把 Heap Snapshot 用有向圖的方式展現(xiàn)出來。

OneHeap 名字的由來

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

目前還沒有時(shí)間想一個(gè)高端、大氣、上檔次的名字，因?yàn)槲夜┞毜墓久?OneAPM ( 省去軟廣1000字，總之做性能監(jiān)控很牛)，所以就取名 OneHeap 啦。 它是 Toolkit 里的第二個(gè)。

如何生成 Heap Snapshot 文件

使用 Chrome 打開 測(cè)試頁面 按 F12 打開 Devtools，切換到 Profiles 頁，選擇 Take Heap Snapshot。稍等片刻，在生成的 Snapshot 上點(diǎn)擊右鍵可以導(dǎo)出，文件后綴一般是 .heapsnapshot。

Node.JS

如果你是 Node.JS 工程師，可以安裝 heapdump 這個(gè)很有名的模塊。

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

上面兩種方法都可以生成 .heapsnapshot 文件，這個(gè)是用來測(cè)試的 nodejs.heapsnapshot

理解 .heapsnapshot 文件格式

打開測(cè)試用的 nodejs.heapsnapshot 文件，這是一個(gè)很大的 JSON 對(duì)象：

snapshot 屬性保存了關(guān)于快照的一些基本信息，如 uid，快照名，節(jié)點(diǎn)個(gè)數(shù)等

nodes 保存了是所有節(jié)點(diǎn)的 id，name，大小信息等,對(duì)應(yīng) v8 源碼里的 HeapGraphNode

edges 屬性保存了節(jié)點(diǎn)間的映射關(guān)系，對(duì)應(yīng) v8 源碼的 HeapGraphEdge

strings 保存了所有的字符串， nodes 和 edges 中不會(huì)直接存字符串，而是存了字符串在 strings 中的索引

堆快照其實(shí)是一個(gè)有向圖的數(shù)據(jù)結(jié)構(gòu)，但是 .heapsnapshot 文件在存儲(chǔ)的過程中使用了數(shù)組來存儲(chǔ)圖的結(jié)構(gòu)，這一設(shè)計(jì)十分巧妙而且減少了所需磁盤空間的大小。

nodes 屬性

nodes 是一個(gè)很長(zhǎng)一維的數(shù)組，但是為了閱讀方便，v8 在序列化的時(shí)候會(huì)自動(dòng)加上換行。按照 v8 版本的不同，可能是5個(gè)一行，也可能是6個(gè)一行，如果是 6 個(gè)一行，則多出來的一個(gè) trace_node_id 屬性。