StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p><strong>Update</strong></p> <p><code>setInterval</code> doesn't have the issue. Only happens with <code>requestAnimationFrame</code>. This finally makes so much sense. <code>requestAnimationFrame</code> 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.</p> <p>This explains a lot. I'm really enjoying the cpu savings this provides us.</p> <p><strong>Updated</strong></p> <p>An example without any of my code... <a href="http://www.goodboydigital.com/pixijs/canvas/bunnymark/" rel="nofollow noreferrer">http://www.goodboydigital.com/pixijs/canvas/bunnymark/</a> 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.</p> <hr> <p>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 <code>if(fps>=30)</code> to return false:</p> <pre><code> stage.onEnterFrame=function(fps){ // fps = the current system fps if(fps>=30){ // add astroids until we are less than 30fps stage.addChild(new Asteroid()); } } </code></pre> <p>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. </p> <p><img src="https://i.stack.imgur.com/bNEhX.png" alt="fps meter"></p> <p>(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)</p> <p>This is the code used for stage timing...</p> <pre><code>_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); }; </code></pre> <p>Hopefully this helps someone else down the road.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload