append vs. innerHTML vs. fragment (v21)

Revision 21 of this benchmark created on

Preparation HTML

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

Setup

var s = [
  $('<a href="#" id="addButt"></a>'),
  $('<a href="#" id="horzButt"></a>'),
  $('<div class="divider"></div>'),
  $('<div id="layoutText">LAYOUT</div>'),
  $('<a href="#" class="vert-active" id="vertButt"></a>'),
  $('<a href="#" id="inspectButton"></a>'),
  $('<div id="inspectText">Inspect</div>'),
  $('<div class="presetPos" id="button">PRESETS</div>'),
  $('<div id="track"></div>')];
  
  var d = document.createElement('div');
  document.body.appendChild(d);

Teardown



            document.body.removeChild(d);

Test runner

Ready to run.

Testing in
TestOps/sec
jQuery append
$(d).append(s);
ready
innerHTML
d.innerHTML = s;
ready
my fragment method
var frag = document.createDocumentFragment();
var elements = [];

while(s.length) {
  var el = s.shift();
                
  frag.appendChild(el[0]);
  
}
d.appendChild(frag);
ready

Revisions

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