removeClass vs native JS remove class

JavaScript performance comparison

Revision 6 of this test case created by

Preparation code

<script src="https://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

<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>

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
jQuery
$('.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].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…
Javascript split/join
Element.prototype.removeClass = function(cls) {
	if(!this.hasClass(name)) {return this;}
	var classes = this.className.split(/\s/);
	var index = classes.indexOf(name);
	if(index!==-1){classes.splice(index, 1);}
	classes.filter(function(e){return e;});
	this.className = classes.join(" ");
	return this;
};

var rows = document.getElementsByClassName('row');
for (var i = 0; i < rows.length; i++) {
  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].removeClass('hover');
    }
  };
}
pending…
Native classList remove
var rows = document.getElementsByClassName('row');
for (var i = 0; i < rows.length; i++) {
  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].classList.remove("hover");
    }
  };
}
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

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