Real time data plotting performance HTML5 canvas vs Dom appending

Question

I have some realtime data: 3 integers that are changing over time. These integers are from my accelerometer readings: x, y, and z. I was thinking of a way to plot these data so it will be easier to trend the changes.

There are many chart libraries are out there such as flot. What I want to do is represent the integers as bar heights. There are two methods I can use to display the bar graph:

1. Use divs for the bars which will be appended to a parent div.

2. Use an HTML5 canvas to draw the bars that will represent the integers.

My question is: which of these two methods will work better from the performance perspective, assuming the data update frequency is 50 msec (i.e., data will change every 50 milliseconds).

Answer 1

To a certain extent this depends, it's going to depend on a few factors:

• The number of items you've got that you need to update (are you talking 10s, 100s, 1000s or more)
• The frequency that you want to update is going to be a big factor, you're limited based upon the speed that the browser can execute the JavaScript.
• The browser - some browsers can render content at significantly different speeds.

A good example to compare is looking at some of the D3 performance comparisons. Because the core library is doing the same work underneath, this is comparing the render speed between SVG (DOM based) and Canvas rendering. Take a look at these two swarm examples first:

• Canvas Swarm
• SVG Swarm

If you start scaling up the frequency and the number of items Canvas is going to outperform SVG, because it's a much lighter workload for the browser. It doesn't have to manipulate the DOM in the same way, check CSS rules to apply etc. However SVG is more powerful because of these.

There's a really good breakdown of performance in this post on the D3 google group which compares browser render times. To pull out some numbers as an example (although these figures are a little old):

• Chrome was 74x slower rendering SVG over Canvas.
• Firefox was 150x slowe rendering SVG over Canvas.
• Opera was lightening fast at SVG but 71x slower at render Canvas over SVG.