Render in memory vs direct DOM insertion

JavaScript performance comparison

Revision 2 of this test case created by RobG

Preparation code

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

    

Preparation code output

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
Render in memory
var i = 20;
var aHTML = [];
while (i--) {
  aHTML.push("<div>a new div</div>");
}
var sHTML = aHTML.join("");
var domElmt = $(sHTML);
$('body').append(domElmt);
pending…
Direct DOM insertion
var i = 20;
while (i--) {
    $('body').append("<div>a new div</div>");
}
pending…
DOM cloning
var i = 20;
var div = document.createElement('div');
var frag = document.createDocumentFragment();
while (i--) {
  frag.appendChild(div.cloneNode(false));
}
document.body.appendChild(frag);
pending…

Compare results of other browsers

Revisions

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

0 Comments