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

Question

来自长期潜伏但经常使用本网站的用户的问候。很棒的信息在这里。我正在开发我的第一个真正的 Web 项目，并且边走边学。

这是一个医疗应用程序，有时必须显示警报图标（包含图像的 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');
}

谢谢！

Answer 1

我打算将此作为评论留下，但评论框太长了。

Chrome 被image-related memory leaks 困扰了很长时间，但我不确定您在这里看到的问题是什么。

这些都只是在黑暗中拍摄，但您可以尝试以下一些方法：

• 不要为计时器上闪烁的警报图标设置动画，而是使用动画 gif。如果 gif 不好（您需要超过 256 种颜色或 alpha 通道），请尝试使用 CSS 过渡/动画来闪烁它。

• 添加一些逻辑以在修改 DOM 之前检查是否有任何实际更改。这至少有助于提高性能，因为您不必不断地重排文档（假设您在没有不断修改文档的情况下动画闪烁警报）。

• 如果仍然泄漏，请尝试删除这部分代码中的 jQuery 内容。它可能会或可能不会导致泄漏，但如果您将其移除并且泄漏仍然存在，至少您会确定不是它导致了它。

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