Preparation Code Preparation HTML (this will be inserted in the <body>
of a valid HTML5 document in standards mode) (useful when testing DOM operations or including libraries) <script src ="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" > </script >
<script src ="http://documentcloud.github.com/underscore/underscore.js" > </script >
<script src ="http://github.com/janl/mustache.js/raw/master/mustache.js" > </script >
<script src ="http://github.com/pvande/Milk/raw/gh-pages/milk.js" > </script >
<script src ="http://terrainformatica.com/kite/kite.js" > </script >
<script src ="http://github.com/downloads/wycats/handlebars.js/handlebars-0.9.0.pre.4.js" > </script >
<script src ="http://gist.github.com/raw/550881/29bb186167079c0b33ab6e9d50d779f37860cfa4/micro.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/creationix/haml-js/raw/master/lib/haml.js" > </script >
<script src ="http://jashkenas.github.com/coffee-script/extras/coffee-script.js" > </script >
<script src ="http://sstephenson.github.com/eco/dist/eco.js" > </script >
<script src ="http://github.com/jquery/jquery-tmpl/raw/master/jquery.tmpl.min.js" > </script >
<script src ="https://github.com/olado/doT/raw/master/doT.js" > </script >
<script src ="https://github.com/olado/doT/raw/master/doU.js" > </script >
<script src ="http://github.com/aefxx/jQote2/raw/69b2053a13f5f180e696de9b3dba856a3c00678c/jquery.jqote2.js" > </script >
<script src ="http://embeddedjavascript.googlecode.com/files/ejs_0.9_alpha_1_production.js" > </script >
<script src ="http://github.com/pure/pure/raw/master/libs/pure.js" > </script >
<div class ="pure" >
<h1 class ='header' > </h1 >
<h2 class ='header2' > </h2 >
<h3 class ='header3' > </h3 >
<h4 class ='header4' > </h4 >
<h5 class ='header5' > </h5 >
<h6 class ='header6' > </h6 >
<ul class ='list' >
<li class ='item' > </li >
</ul >
</div >
<script src ="http://github.com/douglascrockford/JSON-js/raw/master/json2.js" > </script >
<script src ="http://akdubya.github.com/dustjs/dist/dust-full-0.3.0.min.js" > </script >
<script src ="https://github.com/premasagar/tim/raw/master/tim.js" > </script >
<script src ="https://gist.github.com/raw/875670/d52752ead19a4eebc7237602438ae08a2541a5b5/tim-lite-cached-min.js" > </script >
<script src ="http://www.kuwata-lab.com/tenjin/shotenjin.js" > </script >
<script src ="https://github.com/QLeelulu/nTenjin/raw/master/nTenjin.js" > </script >
<script >
window.mustacheTemplate = "<div > <h1 class ='header' > {{header}}</h1 > <h2 class ='header2' > {{header2}}</h2 > <h3 class ='header3' > {{header3}}</h3 > <h4 class ='header4' > {{header4}}</h4 > <h5 class ='header5' > {{header5}}</h5 > <h6 class ='header6' > {{header6}}</h6 > <ul class ='list' > {{#list}}<li class ='item' > {{.}}</li > {{/list}}</ul > </div > ";
// note: exactly the same as the mustacheTemplate above.
window.kiteTemplate = "<div > <h1 class ='header' > {{header}}</h1 > <h2 class ='header2' > {{header2}}</h2 > <h3 class ='header3' > {{header3}}</h3 > <h4 class ='header4' > {{header4}}</h4 > <h5 class ='header5' > {{header5}}</h5 > <h6 class ='header6' > {{header6}}</h6 > <ul class ='list' > {{#list}}<li class ='item' > {{.}}</li > {{/list}}</ul > </div > ";
window.kiteCompiledTemplate = kite(kiteTemplate); // seems like others are testing compiled versions.
window.handlebarsTemplate = Handlebars.compile("<div > <h1 class ='header' > {{header}}</h1 > <h2 class ='header2' > {{header2}}</h2 > <h3 class ='header3' > {{header3}}</h3 > <h4 class ='header4' > {{header4}}</h4 > <h5 class ='header5' > {{header5}}</h5 > <h6 class ='header6' > {{header6}}</h6 > <ul class ='list' > {{#each list}}<li class ='item' > {{this}}</li > {{/each}}</ul > </div > ");
window.micro = "<div > <h1 class ='header' > <%= header %></h1 > <h2 class ='header2' > <%= header2 %></h2 > <h3 class ='header3' > <%= header3 %></h3 > <h4 class ='header4' > <%= header4 %></h4 > <h5 class ='header5' > <%= header5 %></h5 > <h6 class ='header6' > <%= header6 %></h6 > <ul class ='list' > <% for (var i = 0, l = list.length; i < l; i++) { %><li class ='item' > <%= list[i] %></li > <% } %></ul > </div > ";
window.micro2 = "<div > <h1 class ='header' > <%= data.header %></h1 > <h2 class ='header2' > <%= data.header2 %></h2 > <h3 class ='header3' > <%= data.header3 %></h3 > <h4 class ='header4' > <%= data.header4 %></h4 > <h5 class ='header5' > <%= data.header5 %></h5 > <h6 class ='header6' > <%= data.header6 %></h6 > <ul class ='list' > <% for (var i = 0, l = data.list.length; i < l; i++) { %><li class ='item' > <%= data.list[i] %></li > <% } %></ul > </div > ";
window.underscoreTemplate = _.template(micro);
window.resigTemplate = tmpl(micro);
window.resigTemplate2 = tmpl2(micro2);
window.resigTemplate3 = tmpl3(micro2);
window.sharedVariables = {
header: "Header",
header2: "Header2",
header3: "Header3",
header4: "Header4",
header5: "Header5",
header6: "Header6",
list: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10']
};
window.jadeTemplate = "div\n h1.header!= header\n h2.header2!= header2\n h3.header3!= header3\n h4.header4!= header4\n h5.header5!= header5\n h6.header6!= header6\n ul.list\n - each item in list\n li.item!= item";
window.hamlTemplate = Haml("%div\n %h1.header= header\n %h2.header2= header2\n %h3.header3= header3\n %h4.header4= header4\n %h5.header5= header5\n %h6.header6= header6\n %ul.list\n :each item in list\n %li.item= item");
window.ecoTemplate = eco("<div > <h1 class ='header' > <%- @header %></h1 > <h2 class ='header2' > <%- @header2 %></h2 > <h3 class ='header3' > <%- @header3 %></h3 > <h4 class ='header4' > <%- @header4 %></h4 > <h5 class ='header5' > <%- @header5 %></h5 > <h6 class ='header6' > <%- @header6 %></h6 > <ul class ='list' > <% for item in @list: %><li class ='item' > <%- item %></li > <% end %></ul > </div > ");
window.jQueryTemplate = $.template(null, "<div > <h1 class ='header' > {{html header}}</h1 > <h2 class ='header2' > {{html header2}}</h2 > <h3 class ='header3' > {{html header3}}</h3 > <h4 class ='header4' > {{html header4}}</h4 > <h5 class ='header5' > {{html header5}}</h5 > <h6 class ='header6' > {{html header6}}</h6 > <ul class ='list' > {{each list}}<li class ='item' > {{html $value}}</li > {{/each}}</ul > </div > ");
window.doTtemplate = doT.template("<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' > {{ for (var i = 0, l = it.list.length; i < l; i++) { }}<li class ='item' > {{= it.list[i] }}</li > {{ } }}</ul > </div > ");
window.doUtemplate = doU.template("<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' > {{ for (var i = 0, l = it.list.length; i < l; i++) { }}<li class ='item' > {{= it.list[i] }}</li > {{ } }}</ul > </div > ");
window.jqote_tmpl = "<div > <h1 class ='header' > <%= this.header %></h1 > <h2 class ='header2' > <%= this.header2 %></h2 > <h3 class ='header3' > <%= this.header3 %></h3 > <h4 class ='header4' > <%= this.header4 %></h4 > <h5 class ='header5' > <%= this.header5 %></h5 > <h6 class ='header6' > <%= this.header6 %></h6 > <ul class ='list' > <% for (var n = 0, l = this.list.length; n < l; n++) { %><li class ='item' > <%= this.list[n] %></li > <% } %></ul > </div > ";
window.jqote2 = $.jqotec(jqote_tmpl);
window.ejs = new EJS({
text: micro
});
window.baseHtml = "<div > <h1 class ='header' > </h1 > <h2 class ='header2' > </h2 > <h3 class ='header3' > </h3 > <h4 class ='header4' > </h4 > <h5 class ='header5' > </h5 > <h6 class ='header6' > </h6 > <ul class ='list' > <li class ='item' > </li > </ul > </div > ";
window.pureTemplate = $p('div.pure').compile({
h1: 'header',
h2: 'header2',
h3: 'header3',
h4: 'header4',
h5: 'header5',
h6: 'header6',
li: {
'itm<-list': {
'.': 'itm'
}
}
});
window.hamlTemplate_2 = "%div\n %h1.header= header\n %h2.header2= header2\n %h3.header3= header3\n %h4.header4= header4\n %h5.header5= header5\n %h6.header6= header6\n %ul.list\n :each item in list\n %li.item= item";
window.hamlCompiled = Haml.compile(hamlTemplate_2);
window.hamlOptimized = Haml.optimize(hamlCompiled);
dust.loadSource(dust.compile("<div > <h1 class ='header' > {header}</h1 > <h2 class ='header2' > {header2}</h2 > <h3 class ='header3' > {header3}</h3 > <h4 class ='header4' > {header4}</h4 > <h5 class ='header5' > {header5}</h5 > <h6 class ='header6' > {header6}</h6 > <ul class ='list' > {#list}<li class ='item' > {.}</li > {/list}</ul > </div > ", "dustTemplate"));
window.timTemplate = "<div > <h1 class ='header' > {{header}}</h1 > <h2 class ='header2' > {{header2}}</h2 > <h3 class ='header3' > {{header3}}</h3 > <h4 class ='header4' > {{header4}}</h4 > <h5 class ='header5' > {{header5}}</h5 > <h6 class ='header6' > {{header6}}</h6 > <ul class ='list' > {{list}}<li class ='item' > {{_content}}</li > {{/list}}</ul > </div > ";
window.timLiteTemplate = "<div > <h1 class ='header' > {{header}}</h1 > <h2 class ='header2' > {{header2}}</h2 > <h3 class ='header3' > {{header3}}</h3 > <h4 class ='header4' > {{header4}}</h4 > <h5 class ='header5' > {{header5}}</h5 > <h6 class ='header6' > {{header6}}</h6 > <ul class ='list' > <li class ='item' > {{list.0}}</li > <li class ='item' > {{list.1}}</li > <li class ='item' > {{list.2}}</li > <li class ='item' > {{list.3}}</li > <li class ='item' > {{list.4}}</li > <li class ='item' > {{list.5}}</li > <li class ='item' > {{list.6}}</li > <li class ='item' > {{list.7}}</li > <li class ='item' > {{list.8}}</li > <li class ='item' > {{list.9}}</li > </ul > </div > ";
window.tenjinTemplate = "<div > <h1 class ='header' > #{ header }</h1 > <h2 class ='header2' > #{ header2 }</h2 > <h3 class ='header3' > #{ header3 }</h3 > <h4 class ='header4' > #{ header4 }</h4 > <h5 class ='header5' > #{ header5 }</h5 > <h6 class ='header6' > #{ header6 }</h6 > <ul class ='list' > <?js for (var i = 0, l = list.length; i < l; i++) { ?><li class ='item' > #{ list[i] }</li > <?js } ?></ul > </div > ";
window.convertedTenjinTemplate = new Shotenjin.Template();
window.convertedTenjinTemplate.convert(tenjinTemplate);
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 >
Setup JS
Teardown JS
Test cases
Test #1 Title *
Async
Code * Mustache .to_html (mustacheTemplate, sharedVariables);
Test #2 Title *
Async
Code * resigTemplate (sharedVariables);
Title *
Async
Code * hamlTemplate (sharedVariables);
Title *
Async
Code * jade.render (jadeTemplate, {
locals : sharedVariables,
filename : 'test.js' ,
cache : true
});
Title *
Async
Code * underscoreTemplate (sharedVariables);
Title *
Async
Code * ecoTemplate (sharedVariables);
Title *
Async
Code * jQueryTemplate ($, {
data : sharedVariables
}).join ("" );
Title *
Async
Code * handlebarsTemplate (sharedVariables);
Title *
Async
Code * doTtemplate (sharedVariables);
Title *
Async
Code * doUtemplate (sharedVariables);
Title *
Async
Code * jqote2.call (sharedVariables, 0 , 0 , [sharedVariables], jqote2);
Title *
Async
Code * ejs.render (sharedVariables);
Title *
Async
Code * pureTemplate (sharedVariables);
Title *
Async
Code * Haml .execute (window .hamlOptimized , sharedVariables, sharedVariables);
Title *
Async
Code * var done = false ;
while (!done) {
dust.render ("dustTemplate" , sharedVariables, function ( ) {
done = true ;
});
}
Title *
Async
Code * kiteCompiledTemplate (sharedVariables);
Title *
Async
Code * resigTemplate2 (sharedVariables);
Title *
Async
Code * resigTemplate3 (sharedVariables);
Title *
Async
Code * Milk .render (mustacheTemplate, sharedVariables);
Title *
Async
Code * tim (timTemplate, sharedVariables);
Title *
Async
Code * timLiteCached (timLiteTemplate, sharedVariables);
Title *
Async
Code * Shotenjin .render (tenjinTemplate, sharedVariables);
Title *
Async
Code * convertedTenjinTemplate.render (sharedVariables);
Title *
Async
Code * convertednTenjinTemplate.render (sharedVariables);