我在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瀏覽器開發的工具,但它是不是真的幫助我:
- 時間軸顯示內存使用的鋸齒形(但價值隨着時間的推移下降到上升)
- 堆時間線顯示主要是(陣列)和(編譯代碼)在對象中增加並保持最大尺寸。展開它們時,它們也包含很多項目,但探查器中顯示的項目對我來說沒有意義。
- 另外,堆時間線上的尖峯(可能是由轉換引起的)隨着時間的推移正在變得越來越高。比較快照我看到之間分配的對象時
- 堆快照大小不增加多少,但同樣(陣列)和(編譯後的代碼) ...
手動觸發垃圾回收時似乎很好。在任何情況下,內存泄漏似乎都是由您的賦值'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