jsPerf.app is an online JavaScript performance benchmark test runner & jsperf.com mirror. It is a complete rewrite in homage to the once excellent jsperf.com now with hopefully a more modern & maintainable codebase.

jsperf.com URLs are mirrored at the same path, e.g:

https://jsperf.com/negative-modulo/2

Can be accessed at:

https://jsperf.app/negative-modulo/2

Sohtanaka Tabs

Benchmark created on August 19, 2011

Preparation HTML

<style type="text/css" media="all">
body {
    background: #f0f0f0;
    margin: 0;
    padding: 0;
    font: 10px normal Verdana, Arial, Helvetica, sans-serif;
    color: #444;
}
h1 {font-size: 3em; margin: 20px 0;}
.container {width: 500px; margin: 10px auto;}
ul.tabs {
    margin: 0;
    padding: 0;
    float: left;
    list-style: none;
    height: 32px;
    border-bottom: 1px solid #999;
    border-left: 1px solid #999;
    width: 100%;
}
ul.tabs li {
    float: left;
    margin: 0;
    padding: 0;
    height: 31px;
    line-height: 31px;
    border: 1px solid #999;
    border-left: none;
    margin-bottom: -1px;
    background: #e0e0e0;
    overflow: hidden;
    position: relative;
}
ul.tabs li a {
    text-decoration: none;
    color: #000;
    display: block;
    font-size: 1.2em;
    padding: 0 20px;
    border: 1px solid #fff;
    outline: none;
}
ul.tabs li a:hover {
    background: #ccc;
}    
html ul.tabs li.active, html ul.tabs li.active a:hover  {
    background: #fff;
    border-bottom: 1px solid #fff;
}
.tab_container {
    border: 1px solid #999;
    border-top: none;
    clear: both;
    float: left; 
    width: 100%;
    background: #fff;
    -moz-border-radius-bottomright: 5px;
    -khtml-border-radius-bottomright: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    -khtml-border-radius-bottomleft: 5px;
    -webkit-border-bottom-left-radius: 5px;
}
.tab_content {
    padding: 20px;
    font-size: 1.2em;
}
.tab_content h2 {
    font-weight: normal;
    padding-bottom: 10px;
    border-bottom: 1px dashed #ddd;
    font-size: 1.8em;
}
.tab_content h3 a{
    color: #254588;
}
.tab_content img {
    float: left;
    margin: 0 20px 20px 0;
    border: 1px solid #ddd;
    padding: 5px;
}
</style>
<div class="container">
  <h1>
    Simple Tabs w/ CSS &amp; jQuery
  </h1>
  <ul class="tabs">
    <li>
      <a href="#tab1">Gallery</a>
    </li>
    <li>
      <a href="#tab2">Submit</a>
    </li>
    <li>
      <a href="#tab3">Resources</a>
    </li>
    <li>
      <a href="#tab4">Contact</a>
    </li>
  </ul>
  <div class="tab_container">
    <div id="tab1" class="tab_content">
      <h2>
        Gallery
      </h2>
      <a href="http://www.designbombs.com/light/simona-munteanu/"><img src="http://www.designbombs.com/wp-content/themes/DesignBombs/images/gallery/simonamunteanu_thumb.gif" alt="" /></a>
      <h3>
        <a href="http://www.designbombs.com">www.DesignBombs.com</a>
      </h3>
      <p>
        Saw polecat than took bankrupt good hillbilly stew, crazy, fancy and hillbilly heap
        rodeo, pappy. Thar range saw me him sherrif nothin' shiney dirt, pigs sheep city-slickers
        everlastin' shotgun driveway. Promenade catfight fart fiddle jiggly gonna tarnation,
        fence, what quarrel dirty, if. Pot grandma crop kinfolk jezebel diesel coonskin hoosegow
        wirey fixin' shack good roped in. Reckon stew tax-collectors, grandpa tobaccee hayseed
        good wash tired caboodle burnin' landlord.
      </p>
      <p>
        Smokin' driveway wrestlin' go darn truck moonshine wirey cow grandpa saw, coonskin
        bull, java, huntin'.
      </p>
      <p>
        Stinky yonder pigs in, rustle kinfolk gonna marshal sittin' wagon, grandpa. Ya them
        firewood buffalo, tobaccee cabin.
      </p>
    </div>
    <div id="tab2" class="tab_content">
      <h2>
        Submit
      </h2>
      <a href="http://www.designbombs.com/blog/sketch-blog/"> <img src="http://www.designbombs.com/wp-content/themes/DesignBombs/images/gallery/sketchblog_thumb.gif" alt="" /></a>
      <h3>
        <a href="http://www.designbombs.com">www.DesignBombs.com</a>
      </h3>
      <p>
        Grandma been has bankrupt said hospitality fence everlastin' wrestlin' rodeo redblooded
        chitlins marshal. Boobtube soap her hootch lordy cow, rattler.
      </p>
      <p>
        Rottgut havin' ignorant go, hee-haw shiney jail fetched hillbilly havin' cipherin'.
        Bacon no cowpoke tobaccee horse water rightly trailer tools git hillbilly.
      </p>
      <p>
        Jezebel had whiskey snakeoil, askin' weren't, skanky aunt townfolk fetched. Fit
        tractor, them broke askin', them havin' rattler fell heffer, been tax-collectors
        buffalo. Quarrel confounded fence wagon trailer, moonshine wuz, city-slickers fixin'
        cow.
      </p>
    </div>
    <div id="tab3" class="tab_content active">
      <h2>
        Resources
      </h2>
      <a href="http://www.designbombs.com/fashion/lukas-mynus/"><img src="http://www.designbombs.com/wp-content/themes/DesignBombs/images/gallery/mynus_thumb.gif" alt="" /></a>
      <h3>
        <a href="http://www.designbombs.com">www.DesignBombs.com</a>
      </h3>
      <p>
        Dirt tools thar, pot buffalo put jehosephat rent, ya pot promenade. Come pickled
        far greasy fightin', wirey, it poor yer, drive jig landlord. Rustle is been moonshine
        whomp hogtied. Stew, wirey stew cold uncle ails. Slap hoosegow road cooked, where
        gal pot, commencin' country. Weren't dogs backwoods, city-slickers me afford boxcar
        fat, dumb sittin' sittin' drive rustle slap, tornado. Fuss stinky knickers whomp
        ain't, city-slickers sherrif darn ignorant tobaccee round-up old buckshot that.
      </p>
      <p>
        Deep-fried over shootin' a wagon cheatin' work cowpoke poor, wuz, whiskey got wirey
        that. Shot beer, broke kickin' havin' buckshot gritts. Drunk, em moonshine his commencin'
        country drunk chitlins stole. Fer tonic boxcar liar ass jug cousin simple, wuz showed
        yonder hee-haw drive is me. Horse country inbred wirey, skanky kinfolk. Rattler,
        sittin' darn skanky fence, shot huntin'.
      </p>
    </div>
    <div id="tab4" class="tab_content">
      <h2>
        Contact
      </h2>
      <a href="http://www.designbombs.com/illustrations/esteban-munoz/"> <img src="http://www.designbombs.com/wp-content/themes/DesignBombs/images/gallery/estebanmunoz_thumb.gif" alt="" /></a>
      <h3>
        <a href="http://www.designbombs.com">www.DesignBombs.com</a>
      </h3>
      <p>
        Grandma been has bankrupt said hospitality fence everlastin' wrestlin' rodeo redblooded
        chitlins marshal. Boobtube soap her hootch lordy cow, rattler.
      </p>
      <p>
        Rottgut havin' ignorant go, hee-haw shiney jail fetched hillbilly havin' cipherin'.
        Bacon no cowpoke tobaccee horse water rightly trailer tools git hillbilly.
      </p>
      <p>
        Jezebel had whiskey snakeoil, askin' weren't, skanky aunt townfolk fetched. Fit
        tractor, them broke askin', them havin' rattler fell heffer, been tax-collectors
        buffalo. Quarrel confounded fence wagon trailer, moonshine wuz, city-slickers fixin'
        cow.
      </p>
    </div>
  </div>
