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

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 channel )，请尝试使用 CSS 过渡/动画来闪烁它。

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

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

几年前我得出的结论是，由于内存泄漏，Chrome 不适合长时间运行的墙板类型应用程序，但从那时起情况可能有所改善。如果没有别的办法，您可以尝试让应用程序终止该选项卡并每隔一小时左右启动一个新选项卡。祝你好运。