Permalink
Browse files

upgrading deps, adding benchmarks

  • Loading branch information...
1 parent 1e6f562 commit a15d3cf246a107469e250bd69a7ca82088f733f3 @justinbmeyer justinbmeyer committed Nov 4, 2016
@@ -0,0 +1 @@
+<script src="../node_modules/steal/steal.js" main="can-stache/benchmark/benchmark"></script>
@@ -0,0 +1,109 @@
+<!DOCTYPE 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>
@@ -0,0 +1,144 @@
+<!DOCTYPE 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 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>
@@ -0,0 +1,82 @@
+/* jshint ignore:start */
+var b = require( "steal-benchmark" );
+var stache = require( "can-stache/can-stache" );
+var DefineMap = require( "can-define/map/map" );
+var DefineList = require( "can-define/list/list" );
+var canBatch = require( "can-event/batch/batch" );
+
+window.stache = stache;
+window.DefineMap = DefineMap;
+window.DefineList = DefineList;
+window.canBatch = canBatch;
+
+var suite = b.suite( "can-stache" );
+
+suite.add( "can-stache spinning circles", function() {
+ canBatch.start();
+ for ( var n = 0; n < boxes.length; n++ ) {
+ boxes[ n ].tick();
+ }
+ canBatch.stop();
+}, {
+ setup: function() {
+ 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" );
+ div.appendChild( frag );
+ document.body.appendChild( div );
+ },
+ teardown: function() {
+ document.body.removeChild( div );
+ },
+
+ onStart: function() {
+ console.profile( "init" );
+ },
+ onComplete: function() {
+ console.profileEnd( "init" );
+ }
+});
Oops, something went wrong.

0 comments on commit a15d3cf

Please sign in to comment.