jQuery addClass(...) vs attr('class', ...) VS PURE DOM (v6)

Revision 6 of this benchmark created on

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<ol>
  <li class="old">
    Item
  </li>
  <li class="old">
    Item
  </li>
  <li class="old">
    Item
  </li>
  <li class="old">
    Item
  </li>
  <li class="old">
    Item
  </li>
  <li class="old">
    Item
  </li>
  <li class="old">
    Item
  </li>
  <li class="old">
    Item
  </li>
</ol>

Test runner

Ready to run.

Testing in
TestOps/sec
addClass+removeClass
var $li = $('<li/>').removeClass('old').addClass('test');
ready
attr class
var $li = $('<li/>').attr('class', 'test');
ready
{ "class": foo }
var $li = $('<li/>', { "class": "test" });
ready
$("<li class='test'>")
var $li = $("<li class='test'>")
ready
PureDom
var li =document.createElement('li');
li.className='test'
ready

Revisions

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