Speed test: Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
 
(9 intermediate revisions by the same user not shown)
Line 1: Line 1:
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.
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.
<html>
<html>
<form><input type="button" onClick="speedtest()" value="Start speed test">
<form><input type="button" id="startbutton" value="Start speed test">
</form>
</form>
<h2 id="output">Update speed: - fps</h2>
<h2 id="output">Update speed: - fps</h2>
Line 8: Line 8:
<jsxgraph width="400" height="400" box="box">
<jsxgraph width="400" height="400" box="box">
var board, i, p, col;
var board, i, p, col;
board = JXG.JSXGraph.initBoard('box', {boundingbox:[-4,4,4,-4], keepaspectratio:false, axis:true});
board = JXG.JSXGraph.initBoard('box', {boundingbox:[-4,4,4,-4], keepaspectratio:false, axis:true, minimizeReflow:'none'});
p = [];
p = [];
for (i=0;i<2*3+1;i++) {
for (i = 0; i < 2*3 + 1; i++) {
     if (i%3==0) {
     if (i%3 == 0) {
         col = 'red';
         col = 'red';
     } else {
     } else {
         col = 'blue';
         col = 'blue';
     }
     }
     if (i==0) {
     if (i == 0) {
         p.push(board.createElement('point',[-3,3], {size:8, strokeColor:col, fillColor:col}));
         p.push(board.create('point',[-3,3], {size:8, strokeColor:col, fillColor:col}));
     } else {
     } else {
         p.push(board.createElement('point',[Math.random()*8-4,Math.random()*8-4],{size:8, strokeColor:col,fillColor:col}));
         p.push(board.create('point',[Math.random()*8-4,Math.random()*8-4],{size:8, strokeColor:col,fillColor:col}));
     }
     }
}
}
var c = board.createElement('curve', JXG.Math.Numerics.bezier(p),{strokecolor:'blue', name:"curve", strokeWidth:5, lastArrow:true});  
var c = board.create('curve', JXG.Math.Numerics.bezier(p),{strokecolor:'blue', name:"curve", strokeWidth:5, lastArrow:true});  


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


unit = function() {
var unit = function() {
     var len = p.length,
     var len = p.length,
         j = Math.floor(len*Math.random()),
         j = Math.floor(len*Math.random()),
         now;
         now;
     p[j].setPosition(JXG.COORDS_BY_USER, sgn*3*Math.random(), -sgn*3*Math.random());
     p[j].setPosition(JXG.COORDS_BY_USER, [sgn*3*Math.random(), -sgn*3*Math.random()]);
     board.update();
     board.update();
     sgn *= -1;
     sgn *= -1;
Line 45: Line 45:
     }
     }


speedtest = function() {
var speedtest = function() {
     count = 0;
     count = 0;
     startTime = new Date();
     startTime = new Date();
     var ti = setTimeout(unit,0);
     var ti = setTimeout(unit,0);
};
};
document.getElementById("startbutton").addEventListener('click', speedtest);
</jsxgraph>
</jsxgraph>


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


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


unit = function() {
var unit = function() {
     var len = p.length,
     var len = p.length,
         j = Math.floor(len*Math.random()),
         j = Math.floor(len*Math.random()),
         now;
         now;
     p[j].setPosition(JXG.COORDS_BY_USER, sgn*3*Math.random(), -sgn*3*Math.random());
     p[j].setPosition(JXG.COORDS_BY_USER, [sgn*3*Math.random(), -sgn*3*Math.random()]);
     board.update();
     board.update();
     sgn *= -1;
     sgn *= -1;
Line 92: Line 94:
     }
     }


speedtest = function() {
var speedtest = function() {
     count = 0;
     count = 0;
     startTime = new Date();
     startTime = new Date();
     var ti = setTimeout(unit,0);
     var ti = setTimeout(unit,0);
};
};
document.getElementById("startbutton").addEventListener('click', speedtest);
</source>
</source>


[[Category:Examples]]
[[Category:Examples]]
[[Category:Interpolation]]
[[Category:Interpolation]]

Latest revision as of 10:02, 15 June 2021

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);