Tabs Timing Test

JavaScript performance comparison

Revision 7 of this test case created by

Preparation code

<style type="text/css">
  body { font-family: verdana } .tabs { padding: 0px; margin: 0px; } .tabs li { float:
  left; padding: 10px; background-color: #F6F6F6; list-style: none; margin-left: 10px;
  } .tabs li a { color: #1C94C4; font-weight: bold; text-decoration: none; } .tabs
  li.active a { color: #F6A828; cursor: default; } .tab { border: solid 1px #F6A828;
  } /* clearfix from jQueryUI */ .ui-helper-clearfix:after { content: "."; display:
  block; height: 0; clear: both; visibility: hidden; } .ui-helper-clearfix { display:
  inline-block; } /* required comment for clearfix to work in Opera \*/ * html .ui-helper-clearfix
  { height:1%; } .ui-helper-clearfix { display:block; } /* end clearfix */
</style>
<div style="display:none">
	<div id="tabView">
		<ul class="tabs ui-helper-clearfix">
				<li>
					<a href="#">Tab 1</a>
				</li>
				<li>
					<a href="#">Tab 2</a>
				</li>
				<li>
					<a href="#">Tab 3</a>
				</li>
			</ul>
			<div class="tab">
				Tab 1 Content
			</div>
			<div class="tab">
				Tab 2 Content
			</div>
			<div class="tab">
				Tab 3 Content
			</div>
		</div>
	</div>
</div>
<div id="container">
	<div id="can">
		<ul class="tabs ui-helper-clearfix">
			<li>
				<a href="#">Tab 1</a>
			</li>
			<li>
				<a href="#">Tab 2</a>
			</li>
			<li>
				<a href="#">Tab 3</a>
			</li>
		</ul>
		<div class="tab">
			Tab 1 Content
		</div>
		<div class="tab">
			Tab 2 Content
		</div>
		<div class="tab">
			Tab 3 Content
		</div>
	</div>
	<div id="backbone">
		<ul class="tabs ui-helper-clearfix">
			<li>
				<a href="#">Tab 1</a>
			</li>
			<li>
				<a href="#">Tab 2</a>
			</li>
			<li>
				<a href="#">Tab 3</a>
			</li>
		</ul>
		<div class="tab">
			Tab 1 Content
		</div>
		<div class="tab">
			Tab 2 Content
		</div>
		<div class="tab">
			Tab 3 Content
		</div>
	</div>
	<div id="ember"></div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://canjs.us/release/latest/can.jquery.js"></script>
<script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-0.9.7.1.min.js"></script>
<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js"></script>
<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="http://backbonejs.org/backbone-min.js"></script>
<script type="text/x-handlebars" data-template-name="emberTpl">
<div class="wrapper">  
<ul class="tabs ui-helper-clearfix">
    <li>
      <a href="#">Tab 1</a>
    </li>
    <li>
      <a href="#">Tab 2</a>
    </li>
    <li>
      <a href="#">Tab 3</a>
    </li>
  </ul>
  <div class="tab">
    Tab 1 Content
  </div>
  <div class="tab">
    Tab 2 Content
  </div>
  <div class="tab">
    Tab 3 Content
  </div>
</div>
</script>
      
<script>
Benchmark.prototype.setup = function() {
  var container = $('#container'),
  	canContainer = container.find('#can'),
  	backboneContainer = container.find('#backbone'),
  	runs = 100;
  
  	var CanTabs = can.Control({
  		init: function(el) {
  			// activate the first tab
  			this.element.find('li:first').addClass('active');
  
  			// hide the other tabs
  			var self = this;
  			this.element.find('li:gt(0)').each(function() {
  				self.tab($(this)).hide();
  			});
  //deferred.resolve();
  		},
  
  		// helper function finds the tab for a given li
  		tab: function(li) {
  			return this.element.find('.tab:eq(' + li.index() + ')');
  		},
  
  		// hides old active tab, shows new one
  		'li click': function(el, ev) {
  			ev.preventDefault();
  			this.tab(this.element.find('.active').removeClass('active')).hide();
  			this.tab(el.addClass('active')).show();
  		}
  	});
  
  	var BBTabs = Backbone.View.extend({
  		events: {
  			'click li': 'activate'
  		},
  
  		render: function() {
  			this.$el.find('li:first').addClass('active');
  
  			var self = this;
  			this.$el.find('li:gt(0)').each(function() {
  				self.tab($(this)).hide();
  			});
  //deferred.resolve();
  		},
  
  		tab: function(li) {
  			return this.$el.find('.tab:eq(' + li.index() + ')');
  		},
  
  		activate: function(ev) {
  			ev.originalEvent.preventDefault();
  			this.tab(this.$el.find('.active').removeClass('active')).hide();
  			this.tab($(ev.currentTarget).addClass('active')).show();
  		}
  	});
  
  App = Ember.Application.create();
  App.Tabs = Em.View.extend({
  		templateName: "emberTpl",
  		id: "df",
  		didInsertElement: function(){
  deferred.resolve();
  						var el = $(Ember.get(this, 'element')),
  										tab = Ember.get(this, 'tab'),
  										self = this;
  						el.find('li:first').addClass('active');
  						el.find('li:gt(0)').each(function(){
  										tab.apply(self, [$(this)]).hide();
  						});
  		},
  		tab: function(li){
  						var el = this.$('.wrapper');
  						return el.find('.tab:eq(' + li.index() + ')');
  		},
  		click: function(e){
  						var el = this.$('.wrapper'),
  										li = $(e.target).parent(),
  										tab = Ember.get(this, 'tab');
  						if(li.is('li')) {
  										tab.apply(this, [el.find('.active').removeClass('active')]).hide();
  										tab.apply(this, [li.addClass('active')]).show();
  						}
  		}
  });
  function doCan() {
  	new CanTabs(canContainer);
  }
  
  function doBackbone() {
  	new BBTabs({
  		el: backboneContainer
  	}).render();
  }
  function doEmber() {
  	App.Tabs.create().appendTo('#container #ember');
  }

};

Benchmark.prototype.teardown = function() {
  $('#container #ember').html('');

};
</script>

Preparation code output

<style type="text/css"> body { font-family: verdana } .tabs { padding: 0px; margin: 0px; } .tabs li { float: left; padding: 10px; background-color: #F6F6F6; list-style: none; margin-left: 10px; } .tabs li a { color: #1C94C4; font-weight: bold; text-decoration: none; } .tabs li.active a { color: #F6A828; cursor: default; } .tab { border: solid 1px #F6A828; } /* clearfix from jQueryUI */ .ui-helper-clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .ui-helper-clearfix { display: inline-block; } /* required comment for clearfix to work in Opera \*/ * html .ui-helper-clearfix { height:1%; } .ui-helper-clearfix { display:block; } /* end clearfix */ </style> <div style="display:none"> <div id="tabView"> <ul class="tabs ui-helper-clearfix"> <li> <a href="#">Tab 1</a> </li> <li> <a href="#">Tab 2</a> </li> <li> <a href="#">Tab 3</a> </li> </ul> <div class="tab"> Tab 1 Content </div> <div class="tab"> Tab 2 Content </div> <div class="tab"> Tab 3 Content </div> </div> </div> </div> <div id="container"> <div id="can"> <ul class="tabs ui-helper-clearfix"> <li> <a href="#">Tab 1</a> </li> <li> <a href="#">Tab 2</a> </li> <li> <a href="#">Tab 3</a> </li> </ul> <div class="tab"> Tab 1 Content </div> <div class="tab"> Tab 2 Content </div> <div class="tab"> Tab 3 Content </div> </div> <div id="backbone"> <ul class="tabs ui-helper-clearfix"> <li> <a href="#">Tab 1</a> </li> <li> <a href="#">Tab 2</a> </li> <li> <a href="#">Tab 3</a> </li> </ul> <div class="tab"> Tab 1 Content </div> <div class="tab"> Tab 2 Content </div> <div class="tab"> Tab 3 Content </div> </div> <div id="ember"></div> </div>

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
Ember
// async test
doEmber();
pending…
CanJs
doCan();
pending…
Backbone
doBackbone();
pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL.

0 Comments

Tab 1 Content
Tab 2 Content
Tab 3 Content
Tab 1 Content
Tab 2 Content
Tab 3 Content
Tab 1 Content
Tab 2 Content
Tab 3 Content