jsPerf.app is an online JavaScript performance benchmark test runner & jsperf.com mirror. It is a complete rewrite in homage to the once excellent jsperf.com now with hopefully a more modern & maintainable codebase.

jsperf.com URLs are mirrored at the same path, e.g:

https://jsperf.com/negative-modulo/2

Can be accessed at:

https://jsperf.app/negative-modulo/2

jquery html vs empty vs innerHTML (v19)

Revision 19 of this benchmark created by Joshua Piccari on April 22, 2014

Preparation HTML

<ul id="my_list">
  <p>
    aaa
    <span>
      bbb
    </span>
  </p>
  <p>
    aaa
    <span>
      bbb
    </span>
  </p>
  <p>
    aaa
    <span>
      bbb
    </span>
  </p>
  <p>
    aaa
    <span>
      bbb
    </span>
  </p>
  <p>
    aaa
    <span>
      bbb
    </span>
  </p>
  <p>
    aaa
    <span>
      bbb
    </span>
  </p>
  <p>
    aaa
    <span>
      bbb
    </span>
  </p>
  <p>
    aaa
    <span>
      bbb
    </span>
  </p>
  <p>
    aaa
    <span>
      bbb
    </span>
  </p>
  <p>
    aaa
    <span>
      bbb
    </span>
  </p>
  <p>
    aaa
    <span>
      bbb
    </span>
  </p>
  <p>
    aaa
    <span>
      bbb
    </span>
  </p>
  <p>
    aaa
    <span>
      bbb
    </span>
  </p>
  <p>
    aaa
    <span>
      bbb
    </span>
  </p>
  <p>
    aaa
    <span>
      bbb
    </span>
  </p>
  <p>
    aaa
    <span>
      bbb
    </span>
  </p>
  <p>
    aaa
    <span>
      bbb
    </span>
  </p>
  <p>
    aaa
    <span>
      bbb
    </span>
  </p>
  <p>
    aaa
    <span>
      bbb
    </span>
  </p>
  <p>
    aaa
    <span>
      bbb
    </span>
  </p>
  <p>
    aaa
    <span>
      bbb
    </span>
  </p>
  <p>
    aaa
    <span>
      bbb
    </span>
  </p>
  <p>
    aaa
    <span>
      bbb
    </span>
  </p>
  <p>
    aaa
    <span>
      bbb
    </span>
  </p>
  <p>
    aaa
    <span>
      bbb
    </span>
  </p>
  <p>
    aaa
    <span>
      bbb
    </span>
  </p>
  <p>
    aaa
    <span>
      bbb
    </span>
  </p>
  <p>
    aaa
    <span>
      bbb
    </span>
  </p>
  <p>
    aaa
    <span>
      bbb
    </span>
  </p>
  <p>
    aaa
    <span>
      bbb
    </span>
  </p>
  <p>
    aaa
    <span>
      bbb
    </span>
  </p>
  <p>
    aaa
    <span>
      bbb
    </span>
  </p>
  <p>
    aaa
    <span>
      bbb
    </span>
  </p>
  <p>
    aaa
    <span>
      bbb
    </span>
  </p>
  <p>
    aaa
    <span>
      bbb
    </span>
  </p>
  <p>
    aaa
    <span>
      bbb
    </span>
  </p>
  <p>
    aaa
    <span>
      bbb
    </span>
  </p>
  <p>
    aaa
    <span>
      bbb
    </span>
  </p>
  <p>
    aaa
    <span>
      bbb
    </span>
  </p>
  <p>
    aaa
    <span>
      bbb
    </span>
  </p>
  <p>
    aaa
    <span>
      bbb
    </span>
  </p>
  <p>
    aaa
    <span>
      bbb
    </span>
  </p>
  <p>
    aaa
    <span>
      bbb
    </span>
  </p>
  <p>
    aaa
    <span>
      bbb
    </span>
  </p>
  <p>
    aaa
    <span>
      bbb
    </span>
  </p>
  <p>
    aaa
    <span>
      bbb
    </span>
  </p>
  <p>
    aaa
    <span>
      bbb
    </span>
  </p>
  <p>
    aaa
    <span>
      bbb
    </span>
  </p>
  <p>
    aaa
    <span>
      bbb
    </span>
  </p>
  <p>
    aaa
    <span>
      bbb
    </span>
  </p>
  <p>
    aaa
    <span>
      bbb
    </span>
  </p>
  <p>
    aaa
    <span>
      bbb
    </span>
  </p>
  <p>
    aaa
    <span>
      bbb
    </span>
  </p>
  <p>
    aaa
    <span>
      bbb
    </span>
  </p>
  <p>
    aaa
    <span>
      bbb
    </span>
  </p>
  <p>
    aaa
    <span>
      bbb
    </span>
  </p>
  <p>
    aaa
    <span>
      bbb
    </span>
  </p>
  <p>
    aaa
    <span>
      bbb
    </span>
  </p>
  <p>
    aaa
    <span>
      bbb
    </span>
  </p>
  <p>
    aaa
    <span>
      bbb
    </span>
  </p>
  <p>
    aaa
    <span>
      bbb
    </span>
  </p>
  <p>
    aaa
    <span>
      bbb
    </span>
  </p>
  <p>
    aaa
    <span>
      bbb
    </span>
  </p>
  <p>
    aaa
    <span>
      bbb
    </span>
  </p>
  <p>
    aaa
    <span>
      bbb
    </span>
  </p>
  <p>
    aaa
    <span>
      bbb
    </span>
  </p>
  <p>
    aaa
    <span>
      bbb
    </span>
  </p>
  <p>
    aaa
    <span>
      bbb
    </span>
  </p>
  <p>
    aaa
    <span>
      bbb
    </span>
  </p>
  <p>
    aaa
    <span>
      bbb
    </span>
  </p>
  <p>
    aaa
    <span>
      bbb
    </span>
  </p>
  <p>
    aaa
    <span>
      bbb
    </span>
  </p>
  <p>
    aaa
    <span>
      bbb
    </span>
  </p>
  <p>
    aaa
    <span>
      bbb
    </span>
  </p>
  <p>
    aaa
    <span>
      bbb
    </span>
  </p>
  <p>
    aaa
    <span>
      bbb
    </span>
  </p>
  <p>
    aaa
    <span>
      bbb
    </span>
  </p>
  <p>
    aaa
    <span>
      bbb
    </span>
  </p>
  <p>
    aaa
    <span>
      bbb
    </span>
  </p>
  <p>
    aaa
    <span>
      bbb
    </span>
  </p>
  <p>
    aaa
    <span>
      bbb
    </span>
  </p>
  <p>
    aaa
    <span>
      bbb
    </span>
  </p>
  <p>
    aaa
    <span>
      bbb
    </span>
  </p>
  <p>
    aaa
    <span>
      bbb
    </span>
  </p>
  <p>
    aaa
    <span>
      bbb
    </span>
  </p>
  <p>
    aaa
    <span>
      bbb
    </span>
  </p>
  <p>
    aaa
    <span>
      bbb
    </span>
  </p>
  <p>
    aaa
    <span>
      bbb
    </span>
  </p>
  <p>
    aaa
    <span>
      bbb
    </span>
  </p>
  <p>
    aaa
    <span>
      bbb
    </span>
  </p>
  <p>
    aaa
    <span>
      bbb
    </span>
  </p>
  <p>
    aaa
    <span>
      bbb
    </span>
  </p>
  <p>
    aaa
    <span>
      bbb
    </span>
  </p>
  <p>
    aaa
    <span>
      bbb
    </span>
  </p>
  <p>
    aaa
    <span>
      bbb
    </span>
  </p>
  <p>
    aaa
    <span>
      bbb
    </span>
  </p>
  <p>
    aaa
    <span>
      bbb
    </span>
  </p>
  <p>
    aaa
    <span>
      bbb
    </span>
  </p>
  <p>
    aaa
    <span>
      bbb
    </span>
  </p>
  <p>
    aaa
    <span>
      bbb
    </span>
  </p>
  <p>
    aaa
    <span>
      bbb
    </span>
  </p>
  <p>
    aaa
    <span>
      bbb
    </span>
  </p>
  <p>
    aaa
    <span>
      bbb
    </span>
  </p>
  <p>
    aaa
    <span>
      bbb
    </span>
  </p>
  <p>
    aaa
    <span>
      bbb
    </span>
  </p>
  <p>
    aaa
    <span>
      bbb
    </span>
  </p>
