使用d3轉換導致內存泄漏

我在d3.js的幫助下做了一個可視化。可視化使用了很多轉換（例如顯示/隱藏/移動元素）。我注意到CPU負載過高，隨着時間的推移內存大量增加，使得可視化在一段時間後非常緩慢。使用d3轉換導致內存泄漏

因此，我刪除了轉場，或用自制轉場函數以較慢的幀速率替換它們。不幸的是，刪除所有轉換不是一種選擇，因爲這會使可視化變得不那麼可視。剩餘的轉換是通過增加/減少圓半徑出現和消失的圓。

仍然似乎有一個內存泄漏，主要是鉻（基於Windows任務管理器在10分鐘內20,000K）可見。

所以我想知道是否可能是過渡本身導致內存泄漏。爲了測試這個，我做了一個jsfiddle（http://jsfiddle.net/qdwyoy7r/7/）來查看單獨一個類似的轉換是否會顯示相同的結果。它確實如此：當在Chrome中運行時，內存每10分鐘增加大約9,500 K（基於Windows任務管理器）。

g_svg = d3.select("#visualization") 
    .append("svg") 
    .attr("width", 300) 
    .attr("height", 300); 

circle = g_svg.append("circle") 
      .attr("cx", 150) 
      .attr("cy", 150) 
      .attr("r", 0) 
      .style("opacity", 0.3) 
      .style("fill", "orange"); 

resize(); 

function resize(){ 
    circle.transition() 
     .duration(500) 
     .attr("r", 100) 
     .transition() 
     .delay(750) 
     .duration(500) 
     .attr("r", 0) 
    var t = setTimeout(function(){resize()}, 1500); 
}

是否有可能在D3轉換自己在某種程度上增加了內存使用情況？還是我用錯誤的方式使用d3轉換？

我一直在尋找的Chrome瀏覽器開發的工具，但它是不是真的幫助我：

時間軸顯示內存使用的鋸齒形（但價值隨着時間的推移下降到上升）
堆時間線顯示主要是（陣列）和（編譯代碼）在對象中增加並保持最大尺寸。展開它們時，它們也包含很多項目，但探查器中顯示的項目對我來說沒有意義。
另外，堆時間線上的尖峯（可能是由轉換引起的）隨着時間的推移正在變得越來越高。比較快照我看到之間分配的對象時
堆快照大小不增加多少，但同樣（陣列）和（編譯後的代碼） ...

來源

2014-11-04 anne

手動觸發垃圾回收時似乎很好。在任何情況下，內存泄漏似乎都是由您的賦值'var t = setTimeout（...）;'引起的，每次函數運行時都會爲其創建一個新變量。 – 2014-11-04 13:51:38

@LarsKotthoff，當我刪除'var t'並且僅設置超時時，我會繼續增加內存（http://jsfiddle.net/qdwyoy7r/8/：基於Windows任務管理器每10分鐘大約10,000K）。這個jsfiddle是爲了看內存是否隨着時間的推移而增加。由於我的原始可視化包含許多隨時間推移而出現和消失的圓圈，並顯示出類似的記憶增加。如果這不是測試此方法的正確方法，那麼您是否有其他建議？ – anne 2014-11-04 14:24:32

我只是說我無法在Ubuntu上使用Chrome 37重現此操作。我已經讓它運行了幾分鐘，並且在垃圾收集之後沒有增加內存。 – 2014-11-04 14:35:15

這似乎不相關的D3 .js，但在窗戶上鍍鉻（38）。已經運行了一小時以上的小提琴，並且在Windows任務管理器中測量的內存使用量從56M變爲133M。在另一個瀏覽器上（例如IE 10），同一個小提琴不會上升，但平衡大約37M。

來源

2014-11-05 15:55:48 anne

使用d3轉換導致內存泄漏

回答

相關問題