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 remove vs hide vs empty vs. detach (v22)

Revision 22 of this benchmark created by Chele Loco on February 11, 2013

Preparation HTML

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

<div id="empty-me"><div class="content">Shit</div>
<div class="content">Shit</div>
<div class="content">Shit</div>
<div class="content">Shit</div>
<div class="content">Shit</div>
<div class="content">Shit</div>
<div class="content">Shit</div>
<div class="content">Shit</div>
<div class="content">Shit</div>
<div class="content">Shit</div>
<div class="content">Shit</div>
<div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div></div>
<div id="remove-me"><div class="content">Shit</div>
<div class="content">Shit</div>
<div class="content">Shit</div>
<div class="content">Shit</div>
<div class="content">Shit</div>
<div class="content">Shit</div>
<div class="content">Shit</div>
<div class="content">Shit</div>
<div class="content">Shit</div>
<div class="content">Shit</div>
<div class="content">Shit</div>
<div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div></div>
<div id="hide-me"><div class="content">Shit</div>
<div class="content">Shit</div>
<div class="content">Shit</div>
<div class="content">Shit</div>
<div class="content">Shit</div>
<div class="content">Shit</div>
<div class="content">Shit</div>
<div class="content">Shit</div>
<div class="content">Shit</div>
<div class="content">Shit</div>
<div class="content">Shit</div>
<div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div></div>
<div id="detach-me"><div class="content">Shit</div>
<div class="content">Shit</div>
<div class="content">Shit</div>
<div class="content">Shit</div>
<div class="content">Shit</div>
<div class="content">Shit</div>
<div class="content">Shit</div>
<div class="content">Shit</div>
<div class="content">Shit</div>
<div class="content">Shit</div>
<div class="content">Shit</div>
<div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div></div>
<div id="attr-me"><div class="content">Shit</div>
<div class="content">Shit</div>
<div class="content">Shit</div>
<div class="content">Shit</div>
<div class="content">Shit</div>
<div class="content">Shit</div>
<div class="content">Shit</div>
<div class="content">Shit</div>
<div class="content">Shit</div>
<div class="content">Shit</div>
<div class="content">Shit</div>
<div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div><div class="content">Shit</div></div>

<script>
  function init() {
   // The magic init() function will be executed once before every test
   // Still not perfect, but definitely better
   $('<div id="remove-me" />').appendTo('body');
   $('#hide-me').show();
   if (window.$detached != null) {
    window.$detached.appendTo('body');
   }
   $('#hide-me').attr('style', 'display:block;');
  }
</script>

Test runner

Ready to run.

Testing in
Test		Ops/sec
.remove()	`window.$removed = $('#remove-me').remove();`	ready
.hide()	`window.$hidden = $('#hide-me').hide();`	ready
.detach()	`window.$detached = $('#detach-me').detach();`	ready
.empty()	`window.$empty = $('#empty-me').empty();`	ready
.remove()#2	`window.$lt = $('#remove-me:lt(10)').remove();`	ready

Revisions

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

Revision 1: published by Alex Kahn on October 8, 2010
Revision 2: published by Alex Kahn on October 12, 2010
Revision 3: published by Mathias Bynens on October 12, 2010
Revision 4: published by tenbits on May 11, 2011
Revision 5: published on June 2, 2011
Revision 6: published by peke on July 25, 2011
Revision 7: published on August 25, 2011
Revision 9: published on September 1, 2011
Revision 10: published on June 19, 2012
Revision 12: published on July 19, 2012
Revision 14: published on July 26, 2012
Revision 15: published by fghfgh on September 23, 2012
Revision 16: published on September 26, 2012
Revision 17: published on October 2, 2012
Revision 18: published on October 2, 2012
Revision 20: published by Felipo Antonoff on December 27, 2012
Revision 21: published on February 9, 2013
Revision 22: published by Chele Loco on February 11, 2013
Revision 23: published by Don on February 26, 2013
Revision 24: published on March 27, 2013
Revision 25: published on April 24, 2013
Revision 27: published on July 6, 2013
Revision 28: published on August 6, 2013
Revision 29: published on August 6, 2013
Revision 30: published on September 13, 2013
Revision 33: published by Schalk Neethling on November 5, 2013
Revision 34: published by gotomanners on November 12, 2013
Revision 35: published on November 15, 2013
Revision 36: published on November 15, 2013
Revision 37: published on November 15, 2013
Revision 38: published on December 11, 2013
Revision 39: published by Heavensrevenge on December 31, 2013
Revision 40: published on January 1, 2014
Revision 41: published on January 3, 2014
Revision 42: published on January 8, 2014
Revision 43: published on January 24, 2014
Revision 44: published by agm on May 15, 2014
Revision 45: published on June 15, 2014
Revision 46: published on August 6, 2014
Revision 47: published on August 8, 2014
Revision 48: published by Dan on October 17, 2014
Revision 49: published on November 1, 2014
Revision 50: published on May 6, 2015
Revision 51: published by Anu on June 19, 2015