Question

长期潜伏的问候，但本网站的常客。这里有好消息。我正在研究我的第一个真正的网络项目，并在我学习的同时学习。

这是一个医疗应用程序，有时必须显示警报图标（包含图像的div）以引起对可能有麻烦的患者的注意。我一直在使用以下JS / jQuery代码通过使用css类来显示相应的图标。我的CSS技能不是很好，所以这可能会更有效率地完成，但这不是我的问题。

当我以500毫秒的间隔为128位不同的患者运行以下代码时（每次更新后使用setTimeout），Chrome渲染过程以每小时50MB的速度（每个任务管理器或SysInternals Process Explorer）消耗内存。但是，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');
}

谢谢！

Answer 1

我打算将此作为评论，但评论框的时间太长了。

Chrome很长一段时间都被image-related memory leaks所困扰，但我不确定你在这里遇到的问题。

这些都是在黑暗中拍摄的，但这里有一些你可以尝试的事情：

不使用计时器上的闪烁警报图标设置动画，而是使用动画gif。如果gif不好（你需要超过256种颜色或alpha通道），请尝试使用CSS转换/动画进行闪烁。
在修改DOM之前，添加一些逻辑以检查是否有任何实际更改。这至少有助于提高性能，因为您不必经常重排文档（假设您在没有不断修改文档的情况下为闪烁警报设置动画）。
如果它仍在泄漏，请尝试在代码的这一部分中删除jQuery的东西。它可能会也可能不会造成泄漏，但是如果你将它移除并且泄漏仍在那里，至少你会确定它没有造成它。

几年前我得出的结论是，由于内存泄漏，Chrome不适合长时间运行的墙板类应用，但从那时起情况可能会有所改善。如果没有别的，您可以尝试让应用程序杀死标签并每小时左右开始一个新标签。祝你好运。

隐藏或显示图像时Chrome内存泄漏

1 个答案: