performance comparison between setting class or setting attribute

Benchmark created on

Description

test

Preparation HTML

<div id="elem" class="one" data-attr="true"></div><script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Setup

var elem = $('#elem');

Test runner

Ready to run.

Testing in
TestOps/sec
add/remove class
if (elem.hasClass('one')) {
  elem.addClass('two');
  elem.removeClass('one');
} else {
  elem.addClass('one');
  elem.removeClass('two');
}
ready
change/get attribute
if (elem.attr('data-attr') === "true") {
  elem.attr('data-attr', 'false');
} else {
  elem.attr('data-attr', 'true');
}
ready

Revisions

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