Document fragment

JavaScript performance comparison

Revision 46 of this test case created by wmzy

Preparation code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<!-- there are 10 containers here -->
<div class='container'></div>
<div class='container'></div>
<div class='container'></div>
<div class='container'></div>
<div class='container'></div>
<div class='container'></div>
<div class='container'></div>
<div class='container'></div>
<div class='container'></div>
<div class='container'></div>

      
<script>
Benchmark.prototype.teardown = function() {
  $('#someElement').html( '' );

};
</script>

Preparation code output

<!-- there are 10 containers here --> <div class='container'></div> <div class='container'></div> <div class='container'></div> <div class='container'></div> <div class='container'></div> <div class='container'></div> <div class='container'></div> <div class='container'></div> <div class='container'></div> <div class='container'></div>

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
Fragment
var frag = document.createDocumentFragment();
for(var i=2; i--;) frag.appendChild(document.createElement("div"));

var e = document.getElementsByClassName("container");
for(var i=e.length; i--;) e[i].appendChild(frag.cloneNode(true));
pending…
No Fragment
var elements = [];
for(var i=2; i--;) elements.push(document.createElement("div"));

var e = document.getElementsByClassName("container");
for(var i=e.length; i--;) {
  for(var j=2; j--;) e[i].appendChild(elements[j].cloneNode(true));
}
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