can
Version:
MIT-licensed, client-side, JavaScript framework that makes building rich web applications easy.
146 lines (117 loc) • 3.09 kB
HTML
<html>
<head>
<style>
p {
font: 12px/16px Arial;
margin: 10px 10px 15px;
}
button {
font: bold 14px/14px Arial;
margin-left: 10px;
}
#grid {
margin: 10px;
}
#timing {
clear: both;
padding-top: 10px;
}
.box-view {
width: 20px; height: 20px;
float: left;
position: relative;
margin: 8px;
}
.box {
border-radius: 100px;
width: 20px; height: 10px;
padding: 5px 0;
color: #fff;
font: 10px/10px Arial;
text-align: center;
position: absolute;
}
</style>
</head>
<body>
<button id='start'>Start</button>
<button id='stop'>Stop</button>
<div id='timing'></div>
<script type="text/javascript" src="../../node_modules/steal/steal.js" main="@empty"></script>
<script type="text/javascript">
steal("can/view/stache", function(stache){
var template = stache(
"{{#each boxes}}"+
"<div class='box-view'>"+
"<div class='box' id='box-{{number}}' style='{{style}}'>"+
"{{content}}"+
"</div>"+
"</div>"+
"{{/each}}");
var boxes = new can.List(),
Box = can.Map.extend({
top: 0,
left: 0,
content: 0,
count: 0,
tick: function() {
var count = this.attr('count') + 1;
this.attr('count', count);
this.attr('top', Math.sin(count / 10) * 10);
this.attr('left', Math.cos(count / 10) * 10);
this.attr('color', count % 255);
this.attr('content', count % 100);
this.attr('style', this.computeStyle());
},
computeStyle: function() {
return 'top: ' + this.attr('top') + 'px; left: ' + this.attr('left') +'px; background: rgb(0,0,' + this.attr('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(){
can.batch.start();
for(var n = 0 ; n < boxes.length; n++) {
boxes[n].tick();
}
can.batch.stop();
};
$("#start").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) {
$('#timing').text('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>