removeClass vs native JS remove class

JavaScript performance comparison

Revision 3 of this test case created by Jef

Info

I was curious to see which method was faster... removing a class using jQuery's removeClass function or by doing it myself in native JavaScript.

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.js">
</script>
<div id="parent">
  <div id="leftChild">
    <div>
      left child
    </div>
    <div class="row row-1">
      some content
    </div>
    <div class="row row-2">
      other content
    </div>
    <div class="row row-3">
      more content
    </div>
  </div>
  <div id="rightChild">
    <div>
      right child
    </div>
    <div class="row row-1">
      <span class="col1">
        column 1 content
      </span>
      <span class="col2">
        column 2 content
      </span>
      <span class="col3">
        column 3 content
      </span>
      <span class="col4">
        column 4 content
      </span>
      <span class="col5">
        column 5 content some really long content to trigger scrolling just for the purpose
        of this example
      </span>
    </div>
    <div class="row row-2">
      <span class="col1">
        column 1 content
      </span>
      <span class="col2">
        column 2 content
      </span>
      <span class="col3">
        column 3 content
      </span>
      <span class="col4">
        column 4 content
      </span>
      <span class="col5">
        column 5 content some really long content to trigger scrolling just for the purpose
        of this example
      </span>
    </div>
    <div class="row row-3">
      <span class="col1">
        column 1 content
      </span>
      <span class="col2">
        column 2 content
      </span>
      <span class="col3">
        column 3 content
      </span>
      <span class="col4">
        column 4 content
      </span>
      <span class="col5">
        column 5 content some really long content to trigger scrolling just for the purpose
        of this example
      </span>
    </div>
  </div>
</div>

Preparation code output

left child
some content
other content
more content
right child
column 1 content column 2 content column 3 content column 4 content column 5 content some really long content to trigger scrolling just for the purpose of this example
column 1 content column 2 content column 3 content column 4 content column 5 content some really long content to trigger scrolling just for the purpose of this example
column 1 content column 2 content column 3 content column 4 content column 5 content some really long content to trigger scrolling just for the purpose of this example

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
$('.row').on('mouseenter', function(event) {
  var row = this.className.match(/row-[\d]+/);
  $('.' + row).addClass('hover');
});

$('.row').on('mouseleave', function(event) {
  $('.hover').removeClass('hover');
});
pending…
JavaScript
var rows = document.getElementsByClassName('row');
for (var i = 0; i < rows.length; i++) {
  rows[i].onmouseenter = function(event) {
    var row = this.className.match(/row-[\d]+/);
    var elems = document.getElementsByClassName(row[0]);
    for (var j = 0; j < elems.length; j++) {
      elems[j].className += " hover";
    }
  };

  rows[i].onmouseleave = function(event) {
    var hovers = document.getElementsByClassName('hover');
    var len = hovers.length;
    for (var j = 0; j < len; j++) {
      hovers[0].className = hovers[0].className.replace(/\shover(\s|$)/, '');
    }
  };
}
pending…
Hybrid
var rows = document.getElementsByClassName('row');
for (var i = 0; i < rows.length; i++) {
  rows[i].onmouseenter = function(event) {
    var row = this.className.match(/row-[\d]+/);
    $('.' + row[0]).addClass('hover');
  };

  rows[i].onmouseleave = function(event) {
    $('.hover').removeClass('hover');
  };
}
pending…
Using addEventListener
var rows = document.getElementsByClassName('row');
var mouseEnter = function(event) {
  var row = this.className.match(/row-[\d]+/);
  $('.' + row[0]).addClass('hover');
};
var mouseLeave = function(event) {
  $('.hover').removeClass('hover');
};

for (var i = 0; i < rows.length; i++) {
  rows[i].addEventListener('mouseenter', mouseEnter);
  rows[i].addEventListener('mouseleave', mouseLeave);
}
pending…
Using jQuery bind
var mouseEnter = function(event) {
  var row = this.className.match(/row-[\d]+/);
  $('.' + row[0]).addClass('hover');
};
var mouseLeave = function(event) {
  $('.hover').removeClass('hover');
};

$('.row').bind('mouseenter', mouseEnter);
$('.row').bind('mouseleave', mouseLeave);
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. Here’s a list of current revisions for this page:

0 comments

Add a comment