</div>
<div style="clear: both; display: block; padding: 10px 0; text-align:center;">
  <a href="http://www.sohtanaka.com/web-design/simple-tabs-w-css-jquery">Simple Tabs w/ CSS &amp; jQuery</a>
  by Soh Tanaka. Check out his
  <a href="http://www.sohtanaka.com/web-design-blog/">Web Design Blog</a>
  for more tutorials!
</div>
<script>
  < script src = "//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" > < /script>
</script>

Test runner

Ready to run.

Test Ops/sec

Sohtanaka Alternate

Testing in
Test	Ops/sec
Sohtanaka Alternate	`var tabContents = $(".tab_content").hide(), tabs = $("ul.tabs li"); tabs.first().addClass("active").show(); tabContents.first().show(); tabs.click(function() { var $this = $(this), activeTab = $this.find('a').attr('href'); if (!$this.hasClass('active')) { $this.addClass('active').siblings().removeClass('active'); tabContents.hide().filter(activeTab).fadeIn(); } return false; });`	ready
Sohtanaka	$(document).ready(function() { //Default Action $(".tab_content").hide(); //Hide all content $(".active").show(); //Show first tab content //On Click Event $("ul.tabs li").click(function() { $("ul.tabs li").removeClass("active"); //Remove any "active" class $(this).addClass("active"); //Add "active" class to selected tab $(".tab_content").hide(); //Hide all tab content var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content $(activeTab).fadeIn(); //Fade in the active content return false; }); });	ready

var tabContents = $(".tab_content").hide(),
    tabs = $("ul.tabs li");

tabs.first().addClass("active").show();
tabContents.first().show();

tabs.click(function() {
  var $this = $(this),
      activeTab = $this.find('a').attr('href');

  if (!$this.hasClass('active')) {
    $this.addClass('active').siblings().removeClass('active');
    tabContents.hide().filter(activeTab).fadeIn();
  }

  return false;
});

ready

Sohtanaka

$(document).ready(function() {

  //Default Action
  $(".tab_content").hide(); //Hide all content
  $(".active").show(); //Show first tab content
  //On Click Event
  $("ul.tabs li").click(function() {
    $("ul.tabs li").removeClass("active"); //Remove any "active" class
    $(this).addClass("active"); //Add "active" class to selected tab
    $(".tab_content").hide(); //Hide all tab content
    var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
    $(activeTab).fadeIn(); //Fade in the active content
    return false;
  });

});

ready

Revisions

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

Revision 1: published on August 19, 2011