快速替换图像 src 时 Firefox 中的内存使用情况

Memory usage in Firefox when rapidly replacing image src

本文关键字：内存 用情 情况 Firefox 替换 图像 src      更新时间：2023-09-26

我正在尝试通过每 100 毫秒替换一次图像的 src 来使用 Javascript 实现动画 PNG。它显示得很好，但我发现当让它在 Firefox 上运行时，它会逐渐消耗越来越多的内存。

这是我用来播放动画的循环，尽管我认为它没有什么了不起的——

self.next = function() {
    if(self.doPlay == true) {
        self.currentFrame++;
        if(self.currentFrame >= self.numFrames) {
            self.currentFrame = 0;
            self.doPlay = self.doLoop;
        }
    }
    if(self.doPlay == true) {
        image.src = self.frames[self.currentFrame].src;
        setTimeout( self.next, self.frameDelays[self.currentFrame]);
    }
}

（其中帧是预加载图像对象的数组）

如果我注释掉 src 中的更改，内存使用很好。否则，内存使用量将无限期攀升，直到浏览器最终崩溃。

我尝试从 DOM 中删除和替换图像，而不是更改 src（在原版和 jQuery 中），但它似乎没有帮助。

有人知道更好的方法吗？

感谢您抽出宝贵时间:)

你有没有想过只使用图像并更改背景中的滚动？它真的很快，值得推荐

看这个

http://willian.nerdti.com.br/botaoImagem.html

这不是对这个问题的回答，而是另一个评论（我不能离开，因为我的 StackOverflow 声誉目前不是 50）。 无论如何，我注意到上面的人（在评论部分）说这是一个可笑的坏主意。 对于这种特定情况，他可能是对的，但是这种内存泄漏以一种完全出乎意料的方式在我们的应用程序中抬头（并导致我们完全放弃 FireFox）。

基本上，我们的应用程序有一个左侧导航栏，其中包含我们组织中各种人员的小头像。 这个左侧导航栏可以过滤、排序、更新等。 这个栏（有时）可以包含几百张图像，每次洗牌时，FireFox 会丢失 500K 到 1MB 的剪辑，而 IE9/10、Chrome 和 Safari 不会丢失任何东西。

因此，在修复此错误之前，FireFox（对于我们的内部应用程序）不再是一个可行的选择。

相关文章：