jquery - empty vs html (v11)

Revision 11 of this benchmark created on

Preparation HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<div id="foo">
<table>
<tbody>
<tr><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td></tr>
<tr><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td></tr>
<tr><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td></tr>
<tr><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td></tr>
<tr><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td></tr>
<tr><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td></tr>
<tr><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td></tr>
<tr><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td></tr>
<tr><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td></tr>
<tr><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td></tr>
<tr><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td></tr>
<tr><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td></tr>
<tr><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td></tr>
<tr><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td></tr>
<tr><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td></tr>
<tr><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td></tr>
<tr><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td></tr>
<tr><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td></tr>
<tr><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td></tr>
<tr><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td></tr>
<tr><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td></tr>
<tr><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td></tr>
<tr><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td></tr>
<tr><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td></tr>
<tr><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td></tr>
<tr><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td></tr>
<tr><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td></tr>
<tr><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td></tr>
<tr><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td></tr>
<tr><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td></tr>
<tr><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td></tr>
<tr><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td></tr>
<tr><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td></tr>
<tr><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td></tr>
<tr><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td></tr>
<tr><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td></tr>
<tr><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td></tr>
<tr><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td></tr>
<tr><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td></tr>
<tr><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td></tr>
<tr><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td></tr>
<tr><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td></tr>
<tr><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td></tr>
<tr><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td></tr>
<tr><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td></tr>
<tr><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td></tr>
<tr><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td></tr>
<tr><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td></tr>
<tr><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td></tr>
<tr><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td></tr>
</tbody>
</table>
</div>
<script>
  var foo = $('#foo');
  
  //http://devongovett.wordpress.com/2009/12/12/how-to-make-jquery-empty-over-10x-faster/
  jQuery.fn.removeAll = function() {
   this.each(function() {
    var newEl = this.cloneNode(false);
    this.parentNode.replaceChild(newEl, this);
  
    //Copy back events if they haven't been copied already by IE
    if (jQuery.support.noCloneEvent) {
     cloneCopyEvent($(this), $(newEl));
    }
   });
  };
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
innerHTML
foo[0].innerHTML = '';
ready
html
foo.html('');
ready
empty
foo.empty();
ready
removeAll
foo.removeAll();
ready

Revisions

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