HTML5 canvas vs Dom appending real-time data building efficiency

Question

I have real-time data: 3 integers that change over time. These integers are taken from the testimony of the accelerometer: x, yand z. I was thinking of a way to build this data, so it will be easier to change these changes.

There are many chart libraries such as flot . What I want to do is integers as the height of the bar. You can use two methods to display a histogram:

• Use the div for bars to be added to the parent div.

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

My question is: which of these two methods will work better in terms of performance if the data refresh rate is 50 ms (i.e. the data will change every 50 milliseconds).

Answer 1

To a certain extent, this depends on the fact that it will depend on several factors:

• The number of items that you have that you need to update (you say 10, 100, 1000 or more).
• The frequency you want to update will be a big factor, you are limited depending on the speed with which the browser can execute JavaScript.
• Browser - Some browsers can display content at significantly different speeds.

- D3. , SVG (DOM based) Canvas. :

• Canvas Swarm
• SVG Swarm

, Canvas SVG, . DOM , CSS .. - SVG .

D3 google, . ( ):

• Chrome 74x SVG Canvas.
• Firefox 150- SVG .
• Opera SVG, 71 Canvas SVG.

Answer 2

, .

canvas gpu aceleration, , DOM.

Answer 3

fiddle, , DOM/div. .

( Windows 7 Task Manager .)

:

function update() {
    GetData();
    $.plot($("#placeholder"), dataset, options)
    timerFlot = setTimeout(update, updateInterval);
}

function updateDom() {
    GetData();
    $('#domtest').html('');
    for (var i = 0; i < data.length && i < 100; i++) {
        $('#domtest').append('<div class="bar" style="height: ' + (3 * data[i][3]).toString() + 'px; top: ' + (300 - 3 * data[i][4]).toString() + 'px;"></div>');
    }
    timerDom = setTimeout(updateDom, updateInterval);
}

Answer 4

d3 . svg, , dom-. c3

Answer 5

D3. , jQuery D3 native json . , , LDAP 1000 . .

. , SVG. , , .

bl.ocks.org/mbostock/1276463 - bl.ocks.org/mbostock/1062544 - bl.ocks.org/mbostock/9539958

D3 . . bost.ocks.org/mike/path/

, .

Answer 6

Canvas.

Dom DOM, . 3 , .

: x x + 3. +1 repaints, . +1 . , , .

Arriving at the canvas: it is like a drawing board, no matter how many cycles you increase or decrease, the canvas will not cause iterative calls for drawing.

Hope this provides some information.