Question

Canvas clearing gets vastly different perfomance on different browsers. See http://jsperf.com/canvas-clearing2 .

I need to clear a canvas every frame and how I do it has a huge impact on mobile safari vs Desktop safari performance. Desktop Safari likes canvas.width = width but mobile safari prefers canvas.drawRect() .

Is there a way to detect what browser is what an run different JavaScript based on it? I would prefer to do this through JavaScript rather than server side.

Also, I’ve found that jQuery’s $.browser doesn’t help because it doesn’t distinguish between mobile safari and desktop safari. the navigator object has similar problems.

Answer 1

Targeting specific browsers is always a bit of a problem. While there are certainly ways to do it, it’s not a particularly maintainable way to do it because there are lots of different browsers and versions of each browser and those browsers change over time, thus which browsers are optimized by which code can be changing all the time. This creates quite a maintenance headache. For example, mobile Safari on an iPod Touch has very different performance characteristics than mobile Safari on each different generation of iPhone or iPad.

So … instead of trying to detect the type of browser, it’s much better to either do feature detection or performance detection and dynamically adjust based on how any given browser reacts. Done right, this can work equally well for all browsers, even browsers you’ve never seen or that aren’t even released yet.

In your case, you could devise a quick performance test that tests the performance of each of your two methods. If there’s really a big performance difference between the two methods, then you could probably tell the difference in a matter of a few hundred milliseconds, set a cookie on the local browser indicating the method that works best and then just use the preferred method in that browser from then on. If you wanted to, you could let the cookie expire every few months (so it would get retested every once in a while) or you could put the exact browser version into the cookie too and reruns the tests and set a new cookie if the browser version every changed (software upgrades).

In this way, your code would always be using the fastest version of your code in all browsers, now and forever without you ever having to maintain/test zillions of browsers to know which should be used for each.