Document fragment - clone

JavaScript performance comparison

Revision 47 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=20; i--;) frag.appendChild(document.createElement("div"));

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

var e = document.getElementsByClassName("container");
for(var i=e.length; i--;) {
  for(var j=20; j--;) 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