Speed test

From JSXGraph Wiki
Revision as of 06:24, 15 June 2021 by A WASSERMANN (talk | contribs)
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.

Benchmarking the speed of your browser. This application does 1000 updates of a JSXGraph construction. The main cpu work is spent on computing the Bezier curve and plot it and on updating the SVG image of the construction.

Update speed: - fps

The underlying JavaScript code

var board, i, p, col;
board = JXG.JSXGraph.initBoard('box', {boundingbox:[-4,4,4,-4], keepaspectratio:false, axis:true, minimizeReflow:'none'});
p = [];
for (i = 0; i < 2*3 + 1; i++) {
    if (i%3 == 0) {
        col = 'red';
    } else {
        col = 'blue';
    }
    if (i == 0) {
        p.push(board.create('point',[-3,3], {size:8, strokeColor:col, fillColor:col}));
    } else {
        p.push(board.create('point',[Math.random()*8-4,Math.random()*8-4],{size:8, strokeColor:col,fillColor:col}));
    }
}
var c = board.create('curve', JXG.Math.Numerics.bezier(p),{strokecolor:'blue', name:"curve", strokeWidth:5}); 

var count = 0,
    maxcount = 1000,
    sgn = 1,
    startTime = 0;

var unit = function() {
    var len = p.length,
        j = Math.floor(len*Math.random()),
        now;
    p[j].setPosition(JXG.COORDS_BY_USER, [sgn*3*Math.random(), -sgn*3*Math.random()]);
    board.update();
    sgn *= -1;
    count++;
    if (count%100==0) {
        now = new Date();
        document.getElementById('output').innerHTML = "Update speed: " + (Math.round(100*(1000*count/(now.getTime()-startTime.getTime())))/100.0) + ' fps';
    }
    if (count<maxcount)
        setTimeout(unit,0);
    }

var speedtest = function() {
    count = 0;
    startTime = new Date();
    var ti = setTimeout(unit,0);
};

document.getElementById("startbutton").addEventListener('click', speedtest);