dom inserting and templating

Benchmark created on

Description

results acquired via ajax requests need to be converted into lots of html. assuming we dont want to add node by node, the dom insertion can either be by creating a giant string, or by caching a detached dom element and cloning it.

Preparation HTML

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


<div id="test" style="display:none"> </div>
<script>
  function getFinalStr(arr, firstVal, restVal) {
   var s = '';
   for (var i = 0; i < arr.length; i++) {
    s += arr[i] + (i < arr.length - 1 ? (i === 0 ? firstVal : restVal) : '');
   }
   return s;
  }
  
  var outerTemplateStr = ['<div class="innerClass">', '</div><div class="someClass3">', '</div><div class="someClass4">', '</div>'],
      outerTemplateObj = $(outerTemplateStr.join('')),
      innerTemplateStr = ['<div class="someInnerClass">', '</div><div class="someInnerClass">', '</div>'],
      innerTemplateObj = $(innerTemplateStr.join('')),
      testDiv = $('#test');
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
giant string concatention and innerHTML
testDiv.html("");
var s = '';
for (var i = 0; i < 10; i++) {
 s += getFinalStr(outerTemplateStr, getFinalStr(innerTemplateStr, 'innerval', 'innerval'), 'val');
}
testDiv.html(s);
ready
append via clone
for (var i = 0; i < 10; i++) {

 var newDiv = outerTemplateObj.clone(),
     newInnerDiv = innerTemplateObj.clone();

 newInnerDiv.text('innerval');

 newDiv.text('val');
 //newDiv.first().append(newInnerDiv);
 newDiv.appendTo(testDiv);

}
ready

Revisions

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