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
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
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.