Chrome 中的画布性能变化

Question

我正在开发一个动画库，并且每隔一段时间我都会运行一次基准测试，看看我在使用某些功能时获得了多少收益或损失。最近遇到一件让我很困惑的事情，也许有更多知识的人可以为我解释一下。

之前的表现：

• Chrome：~4460 个精灵 @ 30fps
• Safari：~2817 个精灵 @ 30fps
• FireFox：~1273 个精灵 @ 30fps
• iPhone 4S：~450 @ 30fps

现在的表现：

• Chrome：~3000 个精灵 @ 30fps
• Safari：~2950 个精灵 @ 30fps
• FireFox：约 1900 个精灵 @ 30fps（在垃圾收集变得过于分散注意力之前）
• iPhone 4S：~635 @ 30fps

因此，您可以看到，Chrome 的性能受到了相当大的打击，而其他所有浏览器似乎在这段时间内都变得更好了。我注意到的最重要的事情，我想的是答案，是 Chrome 中的 CPU 使用率似乎已经被限制了（我发誓在我能接近 90% 之前，现在它的最大值约为 60%）。大部分 CPU 都用于drawImage() 调用，我不确定我能做些什么来优化它。

如果这只是 Chrome 现在限制我的 CPU 使用率的问题，我可以接受。

任何见解将不胜感激......

_s.Sprite.prototype.drawBasic = function() {
    var s = this.ctx;
    if(s.globalAlpha!=this._alpha) s.globalAlpha = this._alpha;

    var width = this.width;
    var height = this.height;
    var x = this._x;
    var y = this._y;

    if (_s.snapToPixel) {
        x = this._x + (this._x < 0 ? -1 : 0) | 0;
        y = this._y + (this._y < 0 ? -1 : 0) | 0;
        height = height + (height < 0 ? -1 : 0) | 0;
        height = height + (height < 0 ? -1 : 0) | 0;
    }


    var frame = this.sequence[this.frame] || 0;
    var sheetY = frame + (frame < 0 ? -1 : 0) | 0;
    var sheetX = (frame - sheetY) * this.spriteSheetX || 0;

    s.drawImage(this.bitmap.image, this.bitmap.frameRect.x2 * sheetX, this.bitmap.frameRect.y2 * sheetY, this.bitmap.frameRect.x2, this.bitmap.frameRect.y2, x - (width * this._scaleX) * this.anchorX, y - (height * this._scaleX) * this.anchorY, width * this._scaleX, height * this._scaleY);
    this.updateFrame();

};

---

更新

所以我下载了旧版本的 Chrome (25.0.1364.5)，并运行了我的基准测试：

然后我在最新版本的 Chrome 中重新运行：

显然 Chrome 已经改变了。是故意的吗？我不知道。您可以看到，在旧版本的 Chrome 中，我实际上比原来的 4460 获得了更多的性能（+ ~400，我的优化肯定奏效了），但您也可以看到它让我悬停在 100% 的 cpu 使用率。 2x cpu 几乎是屏幕上的 2x 对象。

Answer 1

更新

setInterval 没有问题。只发生在requestAnimationFrame 上。这终于很有意义了。 requestAnimationFrame 已经将速度限制为 60fps，我不知道，并且似乎找不到任何关于 Chrome（其他？）将其限制为 30 (60/2) 和 20 (60/3) 的信息) 并且可能是 15(60/4)... 这使它与 60hz 保持同步，因此您永远不会以 40fps 结束，这看起来很奇怪，因为它与您的屏幕刷新率不同步。

这解释了很多。我真的很享受这为我们提供的 CPU 节省。

更新

没有我的任何代码的示例...http://www.goodboydigital.com/pixijs/canvas/bunnymark/ 如果您在 Chrome 中运行它...当它从 ~60fps 直接跳到 30fps 时，您会看到这一点。您可以继续添加更多兔子，pixy 可以处理它...... Chrome 正在限制 fps。这不是 Chrome 过去的行为方式。

---

所以我弄清楚这里发生了什么。并不是说性能发生了变化，我仍然可以以 30fps 的速度在屏幕上显示 4800 个对象。改变的似乎是 Chrome 尝试优化最终用户体验的方式。它实际上将速度从 60fps 降低到 ~30fps（根据开发工具为 29.9fps），这导致 if(fps>=30) 返回 false：

    stage.onEnterFrame=function(fps){  // fps = the current system fps
        if(fps>=30){  // add astroids until we are less than 30fps
            stage.addChild(new Asteroid());
        }
    }

由于某种原因，大约 2800 个对象，Chrome 将速度降低到 30fps，而不是尝试尽可能快地运行……因此，如果我以 4800 个对象开始基准测试，它会保持在非常一致的 29.9fps。

（您可以在这里看到它的 60fps 或 29.9fps 两者之间没有真正的区别，唯一改变的是它切换的频率）

这是用于舞台计时的代码...

_s.Stage.prototype.updateFPS = function() {
    var then = this.ctx.then;
    var now = this.ctx.now = Date.now();
    var delta = now - then;
    this.ctx.then = now;
    this.ctx.frameRatio = 60 / (1000 / delta);
};

希望这可以帮助其他人。