</ul>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<script>
  $(function() {
    var i = 0,
        $ul = $('#my_list'),
        $li = $('<li />').html('list item');

    while (i < 100) {
      $ul.append($li.clone());
      i++;
    }
  });
</script>

Setup

var elem = document.getElementById('my_list'),
    $elem = $(elem);

Test runner

Ready to run.

Testing in
Test		Ops/sec
innerHTML	`elem.innerHTML = '';`	ready
jquery html	`$elem.html('');`	ready
jquery empty	`$elem.empty();`	ready

Revisions

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

Revision 1: published by Bryan Blakey on April 25, 2011
Revision 2: published by Gildas on April 26, 2011
Revision 3: published by mark on January 25, 2012
Revision 4: published on July 11, 2012
Revision 6: published on October 8, 2012
Revision 8: published on November 22, 2012
Revision 9: published by Marcin on March 20, 2013
Revision 10: published by Marcin on July 12, 2013
Revision 11: published by Marcin on July 12, 2013
Revision 13: published on September 17, 2013
Revision 14: published on December 24, 2013
Revision 15: published by Heavensrevenge on December 28, 2013
Revision 16: published by Philipp Kyeck on January 10, 2014
Revision 17: published on January 15, 2014
Revision 18: published by Heavensrevenge on January 16, 2014
Revision 19: published by Joshua Piccari on April 22, 2014
Revision 20: published on July 19, 2014