Browsers are improving faster than ever. Since our last HTML5 gaming performance measurements there have been 3 new releases of Firefox and 2 new releases of Chrome. There have been no official updates of Internet Explorer, but Microsoft have released the Windows 8 Consumer Preview which includes a beta of Internet Explorer 10. In just a mere three or four months, could browsers have improved much? It turns out yes, by quite a lot! Things are moving incredibly quickly in modern web browsers.
Since Construct 2's HTML5 engine has been tweaked a fair bit since November, I recompiled our previous performance tests with the latest release (r82) and re-ran them on the same machine as last time (see the link above for details). Since IE10 is a beta release due some time later this year, I've compared it to the next generation of other browsers: Chrome 18 beta (due as a full release shortly) and the Firefox 12 beta (due as a full release in a few weeks). Note that Firefox 12 introduces a significant optimisation that benefits Construct 2's engine greatly, so note if you run the tests yourself on Firefox 11 or earlier you may get worse results. I've also added IE9 to the graphs since its slower release cycle means it will be the one competing with the next versions of Chrome and Firefox until IE10 is released and gains market share. This typically happens very slowly with Internet Explorer releases - according to Net Applications, IE9 even now only has a 12.6% market share, less than half of the three-years-old IE8, so presumably it will take years before IE10 is the most-used version of IE.
Try out the canvas 2D performance test or WebGL-enabled performance test yourself. They measure the maximum number of objects that can render at 30fps. Results on the test machine are below. (Note these were all run on Windows 7, except IE10 which currently only runs on Windows 8 Consumer Preview. The same computer was used for both, though.)
Chrome 18's 2D canvas is already faster than IE9's. Firefox 12 has a faster 2D canvas than both IE9 and IE10 - already! This means even independent HTML5 game developers not using a WebGL-enabled engine like Construct 2 should see Chrome and Firefox performing better than IE9. And of course using WebGL, both Firefox and Chrome demolish both IE9 and IE10. WebGL is really fast!
In the space of just a few months, Firefox has improved by 146% for Canvas 2D and 72% for WebGL. Chrome has improved by 44% for Canvas 2D and for some reason measured a little slower on the WebGL test, but it still holds the #1 spot as fastest overall. Internet explorer improved by 37% for Canvas 2D. An improvement, but even without WebGL other browsers have caught up or overtaken. Still, the general pace of improvement in the browser market is impressive.
You might be wondering: why would you want to show thousands of blue rectangles on a screen anyway? Isn't this unrealistic? What is this useful for?
Answer: particle effects.
Click here to see Construct 2's particle effects demo. This is an eye-catching effect, and precisely the kind of thing that needs raw rendering power to make it work smoothly. With WebGL rendering it can run smoothly at 60fps, but both IE9 and IE10 struggle with the effect chugging along below 20fps. See the framerate results below:
Given the previous performance results, I'm not sure why Internet Explorer falls even further behind, but it's still an example of a more real-world test rather than blue boxes filling your screen.
Internet Explorer 9 was the first browser to introduce a hardware-accelerated 2D canvas, and they deserve credit for that. Since then, the marketing around IE9 has highlighted its performance benefits. However, according to our tests this is about to change, and it looks to us like Internet Explorer can no longer be said to be the fastest browser even if you ignore WebGL and only measure the 2D canvas. On top of that, WebGL is still much faster and has big real-world performance benefits. Microsoft have also described IE9 as "unlocking Native HTML5 Experiences on the Web", noting "there is a real cost in terms of performance when browsers rely on abstraction layers when it comes to hardware and OS." This is more true than they seem to realise: WebGL allows direct programming of the graphics card (as "native" apps would), bypassing even the canvas 2D in the browser (which is an abstraction layer), resulting in the faster performance and better experience. So Firefox and Chrome are faster for the reasons even Microsoft point out! And it looks like it is going to stay this way for a long time. So it looks like Microsoft marketing needs to change their tune: fast and native has gone to other browsers.