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
This test compares the rendering speeds of popular HTML5 Canvas libraries, such as KineticJS and EaselJS and a baseline native canvas rendering.
<!-- native canvas -->
<canvas id="natCanvas" width="40" height="40"></canvas>
<script type="text/javascript" src="http://test.glyaga.ru/ilr/tween.js"></script>
<!-- KineticJS -->
<div id="kinContainer"></div>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.1.0.min.js"></script>
<!-- EaselJS -->
<canvas id="easCanvas" width="40" height="40"></canvas>
<script src="http://code.createjs.com/easeljs-0.7.1.min.js"></script>
<script src="http://test.glyaga.ru/ilr/tweenjs-NEXT.min.js"></script>
// =================== native canvas
var natCanvas = document.getElementById('natCanvas');
var natContext = natCanvas.getContext('2d');
var PI2 = Math.PI * 2;
// =================== KineticJS
var kinStage = new Kinetic.Stage({
container: 'kinContainer',
width: 40,
height: 40
});
var kinLayer = new Kinetic.Layer();
var kinCircle = new Kinetic.Circle({
x: 20,
y: 20,
radius: 20,
fill: 'green',
listening: false
});
var kinText = new Kinetic.Text({
x: 10,
y: 15,
text: 'Simple Text',
fontSize: 10,
fontFamily: 'Calibri',
fill: 'green'
});
kinLayer.add(kinText);
kinLayer.add(kinCircle);
kinStage.add(kinLayer);
// move a node to the right at 50 pixels / second
var velocity = 50;
var anim = new Kinetic.Animation(function(frame) {
var dist = velocity * (frame.timeDiff / 1000);
kinCircle.move(dist, 0);
}, kinLayer);
// =================== EaselJS
var stage = new createjs.Stage('easCanvas');
var easContainer = new createjs.Container();
var easCircle = new createjs.Shape();
easCircle.graphics.beginFill('green').drawCircle(20, 20, 20);
var easText = new createjs.Text("Simple text", "10px Calibri", "#00ff00");
easText.x = 10;
easText.y = 15;
easText.textAlign = "center";
easContainer.addChild(easCircle, easText);
stage.addChild(easContainer);
stage.update();
var easStage = stage;
document.getElementById('kinContainer').innerHTML = '';
Ready to run.
Test | Ops/sec | |
---|---|---|
KineticJS Render Circle |
| ready |
Native Canvas |
| ready |
EaselJS Render Circle |
| ready |
You can edit these tests or add more tests to this page by appending /edit to the URL.