tabperf

JavaScript performance comparison

Test case created by tabperf

Info

Tab using jquery

Preparation code

<div class="tabs" id="tab1">
  <ul class="tab">
    <li class="">
      <a href="#tab7">Viewed</a>
    </li>
    <li class="active">
      <a href="#tab8">Commented</a>
    </li>
    <li class="">
      <a href="#tab9">Videos</a>
    </li>
    <li class="">
      <a href="#tab10">Galleries</a>
    </li>
  </ul>
  <!-- end .tabs -->
  <!-- start tab-container#tab7 viewed tab -->
  <div id="tab7" class="tab-container" style="display: none;">
    Tab 7
  </div>
  <!-- end tab-container#tab7 -->
  <!-- start tab-container#tab8 commented tab -->
  <div id="tab8" class="tab-container" style="display: block;">
    tab 8
  </div>
  <!-- end tab-container#tab8 -->
  <!-- start tab-container#tab9 videos tab -->
  <div id="tab9" class="tab-container" style="display: none;">
    tab 9
  </div>
  <!-- end tab-container#tab9 -->
  <!-- start tab-container#tab10 galleries tab -->
  <div id="tab10" class="tab-container" style="display: none;">
    Tab 10
  </div>
  <!-- end tab-container#tab10 -->
  <!-- data-target attribute is used to filter contents based on its classname -->
  <ul class="tab filter clearfix">
    <li class="active">
      <a data-target="last-hour">last hour</a>
    </li>
    <li>
      <a data-target="today">today</a>
    </li>
    <li>
      <a data-target="last-day">Last 7 days</a>
    </li>
  </ul>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>

Preparation code output

Test runner

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

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
jquery selector sniffing
$('.tab li a').on('click', function() {

  var $thisParent = $(this).closest('.tab'),
      $thisParentClosest = $thisParent.closest('.tabs').find('> .tab-container'),
      $thisFilterContent = $thisParentClosest.find('.listing');

  // check if its a filter tab
  if ($thisParent.hasClass('filter')) {
    var targetTab = "." + $(this).data('target');
    $thisFilterContent.hide();
    $thisParentClosest.find(targetTab).show();
  } else {
    $thisParentClosest.removeClass('active');
    $thisParentClosest.hide();
  }
  $thisParent.children('li').removeClass("active");
  $(this).closest('li').addClass("active");
  $($(this).attr('href')).fadeIn('slow');
  return false;
});
pending…
using plugin
(function($) {

  $.fn.tab = function(options) {

    // Create some defaults, extending them with any options that were provided
    var settings = $.extend({
      'location': 'top',
      'background-color': 'blue'
    }, options);

    return this.each(function() {
      var that = this;
      $('.tab a', this).on('click', function(e) {
        e.preventDefault();
        var id = $(this).attr('href');
        $('.tab-container', that).hide();
        console.log(that)
        $(id).show();
      })

    });

  };
})(jQuery);

$('#tab1, #tab21').tab();
pending…
closure
(function() {
  var tabs = $('.tabs'),
      taba = $('.tab a', tabs);

  var tab = function(e) {
      //console.log(this)
      return function(event) {
        event.preventDefault();
        var id = $(this).attr('href');
        var contentId = $(id);
        var parent = $(this).parents('.tabs');
        parent.find('.tab-container').hide();
        contentId.show();
      }
      }
     
     
     
     
     
     
     
     
  taba.on('click', tab())

}())
pending…
Module
var Tabs = (function() {

  var activateTab = function() {
      $('.tab li a').on('click', function(event) {
        event.preventDefault();
        var id = $(this).attr('href');
        var contentId = $(id);
        var parent = $(this).parents('.tabs');
        parent.find('.tab-container').hide();
        contentId.show();
      })
      }
     
     
     
     
     
  activateTab()

}())
pending…
another module
var GN = GN || {};
GN.tabs = (function() {

  return {
    activateTab: function() {
      $('.tab li a').on('click', function(event) {
        event.preventDefault();
        var id = $(this).attr('href');
        var contentId = $(id);
        var parent = $(this).parents('.tabs');
        parent.find('.tab-container').hide();
        contentId.show();
      })
    }
  }

}())

GN.tabs.activateTab()
pending…
raw
(function() {

  var tabs = document.querySelectorAll('.tab li a'),
      tabCon = document.querySelectorAll('.tab-container'),
      id, elem;

  for (i = 0; i < tabs.length; i++) {
    tabs[i].addEventListener("click", tabify, false);
  }

  function hideAllTabCon() {
    for (i = 0; i < tabCon.length; i++) {
      tabCon[i].style.display = 'none';
    }
  }

  function tabify(event) {
    event.preventDefault();
    id = (this.hash).replace('#', '');
    elem = document.getElementById(id);
    hideAllTabCon();
    elem.style.display = 'block';
  }

}())
pending…

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

Compare results of other browsers

0 comments

Add a comment