Optimizing HTML5 games


I didn't bother optimizing Buzz Grid initially, as even on my elderly machine it appeared to work just fine. But after playing the game some more, I noticed that on a high load it tended to stutter and respond slowly to keys, especially on level 4 (not sure why, since level 3 has an equally complex map, and level 5 has considerably more traps and prizes). So I figured digging into the code a bit couldn't hurt. Luckily, Arora -- my favorite WebKit browser -- comes with an equivalent of Firebug built-in, including a profiler. Here's what it told me:

Overall, the profile report didn't change much after all this; it does look like I won as much as 7-10% overall, which unfortunately is not enough to fix the original issue completely. I'll have to settle for a noticeable difference instead. Rendering still uses up most of the time, followed by WorldModel.handleCollisions(); the single most called function is Mob.within(). Speaking of collision handling, I finally found (and fixed) a long standing bug which sometimes made roamers vanish into thin air, not that anyone missed them. That also improved performance by a few percent, incidentally.

All in all, optimizing Buzz Grid was worth it. I didn't accomplish my main goal but the experience gained will come in handy one day.