can
Version:
MIT-licensed, client-side, JavaScript framework that makes building rich web applications easy.
110 lines (91 loc) • 2.39 kB
HTML
<html>
<head>
<style>
</style>
</head>
<body>
<button id='start'>Start</button>
<button id='stop'>Stop</button>
<div id='timing'></div>
<script src="../node_modules/steal/steal.js" main="@empty">
var DefineMap = require("can-define/map/map");
var DefineList = require("can-define/list/list");
var stache = require("can-stache");
var batch = require("can-event/batch/batch");
var template = stache(
"{{#each boxes}}" +
"<div class='box-view'>" +
"<div class='box' id='box-{{number}}' style='{{style}}'>" +
"{{content}}" +
"</div>" +
"</div>" +
"{{/each}}" );
var boxes = new DefineList();
var Box = DefineMap.extend({
number: {},
count: {value: 0},
top: {},
left: {},
color: {},
content: {},
style: {},
tick: function() {
var count = this.count + 1;
this.count = count;
this.top = Math.sin(count / 10) * 10;
this.left = Math.cos(count / 10) * 10;
this.color = count % 255;
this.content = count % 100;
this.style = this.computeStyle();
},
computeStyle: function() {
return 'top: ' + this.top + 'px; left: ' + this.left + 'px; background: rgb(0,0,' + this.color + ');';
}
});
for(var i =0; i < 100; i++) {
var box = new Box({ number: i });
box.tick();
boxes.push( box );
}
var frag = template({boxes: boxes});
var div = document.createElement("div")
document.body.appendChild(div)
div.appendChild(frag)
var count = 0;
var run = function(){
batch.start();
for(var n = 0; n < 100; n++) {
boxes[n].tick();
}
batch.stop();
};
document.getElementById("start").addEventListener("click", function(){
loopCount = 0;
totalTime = 0;
//console.profile("loops");
benchmarkLoop(run);
});
window.timeout = null;
window.totalTime = null;
window.loopCount = null;
window.benchmarkLoop = function(fn) {
var startDate = new Date();
fn();
var endDate = new Date();
totalTime += endDate - startDate;
loopCount++;
if (loopCount % 100 === 0) {
document.getElementById("timing").innerHTML = 'Performed ' + loopCount + ' iterations in ' + totalTime + ' ms (average ' + (totalTime / loopCount).toFixed(2) + ' ms per loop).';
}
if(loopCount < 1000) {
timeout = setTimeout(function(){
benchmarkLoop(fn);
},1);
} else {
//console.profileEnd("loops");
}
};
</script>
</body>
</html>