Classie v. jQuery

Benchmark created by Seth on

Preparation HTML

<div id="foo"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Setup

function classReg( className ) {
    return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
  }
  
  // classList support for class management
  // altho to be fair, the api sucks because it won't accept multiple classes at once
  var hasClass, addClass, removeClass;
  
  if ( 'classList' in document.documentElement ) {
    hasClass = function( elem, c ) {
      return elem.classList.contains( c );
    };
    addClass = function( elem, c ) {
      elem.classList.add( c );
    };
    removeClass = function( elem, c ) {
      elem.classList.remove( c );
    };
  }
  else {
    hasClass = function( elem, c ) {
      return classReg( c ).test( elem.className );
    };
    addClass = function( elem, c ) {
      if ( !hasClass( elem, c ) ) {
        elem.className = elem.className + ' ' + c;
      }
    };
    removeClass = function( elem, c ) {
      elem.className = elem.className.replace( classReg( c ), ' ' );
    };
  }
  
  function toggleClass( elem, c ) {
    var fn = hasClass( elem, c ) ? removeClass : addClass;
    fn( elem, c );
  }
  
  var classie = {
    // full names
    hasClass: hasClass,
    addClass: addClass,
    removeClass: removeClass,
    toggleClass: toggleClass,
    // short names
    has: hasClass,
    add: addClass,
    remove: removeClass,
    toggle: toggleClass
  };
  var $div = $('#foo'),
      div = document.getElementById('foo');

Test runner

Ready to run.

Testing in
TestOps/sec
Classie
var has = classie.has(div, 'superClass');
classie.add(div, 'superClass');
classie.remove(div, 'superClass');
classie.toggle(div, 'superClass');
ready
jQuery
var has = $div.hasClass('superClass');
$div.addClass('superClass');
$div.removeClass('superClass');
$div.toggleClass('superClass');
ready

Revisions

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