add performance tests

zafisoft · May 2, 2014 · c82df2a · c82df2a
1 parent 0e6bcb4
commit c82df2a
Show file tree

Hide file tree

Showing 9 changed files with 385 additions and 4 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,5 +1,4 @@
 node_modules/
 bower_components/
-perf/
 
 *.sublime-*
diff --git a/bower.json b/bower.json
@@ -7,7 +7,10 @@
     "bower_components"
   ],
   "devDependencies": {
-    "mocha": "~1.13.0",
-    "expect": "~0.2.0"
+    "mocha": "1.13.0",
+    "expect": "0.2.0",
+    "benchmark": "1.0.0",
+    "lodash": "2.4.1",
+    "platform": "1.0.0"
   }
-}
+}
diff --git a/perf/attributes.js b/perf/attributes.js
@@ -0,0 +1,153 @@
+addSuite({
+  name: 'Set attribute',
+  setup: function(suite) {
+    suite.jbEl = jBone('<span>');
+    suite.jqEl = jQuery('<span>');
+  }
+}, [
+  ['jBone', function(suite) {
+    suite.jbEl.attr('name', 'value');
+  }],
+  ['jQuery', function(suite) {
+    suite.jqEl.attr('name', 'value');
+  }]
+]);
+
+addSuite({
+  name: 'Get attribute',
+  setup: function(suite) {
+    suite.jbEl = jBone('<span>', {
+      name: 'value'
+    });
+    suite.jqEl = jQuery('<span>', {
+      name: 'value'
+    });
+  }
+}, [
+  ['jBone', function(suite) {
+    suite.jbEl.attr('name');
+  }],
+  ['jQuery', function(suite) {
+    suite.jqEl.attr('name');
+  }]
+]);
+
+addSuite({
+  name: 'Set value',
+  setup: function(suite) {
+    suite.jbEl = jBone('<input>');
+    suite.jqEl = jQuery('<input>');
+  }
+}, [
+  ['jBone', function(suite) {
+    suite.jbEl.val('name', 'value');
+  }],
+  ['jQuery', function(suite) {
+    suite.jqEl.val('name', 'value');
+  }]
+]);
+
+addSuite({
+  name: 'Get value',
+  setup: function(suite) {
+    suite.jbEl = jBone('<input>').val('name', 'value');
+    suite.jqEl = jQuery('<input>').val('name', 'value');
+  }
+}, [
+  ['jBone', function(suite) {
+    suite.jbEl.val('name');
+  }],
+  ['jQuery', function(suite) {
+    suite.jqEl.val('name');
+  }]
+]);
+
+addSuite({
+  name: 'Set css',
+  setup: function(suite) {
+    suite.jbEl = jBone('<span>');
+    suite.jqEl = jQuery('<span>');
+  }
+}, [
+  ['jBone', function(suite) {
+    suite.jbEl.css('color', 'red');
+  }],
+  ['jQuery', function(suite) {
+    suite.jqEl.css('color', 'red');
+  }]
+]);
+
+addSuite({
+  name: 'Get css',
+  setup: function(suite) {
+    suite.jbEl = jBone('<span>').css('color', 'red').appendTo('#suite');
+    suite.jqEl = jQuery('<span>').css('color', 'red').appendTo('#suite');
+  }
+}, [
+  ['jBone', function(suite) {
+    suite.jbEl.css('color');
+  }],
+  ['jQuery', function(suite) {
+    suite.jqEl.css('color');
+  }]
+]);
+
+addSuite({
+  name: 'Set normal data',
+  setup: function(suite) {
+    suite.jbEl = jBone('<span>');
+    suite.jqEl = jQuery('<span>');
+  }
+}, [
+  ['jBone', function(suite) {
+    suite.jbEl.data('key', 'value');
+  }],
+  ['jQuery', function(suite) {
+    suite.jqEl.data('key', 'value');
+  }]
+]);
+
+addSuite({
+  name: 'Set object data',
+  setup: function(suite) {
+    suite.jbEl = jBone('<span>');
+    suite.jqEl = jQuery('<span>');
+  }
+}, [
+  ['jBone', function(suite) {
+    suite.jbEl.data('key', {});
+  }],
+  ['jQuery', function(suite) {
+    suite.jqEl.data('key', {});
+  }]
+]);
+
+addSuite({
+  name: 'Get normal data',
+  setup: function(suite) {
+    suite.jbEl = jBone('<span>').data('key', 'value');
+    suite.jqEl = jQuery('<span>').data('key', 'value');
+  }
+}, [
+  ['jBone', function(suite) {
+    suite.jbEl.data('key');
+  }],
+  ['jQuery', function(suite) {
+    suite.jqEl.data('key');
+  }]
+]);
+
+addSuite({
+  name: 'Get object data',
+  setup: function(suite) {
+    suite.jbEl = jBone('<span>').data('key', {});
+    suite.jqEl = jQuery('<span>').data('key', {});
+  }
+}, [
+  ['jBone', function(suite) {
+    suite.jbEl.data('key');
+  }],
+  ['jQuery', function(suite) {
+    suite.jqEl.data('key');
+  }]
+]);
diff --git a/perf/backbone.js b/perf/backbone.js
@@ -0,0 +1,21 @@
+addSuite({
+  name: 'Backbone View',
+  setup: function(suite) {
+    var el = document.getElementById('suite');
+
+    suite.jbView = jbBackbone.View.extend({
+      events: { click: function() {} }
+    });
+
+    suite.jqView = jqBackbone.View.extend({
+      events: { click: function() {} }
+    });
+  }
+}, [
+  ['jBone', function(suite) {
+    (new suite.jbView()).remove();
+  }],
+  ['jQuery', function(suite) {
+    (new suite.jqView()).remove();
+  }]
+]);
diff --git a/perf/core.js b/perf/core.js
@@ -0,0 +1,71 @@
+addSuite({
+  name: 'Init'
+}, [
+  ['jBone', function() {
+      jBone();
+  }],
+  ['jQuery', function() {
+      jQuery();
+  }]
+]);
+
+addSuite({
+  name: 'Wrap DOM Node'
+}, [
+  ['jBone', function() {
+    jBone(document.createElement('div'));
+  }],
+  ['jQuery', function() {
+    jQuery(document.createElement('div'));
+  }]
+]);
+
+addSuite({
+  name: 'Create single Node'
+}, [
+  ['jBone', function() {
+    jBone('<span>');
+  }],
+  ['jQuery', function() {
+    jQuery('<span>');
+  }]
+]);
+
+addSuite({
+  name: 'Create multiple Nodes'
+}, [
+  ['jBone', function() {
+    jBone('<p><span></span><span></span></p>');
+  }],
+  ['jQuery', function() {
+    jQuery('<p><span></span><span></span></p>');
+  }]
+]);
+
+addSuite({
+  name: 'Create Node and define attributes'
+}, [
+  ['jBone', function() {
+    jBone('<span>', {
+      'class': 'test',
+      'name': 'value'
+    });
+  }],
+  ['jQuery', function() {
+    jQuery('<span>', {
+      'class': 'test',
+      'name': 'value'
+    });
+  }]
+]);
+
+addSuite({
+  name: 'Search by selector'
+}, [
+  ['jBone', function(suite) {
+    jBone('div');
+  }],
+  ['jQuery', function(suite) {
+    jQuery('div');
+  }]
+]);
diff --git a/perf/events.js b/perf/events.js
@@ -0,0 +1,44 @@
+addSuite({
+  name: 'on/off events',
+  setup: function(suite) {
+    suite.jbEl = jBone('<span>');
+    suite.jqEl = jQuery('<span>');
+  }
+}, [
+  ['jBone', function(suite) {
+    suite.jbEl.on('click', function() {}).off();
+  }],
+  ['jQuery', function(suite) {
+    suite.jqEl.on('click', function() {}).off();
+  }]
+]);
+
+addSuite({
+  name: 'off with eventType',
+  setup: function(suite) {
+    suite.jbEl = jBone('<span>');
+    suite.jqEl = jQuery('<span>');
+  }
+}, [
+  ['jBone', function(suite) {
+    suite.jbEl.on('click', function() {}).off('click');
+  }],
+  ['jQuery', function(suite) {
+    suite.jqEl.on('click', function() {}).off('click');
+  }]
+]);
+
+addSuite({
+  name: 'off with namespace',
+  setup: function(suite) {
+    suite.jbEl = jBone('<span>');
+    suite.jqEl = jQuery('<span>');
+  }
+}, [
+  ['jBone', function(suite) {
+    suite.jbEl.on('click.space', function() {}).off('.space');
+  }],
+  ['jQuery', function(suite) {
+    suite.jqEl.on('click.space', function() {}).off('.space');
+  }]
+]);
diff --git a/perf/manipulation.js b/perf/manipulation.js
@@ -0,0 +1,14 @@
+addSuite({
+  name: 'Remove Element',
+  setup: function(suite) {
+    suite.jbEl = jBone('<span>');
+    suite.jqEl = jQuery('<span>');
+  }
+}, [
+  ['jBone', function(suite) {
+    suite.jbEl.remove();
+  }],
+  ['jQuery', function(suite) {
+    suite.jqEl.remove();
+  }]
+]);
diff --git a/perf/perf.html b/perf/perf.html
@@ -0,0 +1,34 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<title>Performance</title>
+	<script src="../dist/jbone.js"></script>
+	<script src="../bower_components/lodash/dist/lodash.js"></script>
+	<script src="../bower_components/platform/platform.js"></script>
+	<script src="../bower_components/benchmark/benchmark.js"></script>
+
+	<script src="https://code.jquery.com/jquery-2.1.0.js"></script>
+	<script src="https://rawgit.com/jashkenas/backbone/master/backbone.js"></script>
+	<script src="https://rawgit.com/jashkenas/backbone/master/backbone.js"></script>
+</head>
+<body>
+	<script>
+		var jbBackbone = Backbone.noConflict();
+		jbBackbone.$ = jBone;
+
+		var jqBackbone = Backbone.noConflict();
+		jqBackbone.$ = jQuery;
+	</script>
+
+	<div id="suite"></div>
+
+	<script src="suite.js"></script>
+
+	<script src="core.js"></script>
+	<script src="attributes.js"></script>
+	<script src="events.js"></script>
+	<script src="manipulation.js"></script>
+	<script src="backbone.js"></script>
+</body>
+</html>