removeClass vs native JS remove class

JavaScript performance comparison

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="blah" class="blah bleh hello glah row row-1">
  some content
</div>
<script>
Benchmark.prototype.setup = function() {
    var count = 1;
    var blah = document.getElementById('blah');
};
</script>

Preparation code output

some content

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
$('#blah').removeClass('row-' + count);
$('#blah').addClass('row-' + ++count);
pending…
JavaScript
blah.className = blah.className.replace('row-' + count, '')
blah.className += " row-" + ++count;
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:

1 comment

Jef commented :

Is this a legit test case? I can't tell... is there a faster way to do this in JavaScript?

Add a comment