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
export all instances and merge them into one image comparrison between base64 and further binary convertion to generate blob to download.
global variable dataExport to check output
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<!-- AMCHARTS -->
<script src="http://cdn.amcharts.com/lib/3/amcharts.js" type="text/javascript"></script>
<script src="http://cdn.amcharts.com/lib/3/serial.js" type="text/javascript"></script>
<script src="http://cdn.amcharts.com/lib/3/funnel.js" type="text/javascript"></script>
<script src="http://cdn.amcharts.com/lib/3/gauge.js" type="text/javascript"></script>
<script src="http://cdn.amcharts.com/lib/3/pie.js" type="text/javascript"></script>
<script src="http://cdn.amcharts.com/lib/3/radar.js" type="text/javascript"></script>
<script src="http://cdn.amcharts.com/lib/3/xy.js" type="text/javascript"></script>
<script src="http://cdn.amcharts.com/themes/black.js" type="text/javascript"></script>
<script src="http://cdn.amcharts.com/lib/3/exporting/amexport.js" type="text/javascript"></script>
<script src="http://cdn.amcharts.com/lib/3/exporting/canvg.js" type="text/javascript"></script>
<script src="http://cdn.amcharts.com/lib/3/exporting/rgbcolor.js" type="text/javascript"></script>
<script>
var dataExport = {
base64: '',
blob: '',
base64_time: 0,
blob_time: 0
};
var dataProvider = [
{
"category": "category-1",
"y": 10,
"x": 14,
"value": 59,
"y2": -5,
"x2": -3,
"value2": 44
},
{
"category": "category-2",
"y": 5,
"x": 3,
"value": 50,
"y2": -15,
"x2": -8,
"value2": 12
},
{
"category": "category-3",
"y": -10,
"x": -3,
"value": 19,
"y2": -4,
"x2": 6,
"value2": 35
},
{
"category": "category-4",
"y": -6,
"x": 5,
"value": 65,
"y2": -5,
"x2": -6,
"value2": 168
},
{
"category": "category-5",
"y": 15,
"x": -4,
"value": 92,
"y2": -10,
"x2": -8,
"value2": 102
},
{
"category": "category-6",
"y": 13,
"x": 1,
"value": 8,
"y2": -2,
"x2": -3,
"value2": 41
},
{
"category": "category-7",
"y": 1,
"x": 6,
"value": 35,
"y2": 0,
"x2": -3,
"value2": 16
}
];
function saveAs() {};
function exportCharts(toBinary) {
var base64,byteNumbers,byteArray,blob,diff1,diff2;
var timestamp = Number(new Date());
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
var stack = [];
var offsetTop = 0;
var fileType = 'image/png';
canvas.width = 0;
canvas.height = 0;
// Gather base64 string and determine the canvas size
jQuery(AmCharts.charts).each(function() {
var eI = new AmCharts.AmExport(this);
var tmp = {
width: this.div.offsetWidth,
height: this.div.offsetHeight
};
canvas.width += canvas.width<tmp.width?tmp.width:0;
canvas.height += tmp.height;
eI.init();
eI.output({
format: 'png',
output: 'datastring'
},function(blob) {
var img = new Image();
img.src = blob;
tmp.img = img;
stack.push(tmp);
});
});
// Draw the buffered imagery to the canvas
jQuery(stack).each(function() {
context.drawImage(this.img, 0, offsetTop,this.width,this.height);
offsetTop += this.height;
});
// Get base64 datastring url; export process is already done location.href = base64 would work
base64 = canvas.toDataURL(fileType);
// ref. for later access
dataExport.base64 = base64;
dataExport.base64_time = Number(new Date()) - timestamp;
if ( toBinary ) {
// Get pure base64 and decode the data
base64 = atob(base64.slice(base64.indexOf(',')+1));
// Create binary array for the blob content
byteNumbers = new Array(base64.length);
for (var i = 0; i < base64.length; i++) {
byteNumbers[i] = base64.charCodeAt(i);
}
byteArray = new Uint8Array(byteNumbers);
// Create blob; save imagery and throw the download
blob = new Blob([byteArray],{
type: fileType
});
// ref. for later access
dataExport.blob = blob;
dataExport.blob_time = Number(new Date()) - timestamp;
saveAs(blob,'joinedExport.png');
}
};
// Loop to create the charts
jQuery(document).ready(function() {
jQuery('.chart').each(function() {
AmCharts.makeChart(this,
{
"type" : jQuery(this).data('chart-type'),
"theme" : "black",
"pathToImages" : "http://cdn.amcharts.com/lib/3/images/",
"startDuration" : 0,
"neckHeight" : "30%",
"neckWidth" : "40%",
"categoryField" : "category",
"titleField" : "category",
"valueField" : "value",
"graphs" : [
{
"type" : jQuery(this).data('graph-type'),
"fillAlphas" : jQuery(this).data('graph-type')?1:0,
"xField" : "x",
"yField" : "y",
"valueField" : "value"
}
],
"dataProvider": dataProvider,
"legend": {}
}
);
});
});
</script>
<style type="text/css">
.chart {
width: 800px;
height: 400px;
}
</style>
<div class="chart" data-chart-type="serial" data-graph-type="line"></div>
<div class="chart" data-chart-type="serial" data-graph-type="column"></div>
<div class="chart" data-chart-type="radar" data-graph-type=""></div>
<div class="chart" data-chart-type="xy" data-graph-type=""></div>
<div class="chart" data-chart-type="pie" data-graph-type=""></div>
<div class="chart" data-chart-type="funnel" data-graph-type=""></div>Ready to run.
| Test | Ops/sec | |
|---|---|---|
| Export to base64 | | ready |
| Export to blob | | ready |
You can edit these tests or add more tests to this page by appending /edit to the URL.