Jquery vs native - selector and element style (v30)

Revision 30 of this benchmark created by DavidJCobb on

Preparation HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<ul class='first'>
<li class='foo'>
</li>
<li class='bar'>
</li>
</ul>

Setup

function hasClass(el, className){
  
  if (el.classList)
    el.classList.contains(className)
  else
    new RegExp('(^| )' + className + '( |$)', 'gi').test(el.className)
  
  }

Teardown



            $('.foo').css('background-color', 'transparent');
  $('.bar').css('background-color', 'transparent');

Test runner

Ready to run.

Testing in
TestOps/sec
jQuery: Filter
$('ul.first')
   .filter('.foo')
      .css('background-color', 'red')
.end()
   .filter('.bar')
      .css('background-color', 'green')
.end();
ready
Native: Filter (one pass)
var e = document.querySelector("ul.first");

for (var i = 0; i < e.length; ++i) {
   if(hasClass(e[i], 'foo'))
      e[i].style.backgroundColor = 'red';

   if(hasClass(e[i], 'bar'))
      e[i].style.backgroundColor = 'green';
}
ready
Native: Filter (two passes)
var elfoo = document.querySelector("ul.first .foo");
var elbar = document.querySelector("ul.first .bar");

for (var i = 0; i < elfoo.length; ++i) {
   elfoo[i].style.backgroundColor = 'red';
}

for (var i = 0; i < elbar.length; ++i) {
   elbar[i].style.backgroundColor = 'red';
}
ready
jQuery: Children
$('ul.first')
   .children('.foo')
      .css('background-color', 'red')
.end()
   .children('.bar')
      .css('background-color', 'green')
.end();
ready
Native: Children (relaxed)
var e = document.querySelector("ul.first");

for(var i = 0; i < e.length; ++i) {
   for(var j = 0; j < e[i].childNodes.length; ++j) {
      if(hasClass(e[i].childNodes[j], 'foo'))
         e[i].childNodes[j].style.backgroundColor = 'red';

      if(hasClass(e[i].childNodes[j], 'bar'))
         e[i].childNodes[j].style.backgroundColor = 'green';
   }
}
ready
Native: Children (micro-optimizations)
var e = document.querySelector("ul.first");
var eCount = e.length;

for(var i = 0; i < eCount; ++i) {
   var iNodes = e[i].childNodes;
   var iCount = iNodes.length;
   for(var j = 0; j < iCount; ++j) {
      if(hasClass(iNodes[j], 'foo'))
         iNodes[j].style.backgroundColor = 'red';

      if(hasClass(iNodes[j], 'bar'))
         iNodes[j].style.backgroundColor = 'green';
   }
}
ready

Revisions

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