JavaScript template language shootoff

JavaScript performance comparison

Revision 906 of this test case created by

Preparation code

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script src="http://olado.github.io/doT/doT.min.js"></script>

<script src="https://raw.github.com/lodash/lodash/2.4.1/dist/lodash.min.js"></script>


<!--External Template Definitions-->
<script type="text/x-kendo-template" id="kendoUIextTemplate">
<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>
</script>
<script>
  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.doTTemplate = doT.compile("<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'>{{~it.list :value:index}}<li class='item'>{{=value}}</li>{{~}}</ul></div>", {append:false});

window.doTTemplateA = doT.compile("<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'>{{~it.list :value:index}}<li class='item'>{{=value}}</li>{{~}}</ul></div>", {append:true});

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>";

window.lodashTemplate = _.template("<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'>
<% _.forEach(list, function(it) { %><li class='item'><%-it%></li><% }); %>
</ul></div>");
    

Preparation code output

<script src="http://olado.github.io/doT/doT.min.js"></script> <script src="https://raw.github.com/lodash/lodash/2.4.1/dist/lodash.min.js"></script> <!--External Template Definitions--> <script type="text/x-kendo-template" id="kendoUIextTemplate"> <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> </script> <script> 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.doTTemplate = doT.compile("<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'>{{~it.list :value:index}}<li class='item'>{{=value}}</li>{{~}}</ul></div>", {append:false}); window.doTTemplateA = doT.compile("<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'>{{~it.list :value:index}}<li class='item'>{{=value}}</li>{{~}}</ul></div>", {append:true}); 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>"; window.lodashTemplate = _.template("<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'> <% _.forEach(list, function(it) { %><li class='item'><%-it%></li><% }); %> </ul></div>");

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
doT Template (Append)
doTTemplateA(sharedVariables)
pending…
doT Template
doTTemplate(sharedVariables)
pending…
loDash
lodashTemplate(sharedVariables)
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