Databases
StackOverflow2013
Postsdbo
POCanvas performance change in Chrome
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCanvas performance change in Chrome
    text
    copied!<p>I'm working on an animation library, and every once in a while I run a benchmark test to see how much of a gain or loss I get with certain features. Recently I've run into something that has me quite perplexed, perhaps someone with more knowledge can shine a light on this for me.</p> <p><strong>Performance Before:</strong></p> <ul> <li>Chrome: ~4460 sprites @ 30fps</li> <li>Safari: ~2817 sprites @ 30fps</li> <li>FireFox: ~1273 sprites @ 30fps</li> <li>iPhone 4S: ~450 @ 30fps</li> </ul> <p><strong>Peformance Now:</strong></p> <ul> <li>Chrome: ~3000 sprites @ 30fps</li> <li>Safari: ~2950 sprites @ 30fps</li> <li>FireFox: ~1900 sprites @ 30fps (before Garbage Collection becomes too distracting)</li> <li>iPhone 4S: ~635 @ 30fps</li> </ul> <p>So you can see, Chrome took quite a hit in performance, while every other browser seems to have gotten a little better over this time frame. The biggest thing I notice, and what I'm figuring is the answer, is that the CPU usage seems to have been throttled back in Chrome (I swear before I could get up near 90%, now its maxing around 60%). The majority of the CPU is being used for the <code>drawImage()</code> call, and I'm not sure I can do anything to optimize that. </p> <p>If its simply an issue where Chrome is now limiting my CPU usage, I'm fine with that.</p> <p>Any insight would be greatly appreciated...</p> <pre><code>_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 &lt; 0 ? -1 : 0) | 0; y = this._y + (this._y &lt; 0 ? -1 : 0) | 0; height = height + (height &lt; 0 ? -1 : 0) | 0; height = height + (height &lt; 0 ? -1 : 0) | 0; } var frame = this.sequence[this.frame] || 0; var sheetY = frame + (frame &lt; 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(); }; </code></pre> <hr> <p><strong>UPDATE</strong></p> <p>So I downloaded an old version of Chrome (25.0.1364.5), and ran my benchmark test: <img src="https://i.stack.imgur.com/7EwSb.png" alt="Before"></p> <p>Then I reran in the most current version of Chrome: <img src="https://i.stack.imgur.com/f3U6O.png" alt="After"></p> <p>Clearly Chrome has changed. Was it on purpose? I don't know. You can see that in the old version of Chrome I've actually gained more performance over my original 4460 (+ ~400, my optimizations must have worked), but you can also see it lets me hover at 100% cpu usage. 2x cpu almost 2x object on the screen.</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