jQuery append html (v28)

Revision 28 of this benchmark created on

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div id="mydiv" style="display:none"></div>

<script>
  var html = "<div>some<span>things</span><br>never<div>change</div></div>";
  var html2 = "some<span>things</span><br>never<div>change</div>";
  var count = 50;
  
  var uuid = 1000000;
  function fragment() {
    return "<div data-view-id='" + uuid++ + "'>" + html2 + "</div>";
  }

  function cleanup() {
   $("#mydiv").html("");
  }

</script>

Test runner

Ready to run.

Testing in
TestOps/sec
simple append
cleanup();
for (var i = count; i--;) {
 $("#mydiv").append(fragment());
}

 
ready
cached el$
cleanup();
var el$ = $("#mydiv")
for (var i = count; i--;) {
  el$.append(fragment())
}
ready
batch
cleanup();
var allhtml = ''
for (var i = count; i--;) {
  allhtml += fragment();
}

$("#mydiv").append(allhtml)
ready
nonsense v3 new elem
cleanup();
for (var i = count; i--;) {
 var frag = document.createElement('div');
 frag.id = uuid++;
 frag.innerHTML = html2;
 $("#mydiv").append(frag);
}
ready
cleanup();
for (var i = count; i--;) {
  $(document.getElementById("mydiv")).append(fragment());
}
ready
cleanup();
for (var i = count; i--;) {
  $(document.querySelector("#mydiv")).append(fragment());
}
ready

Revisions

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