MeasureThat.net

Run results for: jQuery each vs pure JS

Searching for tagName

Go to the benchmark
Run details:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36
Chrome 52
Mac OS X 10.11.6
Other
8 years ago
Test name Executions per second
jQuery 264876.5 Ops/sec
pure JS 507681.1 Ops/sec
jQuery DIV 180503.8 Ops/sec
pure JS DIV 98.3 Ops/sec
HTML Preparation code:
AخA
 
1
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
Script Preparation code:
 
//Add 100,000 elements
var frag = document.createDocumentFragment();
for (var i=0; i<10; i++){
  var outSection = document.createElement('section');
  outSection.id="secid_"+i;
  for (var j=0; j<100; j++){
    var midDiv = document.createElement('div');
    midDiv.id="mdivid_"+j;
    for (var k=0; k<100; k++){
      var inDiv = document.createElement('div');
      inDiv.id="divid_"+k;
      midDiv.appendChild(inDiv);
    }
    outSection.appendChild(midDiv)
  }
  frag.appendChild(outSection);
}
document.body.appendChild(frag);
Tests:

  • jQuery

     
    var a = 0;
    $('section').each(function () {
      a++;
    });

  • pure JS

    ​x
     
    function forEachElement(selector, fn) {
      var elements = document.getElementsByTagName(selector);
      for (var i = 0; i < elements.length; i++) fn(elements[i]);
    }
    ​
    var a = 0;
    forEachElement('section', function (el){
      a++;
    });

  • jQuery DIV

     
    var a = 0;
    $('section').each(function () {
      a++;
    });

  • pure JS DIV

     
    function forEachElement(selector, fn) {
      var elements = document.getElementsByTagName(selector);
      for (var i = 0; i < elements.length; i++) fn(elements[i]);
    }
    ​
    var a = 0;
    forEachElement('div', function (el){
      a++;
    });