classList vs jQuery

JavaScript performance comparison

Test case created by Jeremias Menichelli

Preparation code

<div id="test-element"></div>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>


      
<script>
Benchmark.prototype.setup = function() {
  var jElement = $('#test-element');
  var htmlElement = document.querySelector('#test-element')

};
</script>

Preparation code output

<div id="test-element"></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
jElement.addClass('first-class');
jElement.hasClass('first-class');
jElement.toggleClass('first-class');
jElement.addClass('another-class');
jElement.removeClass('another-class');
pending…
classList
htmlElement.classList.add('first-class');
htmlElement.classList.contains('first-class');
htmlElement.classList.toggle('first-class');
htmlElement.classList.add('another-class');
htmlElement.classList.remove('another-class');
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.

3 Comments

fuktskada commented :

Interesting to see ... thank you it's well done :)