JavaScript template language shootoff

JavaScript performance comparison

Revision 710 of this test case created by

Preparation code

<script src="http://documentcloud.github.com/underscore/underscore.js"></script>

<script src="http://gist.github.com/raw/550881/29bb186167079c0b33ab6e9d50d779f37860cfa4/micro.js"></script>

<script src="https://github.com/QLeelulu/nTenjin/raw/master/nTenjin.js"></script>

<!--script src="http://gist.github.com/raw/860205/8444586913ab249c619671b8f5054fc92dddf643/micro2.js"></script-->

<!--script src="http://gist.github.com/raw/860240/cd98cacbdeee7eb2cfb2ca3ca76638dae2a5b1af/micro3.js"></script-->

<script src="http://github.com/olado/doT/raw/master/doT.js"></script>

<script src="http://github.com/olado/doT/raw/master/doU.js"></script>
<script>
  (function() {
   var cache = {};
  
   this.utmpl = function tmpl(str, mode, dt) {
    // Figure out if we're getting a template, or if we need to
    // load the template - and be sure to cache the result.
    var fn = !/\W/.test(str) ? cache[str] = cache[str] || tmpl(document.getElementById(str).innerHTML) :
  
    // Generate a reusable function that will serve as a template
    // generator (and which will be cached).
    new Function("dt", mode ?
    // mode = true: Array Join Microtemplate
    "var p=[]; p.push('" + str.replace(/[\r\t\n]/g, " ").replace(/'(?=[^%]*%>)/g, "\t").split("'").join("\\'").split("\t").join("'").replace(/<%=(.+?)%>/g, "',$1,'").split("<%").join("');").split("%>").join("p.push('") + "');return p.join('');" :
    // mode = false: Concatenate Microtemplate
    "var p = ''; p+='" + str.replace(/[\r\t\n]/g, " ").replace(/'(?=[^%]*%>)/g, "\t").split("'").join("\\'").split("\t").join("'").replace(/<%=(.+?)%>/g, "'; p += $1; p += '").split("<%").join("';").split("%>").join("p+='") + "'; return p;");
    // Provide some basic currying to the user
    return dt ? fn(dt) : fn;
   };
  })();

var doT2 = doT;
  
  doT.templateSettings = {
   begin: '<%',
   end: '%>',
   varname: 'dt'
  };

  doT2["append"] = false;
  
  doU.templateSettings = {
   evaluate: /<%([\s\S]+?)%>/g,
   interpolate: /<%=([\s\S]+?)%>/g,
   encode: /<%!([\s\S]+?)%>/g,
   varname: 'dt',
   strip: true
  };
  
  
  window.sharedVariables = {};
  window.sharedVariables.dt = {
   header: "Header",
   header2: "Header2",
   header3: "Header3",
   header4: "Header4",
   header5: "Header5",
   header6: "Header6",
   list: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10']
  };
  
  window.micro2 = "<div><h1 class='header'><%= dt.header %></h1><h2 class='header2'><%= dt.header2 %></h2><h3 class='header3'><%= dt.header3 %></h3><h4 class='header4'><%= dt.header4 %></h4><h5 class='header5'><%= dt.header5 %></h5><h6 class='header6'><%= dt.header6 %></h6><ul class='list'><% for (var i = 0, l = dt.list.length; i < l; i++) { %><li class='item'><%= dt.list[i] %></li><% } %></ul></div>";
  
  
  window.underscoreTemplate = _.template(micro2);
  
  window.resigTemplate = tmpl(micro2);
  
  window.resigTemplate2 = utmpl(micro2, true);
  
  window.resigTemplate3 = utmpl(micro2, false);
  
  window.doTtemplate = doT.template(micro2);

  window.doT2template = doT2.template(micro2);
  
  window.doUtemplate = doU.template(micro2);

  window.nTenjinTemplate = "<div><h1 class='header'>#{ it.header }</h1><h2 class='header2'>#{ it.header2 }</h2><h3 class='header3'>#{ it.header3 }</h3><h4 class='header4'>#{ it.header4 }</h4><h5 class='header5'>#{ it.header5 }</h5><h6 class='header6'>#{ it.header6 }</h6><ul class='list'><?js for (var i = 0, l = it.list.length; i < l; i++) { ?><li class='item'>#{ it.list[i] }</li><?js } ?></ul></div>";

  
  window.convertednTenjinTemplate = new nTenjin.Template();
  window.convertednTenjinTemplate.convert(nTenjinTemplate);
</script>
    

Preparation code output

<script src="http://gist.github.com/raw/550881/29bb186167079c0b33ab6e9d50d779f37860cfa4/micro.js"></script> <script src="https://github.com/QLeelulu/nTenjin/raw/master/nTenjin.js"></script> <!--script src="http://gist.github.com/raw/860205/8444586913ab249c619671b8f5054fc92dddf643/micro2.js"></script--> <!--script src="http://gist.github.com/raw/860240/cd98cacbdeee7eb2cfb2ca3ca76638dae2a5b1af/micro3.js"></script--> <script src="http://github.com/olado/doT/raw/master/doT.js"></script> <script src="http://github.com/olado/doT/raw/master/doU.js"></script> <script> (function() { var cache = {}; this.utmpl = function tmpl(str, mode, dt) { // Figure out if we're getting a template, or if we need to // load the template - and be sure to cache the result. var fn = !/\W/.test(str) ? cache[str] = cache[str] || tmpl(document.getElementById(str).innerHTML) : // Generate a reusable function that will serve as a template // generator (and which will be cached). new Function("dt", mode ? // mode = true: Array Join Microtemplate "var p=[]; p.push('" + str.replace(/[\r\t\n]/g, " ").replace(/'(?=[^%]*%>)/g, "\t").split("'").join("\\'").split("\t").join("'").replace(/<%=(.+?)%>/g, "',$1,'").split("<%").join("');").split("%>").join("p.push('") + "');return p.join('');" : // mode = false: Concatenate Microtemplate "var p = ''; p+='" + str.replace(/[\r\t\n]/g, " ").replace(/'(?=[^%]*%>)/g, "\t").split("'").join("\\'").split("\t").join("'").replace(/<%=(.+?)%>/g, "'; p += $1; p += '").split("<%").join("';").split("%>").join("p+='") + "'; return p;"); // Provide some basic currying to the user return dt ? fn(dt) : fn; }; })(); var doT2 = doT; doT.templateSettings = { begin: '<%', end: '%>', varname: 'dt' }; doT2["append"] = false; doU.templateSettings = { evaluate: /<%([\s\S]+?)%>/g, interpolate: /<%=([\s\S]+?)%>/g, encode: /<%!([\s\S]+?)%>/g, varname: 'dt', strip: true }; window.sharedVariables = {}; window.sharedVariables.dt = { header: "Header", header2: "Header2", header3: "Header3", header4: "Header4", header5: "Header5", header6: "Header6", list: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'] }; window.micro2 = "<div><h1 class='header'><%= dt.header %></h1><h2 class='header2'><%= dt.header2 %></h2><h3 class='header3'><%= dt.header3 %></h3><h4 class='header4'><%= dt.header4 %></h4><h5 class='header5'><%= dt.header5 %></h5><h6 class='header6'><%= dt.header6 %></h6><ul class='list'><% for (var i = 0, l = dt.list.length; i < l; i++) { %><li class='item'><%= dt.list[i] %></li><% } %></ul></div>"; window.underscoreTemplate = _.template(micro2); window.resigTemplate = tmpl(micro2); window.resigTemplate2 = utmpl(micro2, true); window.resigTemplate3 = utmpl(micro2, false); window.doTtemplate = doT.template(micro2); window.doT2template = doT2.template(micro2); window.doUtemplate = doU.template(micro2); window.nTenjinTemplate = "<div><h1 class='header'>#{ it.header }</h1><h2 class='header2'>#{ it.header2 }</h2><h3 class='header3'>#{ it.header3 }</h3><h4 class='header4'>#{ it.header4 }</h4><h5 class='header5'>#{ it.header5 }</h5><h6 class='header6'>#{ it.header6 }</h6><ul class='list'><?js for (var i = 0, l = it.list.length; i < l; i++) { ?><li class='item'>#{ it.list[i] }</li><?js } ?></ul></div>"; window.convertednTenjinTemplate = new nTenjin.Template(); window.convertednTenjinTemplate.convert(nTenjinTemplate); </script>

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
Underscore.js Template
underscoreTemplate(sharedVariables);
pending…
Resig Micro-Templating.
resigTemplate(sharedVariables);
pending…
Resig Micro-Templating without with(obj)
resigTemplate2(sharedVariables.dt);
pending…
Resig Micro-Templating with += instead of push and join
resigTemplate3(sharedVariables.dt);
pending…
doT.js
doTtemplate(sharedVariables.dt);
pending…
doU.js
doUtemplate(sharedVariables.dt);
pending…
doT.js (append = false)
doT2template(sharedVariables.dt);
pending…
nTenjin
convertednTenjinTemplate.render(sharedVariables.dt);
pending…

Compare results of other browsers

Revisions

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

0 Comments