MeasureThat.net

Run results for: jQuery vs pure JS : html

innerHTML vs html

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 1745.8 Ops/sec
pure JS 4513.1 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:
 
var frag = document.createDocumentFragment();
for (var i=0; i<100; i++){
  var inDiv = document.createElement('span');
  inDiv.id="s_"+i;
  inDiv.innerHTML = 'bla';
  inDiv.className = 'myclass';
  frag.appendChild(inDiv);
}
document.body.appendChild(frag);
Tests:

  • jQuery

     
    $('span.myclass').each(function () {
      $(this).html('x');
    });

  • pure JS

     
    $('span.myclass').each(function () {
      this.innerHTML = 'y';
    });