Another template benchmark

Benchmark created on December 31, 2010

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script src="http://github.com/trix/nano/raw/master/jquery.nano.js" type="text/javascript"></script>

<script>
  var tmpl = '<div class="head"><span class="left">{left}</span><span class="right">{right}</span><span class="left">{left}</span><span class="right">{right}</span></div>';
  
  var data = {
   left: "abracadabra",
   right: "asfpqwer qwoe rk"
  };
  
  function pico(template, data) {
   return template.replace(/\{(\w*)\}/g, function(str, key) {
    return data[key];
   });
  }
  
  function pic(template) {
   template = template.replace(/[\n'\\]/g, '\\$&');
   template = template.replace(/\{(\w*)\}/g, function(str, key) {
    return "'+d['" + key + "']+'";
   });
   return new Function("d", "return '" + template + "'");
  }
  
  var tmpl_pic = pic(tmpl);
</script>

Test runner

var html = $.nano(tmpl, data);

var html = pico(tmpl, data);

var html = tmpl_pic(data);

var html = '<div class="head"><span class="left">' + data['left'] + '</span><span class="right">' + data['right'] + '</span><span class="left">' + data['left'] + '</span><span class="right">' + data['right'] + '</span></div>';

var html = ['<div class="head"><span class="left">', data['left'], '</span><span class="right">', data['right'], '</span><span class="left">', data['left'], '</span><span class="right">', data['right'], '</span></div>'].join('');

with(data) {
 var html = '<div class="head"><span class="left">' + left + '</span><span class="right">' + right + '</span><span class="left">' + left + '</span><span class="right">' + right + '</span></div>';
}

Revisions

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

• Revision 1: published on December 31, 2010