Everybody loves to go fast. Our Mobile Asset Collection team has set the bar high with the innovative Mobile Asset Collection (MAC) vehicle fleet. So here in the development shop, we match their ingenuity with blazing fast web apps with HTML5 and JavaScript.

Our VUEpoint web app sorts through terabytes of images to simulate a driving experience for users at their desktop. Our clients love to view these images as rapidly as possible, and in doing so there are huge performance bottlenecks that we have hit and overcome. This topic deserves multiple blog posts to elaborate on, but we’ll keep it simple today.

Switching from Images to HTML5 Canvas

Our first iteration of this web app was built with JavaScript Image objects and HTML Image tags. For every single image requested, an Image object was created to load the image data and then insert into the Document Object Model (DOM). This worked, but over long periods of time we noticed memory leaks occurring. Chrome specifically would chew through memory preloading images due to this known bug: http://stackoverflow.com/questions/11032018/dispose-an-image-object/11032338#11032338.

We then shifted our focus to HTML5 Canvas and got more performance gains than athletes doping with human growth hormone. Now, for each image requested, we continually reuse one canvas context reference. We can insert images into the canvas as fast as we receive them from the server without seeing any major spikes in RAM usage. We did not stop there.

Request Animation Frame API

We made another cool change to utilize the JavaScript requestAnimationFrame API. This optimizes the animation paint cycle to hit an ideal 60 frames per second refresh rate. It also results in more appropriate utilization of the CPU by the browser.
Previously we solely relied on using the JavaScript setInterval function to control painting the image to the screen, but it seemed to cause a bit of a stuttering effect between images. Now with incorporating these changes, the images have a silky smooth transition and use even less RAM.

There is always still more to do, but we have made great performance gains as our VUEpoint web app continues to grow. Our driving experience went from a casual Sunday cruise with your grandparents to your hair whipping through the wind in a Ferrari with the top down.

A quick shout out goes to Paul Irish of Google for all his great contributions and resources we have used in testing and increasing web application performance. Check out his requestAnimationFrame API tutorial here: http://www.paulirish.com/2011/requestanimationframe-for-smart-animating.