Dom Manipulation - Js Templating vs programmatic jQuery (v8)

Revision 8 of this benchmark created on

Description

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

Preparation HTML

<script src="https://github.com/insin/DOMBuilder/raw/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

Revisions

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