addClass() v className

Benchmark created by Doug Avery on

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<style>
.one {
  border: 1px solid red;
}
.two {
  border: 1px solid green;
}
.three {
  background: red;
}
.four {
  background: green; 
}
</style>
<div id="testme">Hello!</div>
<script>
  var $testme = $('#testme');
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
addClass to classless
$testme.addClass('one');
$testme[0].className = '';
ready
className to classless
$testme[0].className = 'two';
$testme[0].className = '';
ready
addClass on existing class
$testme.addClass('three');
$testme[0].className = 'one';
ready
className on existing class
$testme[0].className += ' four';
$testme[0].className = 'two';
ready
(deleted)
true;
ready
(deleted)
true;
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.