Dom Manipulation - Js Templating vs programmatic jQuery (v34)

Revision 34 of this benchmark created by Shane Kim on

Description

What is faster, generating elements on the fly using jQuery appends and generator or using javascript templates.

Preparation HTML

<script src="http://rawgithub.com/insin/DOMBuilder/master/dist/DOMBuilder.template.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.1.7/underscore-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<!-- The Javascript template - using underscore.js -->
<script type="text/template" id="combo_template">
    <select> 
    <% _.each(values, function(value) { %>
        <option><%= value %></option>
    <% }); %>
    </select >
</script>

<div id="testcontainer" style="display: none;"></div>
<script>
  $testContainer = $('#testContainer');
  
  var values = ["SOMETHING", "THOMAS","THOMAS","THOMAS","THOMAS","THOMAS","THOMAS","THOMAS","THOMAS","THOMAS","THOMAS","THOMAS","THOMAS","THOMAS","THOMAS","THOMAS","THOMAS","THOMAS","THOMAS","THOMAS","THOMAS","THOMAS","THOMAS"];
  
  var underscoreTemplate = $("#combo_template").html()
    , domBuilderTemplate;
  
  with (DOMBuilder.template) {
  
  domBuilderTemplate = $template('selectTemplate'
  , SELECT(
      $for('value in values'
      , OPTION('{{ value }}')
      )
    )
  );
  
  }
  
  var dom = DOMBuilder.dom
    , html = DOMBuilder.html;
</script>

Teardown


    $testContainer.empty();

Test runner

Ready to run.

Testing in
TestOps/sec
Javascript Templates
$testContainer.append(_.template(underscoreTemplate , {
  values: values
}));
ready
jQuery Append
var combo = $("<select/>");
var blah = values.length;
for( var i = 0; i<blah;i++){
  var value = $("<option/>");
value.text(values[i]);
combo.append(value);
}
$testContainer.append(combo);
ready
Stringed DOM
var HTML = '<select>', blah = values.length;
for( var i = 0; i<blah;i++){
HTML += '<option>' + values[i] + '</option>';
}
HTML += '</select>';
$testContainer.append(HTML);

// Fast but too messy imo
ready
Array DOM
var HTML = ['<select>'];
for (var i = 0, len = values.length; i < len; i++) {
    HTML.push('<option>');
    HTML.push(values[i]);
    HTML.push('</option>');
}
HTML.push('</select>');
$testContainer.append(HTML.join(''));

// If you're supporting older versions IE, array join is more efficient than
// string concatenation, however the difference is marginal is modern browsers
ready
DOMBuilder Template (DOM)
DOMBuilder.mode = 'dom'
$testContainer.append(
  domBuilderTemplate.render({values: values})
);
ready
DOMBuilder Template (HTML)
DOMBuilder.mode = 'html'
$testContainer.append(
  domBuilderTemplate.render({values: values}).toString()
);
ready
DOMBuilder DOM
$testContainer.append(dom.SELECT(dom.OPTION.map(values)))
ready
DOMBuilder HTML
$testContainer.append(html.SELECT(html.OPTION.map(values)).toString())
ready
DocumentFragment
var optTag;
var docFrag = document.createDocumentFragment();
var selTag = document.createElement('select');

docFrag.appendChild(selTag);

for (var i=0,len = values.length; i<len; i++) {
  optTag = document.createElement('option');
  optTag.value = values[i];
}

$testContainer.append(docFrag);
ready

Revisions

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