隱藏或顯示圖像時Chrome內存泄露

來自長時間潛伏者但本網站頻繁用戶的問候。這裏有很多信息。我正在研究我的第一個真正的Web項目，並隨時學習。隱藏或顯示圖像時Chrome內存泄露

這是一個醫療應用程序，有時需要顯示警報圖標（包含圖像的div），以引起對可能有麻煩的患者的注意。我一直在使用下面的JS/jQuery代碼通過使用css類來顯示適當的圖標。我的CSS技能並不好，所以很可能這樣做可以更有效率，但這不是我的問題的重點。

當我以500毫秒的時間間隔（每次更新後使用setTimeout）爲128位不同的患者運行以下代碼時，Chrome渲染進程以約50MB /小時的速度（每個任務管理器或SysInternals進程管理器）進行內存消耗。但是，Chrome開發工具不會顯示任何內存使用量或DOM節點數的增加。堆快照不會隨着時間顯示任何重大變化。但是如果我評論這部分，「泄漏」就會消失。

我錯過了什麼？

// Show appropriate alarm icon, or hide all 
iconClass = null; 
if (this.Status && displayMode === 'RealTime') { 
    if (this.Status.Alarm === 'Active') { 
     flashState = ((this.drawTickCount % 4) < 2); 
     iconClass = (flashState) ? 'alarmOn' : 'alarmOff'; 
    } 
    else if (this.Status.Alarm === 'Paused') { 
     iconClass = 'alarmPaused'; 
    } 
} 
// Hide all icons 
this.div.find('div.alarmIcon').css('visibility', 'hidden'); 
// Show the active icon, if any 
if (iconClass) { 
    this.div.find('div.' + iconClass).css('visibility', 'visible'); 
}

謝謝！

來源

2013-12-11 scottbooth987

這是你的腳本所做的唯一事情嗎？ – qwertynl

得到了一個jsfiddle.net示例，顯示了這種情況？ –

我不知道它是否會導致內存泄漏，但是您同時創建了'iconClass'和'flashState'全局變量，這是不好的做法。當你聲明它們時，在它們前面粘上一個'var'，'var iconClass = null;'和'var flashState =（（this.drawTickCount％4）<2）;' – RustyToms

我打算把這留作評論，但評論框太長了。

很久以來，Chrome一直受到image-related memory leaks的困擾，但我不確定這是您在這裏看到的問題。

這些都只是在黑暗中拍攝，但這裏有一些東西，你可以嘗試：

動畫而不是一個計時器閃爍的報警圖標，使用動畫GIF。如果gif不好（需要超過256種顏色或alpha通道），請嘗試使用CSS過渡/動畫進行閃爍。
添加一些邏輯來檢查在修改DOM之前是否有任何實際更改。這至少有助於提高性能，因爲您不必不斷地重新焊接文檔（假設您在不更改文檔的情況下對閃爍警報進行動畫處理）。
如果仍在泄漏，請嘗試在這部分代碼中刪除jQuery的東西。它可能會或可能不會造成泄漏，但如果將其移除並且泄漏仍在那裏，至少您會確定它不會造成泄漏。

我前幾年來的結論是，Chrome的不適合，因爲內存泄漏的長期運行的牆板類型的應用程序，但此後的情況可能有所改善。如果沒有別的，你可以嘗試讓應用程序殺死標籤並每隔一小時左右開始一個新標籤。祝你好運。

來源

2013-12-11 21:13:18

dag nabbit - 謝謝，好的提示。我正在計劃一些類似於你的建議的工作，只是想確保我沒有失去明顯的東西。爲了以防萬一，我一直在應用程序的熱門部分放棄jQuery。 – scottbooth987

隱藏或顯示圖像時Chrome內存泄露

回答

相關問題