jQuery appending in-memory element vs in-memory string

Benchmark created by Aaron Wood on

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div id="append-in-memory"></div>
<div id="html-in-memory"></div>

Teardown


    $("#append-in-memory").empty();
    $("#html-in-memory").empty();

Test runner

Ready to run.

Testing in
TestOps/sec
append() to in-memory element
var div = $("<div>");
div
  .append($("<div>"))
  .append($("<div>"))
  .append($("<div>"))
  .append($("<div>"))
  .append($("<div>"));
$("#append-in-memory").append(div);
ready
append() in-memory html string
var html = "<div>";
html += "<div></div>";
html += "<div></div>";
html += "<div></div>";
html += "<div></div>";
html += "<div></div>";
html += "</div>";
$("#html-in-memory").append(html);
ready
html() in-memory element
var div = $("<div>");
div
  .append($("<div>"))
  .append($("<div>"))
  .append($("<div>"))
  .append($("<div>"))
  .append($("<div>"));
$("#append-in-memory").html(div);
ready
html() in-memory html string
var html = "<div>";
html += "<div></div>";
html += "<div></div>";
html += "<div></div>";
html += "<div></div>";
html += "<div></div>";
html += "</div>";
$("#html-in-memory").html(html);
ready

Revisions

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

  • Revision 1: published by Aaron Wood on