Jquery vs native - selector and element style

JavaScript performance comparison

Test case created by

Preparation code

<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>
      
<script>
Benchmark.prototype.setup = function() {
  function hasClass(el, className){
  
  if (el.classList)
    el.classList.contains(className)
  else
    new RegExp('(^| )' + className + '( |$)', 'gi').test(el.className)
  
  }

};

Benchmark.prototype.teardown = function() {
  $('.foo').css('background-color', 'transparent');
  $('.bar').css('background-color', 'transparent');

};
</script>

Preparation code output

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

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
$('ul.first')
   .find('.foo')
      .css('background-color', 'red')
.end()
   .find('.bar')
      .css('background-color', 'green')
.end();
pending…
native javascript
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';
}
pending…
native javascript two
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';
}
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.

0 Comments