classList Remove vs jquery

JavaScript performance comparison

Test case created by Anonymous

Preparation code

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

<style>
.item{
  background: green;
  color: red;
}
.item.selected{
  background: black;
  color: white;
}
</style>
<div class="list">
  <div class="item selected">Text</div>
  <div class="item selected">Text</div>
  <div class="item selected">Text</div>
  <div class="item selected">Text</div>
  <div class="item">Text</div>
  <div class="item">Text</div>
  <div class="item">Text</div>
  <div class="item">Text</div>
  <div class="item">Text</div>
  <div class="item">Text</div>
  <div class="item">Text</div>
  <div class="item">Text</div>
  <div class="item">Text</div>
  <div class="item">Text</div>
  <div class="item">Text</div>
  <div class="item">Text</div>
  <div class="item">Text</div>
  <div class="item">Text</div>
  <div class="item">Text</div>
  <div class="item">Text</div>
  <div class="item">Text</div>
  <div class="item">Text</div>
  <div class="item">Text</div>
  <div class="item">Text</div>
  <div class="item">Text</div>
  <div class="item">Text</div>
  <div class="item">Text</div>
  <div class="item">Text</div>
  <div class="item">Text</div>
  <div class="item">Text</div>
  <div class="item">Text</div>
  <div class="item">Text</div>
  <div class="item">Text</div>
  <div class="item">Text</div>
  <div class="item">Text</div>
  <div class="item">Text</div>
  <div class="item">Text</div>
  <div class="item">Text</div>
  <div class="item">Text</div>
  <div class="item">Text</div>
  <div class="item">Text</div>
  <div class="item">Text</div>
  <div class="item">Text</div>
  <div class="item">Text</div>
  <div class="item">Text</div>
  <div class="item">Text</div>
  <div class="item">Text</div>
  <div class="item">Text</div>
  <div class="item">Text</div>
  <div class="item">Text</div>
  <div class="item">Text</div>
  <div class="item">Text</div>
  <div class="item">Text</div>
  <div class="item">Text</div>
</div>
      
<script>
Benchmark.prototype.setup = function() {
  $(".item").slice(0,4).addClass('selected');
  var $items = $(".item");
  var items = document.getElementsByClassName('item');
  var $selected = $(".selected");
  var selected = document.getElementsByClassName('selected');

};
</script>

Preparation code output

<style> .item{ background: green; color: red; } .item.selected{ background: black; color: white; } </style> <div class="list"> <div class="item selected">Text</div> <div class="item selected">Text</div> <div class="item selected">Text</div> <div class="item selected">Text</div> <div class="item">Text</div> <div class="item">Text</div> <div class="item">Text</div> <div class="item">Text</div> <div class="item">Text</div> <div class="item">Text</div> <div class="item">Text</div> <div class="item">Text</div> <div class="item">Text</div> <div class="item">Text</div> <div class="item">Text</div> <div class="item">Text</div> <div class="item">Text</div> <div class="item">Text</div> <div class="item">Text</div> <div class="item">Text</div> <div class="item">Text</div> <div class="item">Text</div> <div class="item">Text</div> <div class="item">Text</div> <div class="item">Text</div> <div class="item">Text</div> <div class="item">Text</div> <div class="item">Text</div> <div class="item">Text</div> <div class="item">Text</div> <div class="item">Text</div> <div class="item">Text</div> <div class="item">Text</div> <div class="item">Text</div> <div class="item">Text</div> <div class="item">Text</div> <div class="item">Text</div> <div class="item">Text</div> <div class="item">Text</div> <div class="item">Text</div> <div class="item">Text</div> <div class="item">Text</div> <div class="item">Text</div> <div class="item">Text</div> <div class="item">Text</div> <div class="item">Text</div> <div class="item">Text</div> <div class="item">Text</div> <div class="item">Text</div> <div class="item">Text</div> <div class="item">Text</div> <div class="item">Text</div> <div class="item">Text</div> <div class="item">Text</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 removeClass with better selector (uncached)
// Why does this have better performance than above?
$('.selected').removeClass('selected')
var offsetTop = items[0].offsetTop;
pending…
Classlist with better selector
for(var i = 0; i < selected.length; i++){
  selected[i].classList.remove('selected')
}
var offsetTop = items[0].offsetTop;
pending…
Classlist
for(var i = 0; i < items.length; i++){
  items[i].classList.remove('selected');
}
var offsetTop = items[0].offsetTop;
window.foo = offsetTop;
pending…
jQuery removeClass
$items.removeClass('selected');
var offsetTop = items[0].offsetTop;
pending…
jQuery removeClass with hasClass
$items.each(function(){
  if($(this).hasClass('selected')) $(this).removeClass('selected');
});
var offsetTop = items[0].offsetTop;
pending…
jQuery removeClass with better selector (cached)
$selected.removeClass('selected')
var offsetTop = items[0].offsetTop;
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.

1 Comment

ssafejava commented :

Bizarre webkit behavior on the uncached jQuery selector, not present in FF though.

Also seeing odd performance in Firefox - the hasClass() version is much slower than wholesale removeClass().

I think this cements home that jQuery should really be using classList when possible. Using hasClass() is a good way to improve performance on webkit but it's obviously unreliable. Of course, querying for the class directly provides a big boost, which is even bigger when using classList.

Text
Text
Text
Text
Text
Text
Text
Text
Text
Text
Text
Text
Text
Text
Text
Text
Text
Text
Text
Text
Text
Text
Text
Text
Text
Text
Text
Text
Text
Text
Text
Text
Text
Text
Text
Text
Text
Text
Text
Text
Text
Text
Text
Text
Text
Text
Text
Text
Text
Text
Text
Text
Text
Text