mirror of
https://github.com/konvajs/konva.git
synced 2026-01-05 09:04:40 +08:00
added performance test suite with two sample performance tests
This commit is contained in:
2
dist/kinetic-core.js
vendored
2
dist/kinetic-core.js
vendored
@@ -3,7 +3,7 @@
|
|||||||
* http://www.kineticjs.com/
|
* http://www.kineticjs.com/
|
||||||
* Copyright 2012, Eric Rowell
|
* Copyright 2012, Eric Rowell
|
||||||
* Licensed under the MIT or GPL Version 2 licenses.
|
* Licensed under the MIT or GPL Version 2 licenses.
|
||||||
* Date: Jul 13 2012
|
* Date: Jul 14 2012
|
||||||
*
|
*
|
||||||
* Copyright (C) 2011 - 2012 by Eric Rowell
|
* Copyright (C) 2011 - 2012 by Eric Rowell
|
||||||
*
|
*
|
||||||
|
|||||||
2
dist/kinetic-core.min.js
vendored
2
dist/kinetic-core.min.js
vendored
@@ -3,7 +3,7 @@
|
|||||||
* http://www.kineticjs.com/
|
* http://www.kineticjs.com/
|
||||||
* Copyright 2012, Eric Rowell
|
* Copyright 2012, Eric Rowell
|
||||||
* Licensed under the MIT or GPL Version 2 licenses.
|
* Licensed under the MIT or GPL Version 2 licenses.
|
||||||
* Date: Jul 13 2012
|
* Date: Jul 14 2012
|
||||||
*
|
*
|
||||||
* Copyright (C) 2011 - 2012 by Eric Rowell
|
* Copyright (C) 2011 - 2012 by Eric Rowell
|
||||||
*
|
*
|
||||||
|
|||||||
16
tests/html/performanceTests.html
Normal file
16
tests/html/performanceTests.html
Normal file
@@ -0,0 +1,16 @@
|
|||||||
|
<!DOCTYPE HTML>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<link rel="stylesheet" type="text/css"href="../base.css">
|
||||||
|
<script src="../../dist/kinetic-core.js"></script>
|
||||||
|
<script src="../js/Test.js"></script>
|
||||||
|
<script src="../js/performanceTests.js"></script>
|
||||||
|
<script>
|
||||||
|
window.onload = function() {
|
||||||
|
var test = new Test();
|
||||||
|
test.run();
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body onmousedown="return false;"></body>
|
||||||
|
</html>
|
||||||
@@ -1,6 +1,18 @@
|
|||||||
var numTests = 0;
|
var numTests = 0;
|
||||||
var testCounter = null;
|
var testCounter = null;
|
||||||
|
var before, after;
|
||||||
|
|
||||||
|
function startTimer() {
|
||||||
|
var date = new Date();
|
||||||
|
before = date.getTime();
|
||||||
|
|
||||||
|
}
|
||||||
|
function endTimer(str) {
|
||||||
|
var date = new Date();
|
||||||
|
after = date.getTime();
|
||||||
|
var diff = after - before;
|
||||||
|
console.log(str + ': ' + diff + 'ms');
|
||||||
|
}
|
||||||
function warn(condition, message) {
|
function warn(condition, message) {
|
||||||
test(condition, message, true);
|
test(condition, message, true);
|
||||||
}
|
}
|
||||||
|
|||||||
74
tests/js/performanceTests.js
Normal file
74
tests/js/performanceTests.js
Normal file
@@ -0,0 +1,74 @@
|
|||||||
|
Test.prototype.tests = {
|
||||||
|
'PERFORMANCE - draw rect vs image from image data': function(containerId) {
|
||||||
|
var stage = new Kinetic.Stage({
|
||||||
|
container: containerId,
|
||||||
|
width: 578,
|
||||||
|
height: 200
|
||||||
|
});
|
||||||
|
var layer = new Kinetic.Layer();
|
||||||
|
stage.add(layer);
|
||||||
|
|
||||||
|
var canvas = layer.getCanvas();
|
||||||
|
var context = layer.getContext();
|
||||||
|
|
||||||
|
startTimer();
|
||||||
|
for(var n = 0; n < 10000; n++) {
|
||||||
|
context.fillStyle = 'blue';
|
||||||
|
context.lineWidth = 6;
|
||||||
|
context.strokeStyle = 'red';
|
||||||
|
context.fillRect(10, 10, 100, 100);
|
||||||
|
context.strokeRect(10, 10, 100, 100);
|
||||||
|
}
|
||||||
|
endTimer('draw 10,000 rects with canvas API');
|
||||||
|
|
||||||
|
startTimer();
|
||||||
|
var imageData = context.getImageData(7, 7, 106, 106);
|
||||||
|
endTimer('create image data');
|
||||||
|
|
||||||
|
layer.clear();
|
||||||
|
|
||||||
|
startTimer();
|
||||||
|
for(var n = 0; n < 10000; n++) {
|
||||||
|
context.putImageData(imageData, 7, 7);
|
||||||
|
}
|
||||||
|
endTimer('draw 10,000 images with image object from image data');
|
||||||
|
|
||||||
|
},
|
||||||
|
'PERFORMANCE - draw rect vs image from data url': function(containerId) {
|
||||||
|
var stage = new Kinetic.Stage({
|
||||||
|
container: containerId,
|
||||||
|
width: 578,
|
||||||
|
height: 200
|
||||||
|
});
|
||||||
|
var layer = new Kinetic.Layer();
|
||||||
|
stage.add(layer);
|
||||||
|
|
||||||
|
var canvas = layer.getCanvas();
|
||||||
|
var context = layer.getContext();
|
||||||
|
|
||||||
|
startTimer();
|
||||||
|
for(var n = 0; n < 10000; n++) {
|
||||||
|
context.fillStyle = 'blue';
|
||||||
|
context.lineWidth = 6;
|
||||||
|
context.strokeStyle = 'red';
|
||||||
|
context.fillRect(10, 10, 100, 100);
|
||||||
|
context.strokeRect(10, 10, 100, 100);
|
||||||
|
}
|
||||||
|
endTimer('draw 10,000 rects with canvas API');
|
||||||
|
|
||||||
|
startTimer();
|
||||||
|
var url = canvas.toDataURL();
|
||||||
|
endTimer('create data url');
|
||||||
|
|
||||||
|
var imageObj = new Image();
|
||||||
|
imageObj.src = url;
|
||||||
|
|
||||||
|
layer.clear();
|
||||||
|
|
||||||
|
startTimer();
|
||||||
|
for(var n = 0; n < 10000; n++) {
|
||||||
|
context.drawImage(imageObj, 7, 7, 106, 106, 10, 10, 106, 106);
|
||||||
|
}
|
||||||
|
endTimer('draw 10,000 images with image object from data url');
|
||||||
|
}
|
||||||
|
};
|
||||||
Reference in New Issue
Block a user