jsPerf.app is an online JavaScript performance benchmark test runner & jsperf.com mirror. It is a complete rewrite in homage to the once excellent jsperf.com now with hopefully a more modern & maintainable codebase.
jsperf.com URLs are mirrored at the same path, e.g:
https://jsperf.com/negative-modulo/2
Can be accessed at:
https://jsperf.app/negative-modulo/2
<!-- HighCharts -->
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/boost.js"></script>
<div id="highcharts-container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
<!-- canvasjs -->
<script type="text/javascript" src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="canvasjs-chart" style="width: 900px; height: 500px;"></div>
<!-- chartjs -->
<script type="text/javascript" src="http://www.chartjs.org/assets/Chart.js"></script>
<div id="chartjs-container" style="min-width: 900px; height: 500px; margin: 0 auto"><canvas id="chartjs-canvas" height="500px" width="900px"></canvas></div>
<!-- AM Charts -->
<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="http://www.amcharts.com/lib/3/serial.js"></script>
<div id="amcharts-container" style="width: 900px; height: 500px;"></div>
<!-- Flot -->
<script type="text/javascript" src="http://www.flotcharts.org/flot/jquery.flot.js"></script>
<div id="flot-chart" style="width:900px;height:500px"></div>
<style>
#canvasjs-chart canvas {
left:0px;
}
</style>
// random value generator (pick between -10 and 10)
window.generateRandomY = function(){
return Math.floor(Math.random() * 21) - 10;
}
window.getHighChartsData = function() {
var datasets = { 'one':[], 'two':[], 'three':[] };
for(var i=0;i<1000;i++){
datasets['one'].push(window.generateRandomY());
datasets['two'].push(window.generateRandomY());
datasets['three'].push(window.generateRandomY());
}
return [{
name: 'Cherno More',
data: datasets['one']
}, {
name: 'Botev Plovdiv',
data: datasets['two']
}, {
name: 'The Draw',
data: datasets['three']
}];
};
window.getCanvasjsData = function() {
var datasets = { 'one':[], 'two':[], 'three':[] };
for(var i=0;i<1000;i++){
datasets['one'].push({ x: i, y: window.generateRandomY()});
datasets['two'].push({ x: i, y: window.generateRandomY()});
datasets['three'].push({ x: i, y: window.generateRandomY()});
}
return [datasets['one'],datasets['one'],datasets['one']];
};
window.getChartJsData = function() {
var labelset = [];
var datasets = { 'one':[], 'two':[], 'three':[] };
for(var i=0;i<1000;i++){
labelset.push("");
datasets['one'].push(window.generateRandomY());
datasets['two'].push(window.generateRandomY());
datasets['three'].push(window.generateRandomY());
}
return {
labels: labelset,
datasets: [{
fillColor: "rgba(220,220,220,0.5)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
data: datasets['one']
}, {
fillColor: "rgba(151,187,205,0.5)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
data: datasets['two']
}, {
fillColor: "rgba(151,187,205,0.5)",
strokeColor: "rgba(0,187,205,1)",
pointColor: "rgba(0,187,205,1)",
pointStrokeColor: "#fff",
data: datasets['three']
}]
};
};
window.getAmData = function() {
var datasets = [];
for(var i=0;i<1000;i++){
datasets.push({
'date': i,
'Cherno More': window.generateRandomY(),
'Botev Plovdiv': window.generateRandomY(),
'The Draw': window.generateRandomY()
});
}
return datasets;
};
window.getFlotData = function() {
var datasets = [[],[],[]];
for(var i=0;i<1000;i++){
datasets[0].push([i, window.generateRandomY()]);
datasets[1].push([i, window.generateRandomY()]);
datasets[2].push([i, window.generateRandomY()]);
}
return datasets;
};
Ready to run.
Test | Ops/sec | |
---|---|---|
Highcharts |
| ready |
Canvasjs |
| ready |
Chart.js |
| ready |
amCharts |
| ready |
Flot |
| ready |
You can edit these tests or add more tests to this page by appending /edit to the URL.