Canvas performance change in Chrome Canvas performance change in Chrome google-chrome google-chrome

Canvas performance change in Chrome


Update

setInterval doesn't have the issue. Only happens with requestAnimationFrame. This finally makes so much sense. requestAnimationFrame already throttles things to 60fps, what I wasn't aware of, and can't seem to find any info on is that Chrome (others?) throttle it to 30 (60/2) and then 20 (60/3) and probably 15(60/4)... this keeps it in sync with 60hz, so you never end up with 40fps that looks strange because its out of sync with your screen refresh rate.

This explains a lot. I'm really enjoying the cpu savings this provides us.

Updated

An example without any of my code... http://www.goodboydigital.com/pixijs/canvas/bunnymark/ if you run this in Chrome... you will see the point when it jumps from ~60fps straight to 30fps. You can keep adding more bunnies, pixy can handle it... Chrome is throttling the fps. This is not how Chrome use to behave.


So I figured out whats going on here. It's not that performance has changed per say, I can still get 4800 objects on the screen at 30fps. What has changed seems to be the way Chrome tries to optimize the end users experience. It actually throttles things down from 60fps to ~30fps (29.9fps according to dev tools), which causes if(fps>=30) to return 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());        }    }

For some reason around 2800 objects, Chrome throttles down to 30fps instead of trying to go as fast as possible... So if I start the benchmark with 4800 objects, it stays at a wonderfully consistent 29.9fps.

fps meter

(you can see here that its either 60fps or 29.9fps no real in-between, the only thing that changes is how often it switches)

This is the code used for stage timing...

_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);};

Hopefully this helps someone else down the road.