JavaScript template language shootoff

JavaScript performance comparison

Revision 806 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://cdn.kendostatic.com/2012.1.322/js/kendo.all.min.js"></script>

<script src="https://rawgithub.com/olado/doT/master/doT.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: ['1000000000', '2', '3', '4', '5', '6', '7', '8', '9', '10']
  };
  
  window.kendouiTemplate = kendo.template("<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>", {useWithBlock:true});
  
  window.kendouiTemplate2 = kendo.template("<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>", {useWithBlock:false});
  
  //Use external template definition
  window.kendoUIAlt = kendo.template($("#kendoUIextTemplate").html());
  window.kendoUIAlt2 = kendo.template($("#kendoUIextTemplate").html(), {useWithBlock:false});
 
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>");

</script>


<div id="template" style="display:none"></div>
    

Preparation code output

<script src="http://cdn.kendostatic.com/2012.1.322/js/kendo.all.min.js"></script> <script src="https://rawgithub.com/olado/doT/master/doT.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: ['1000000000', '2', '3', '4', '5', '6', '7', '8', '9', '10'] }; window.kendouiTemplate = kendo.template("<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>", {useWithBlock:true}); window.kendouiTemplate2 = kendo.template("<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>", {useWithBlock:false}); //Use external template definition window.kendoUIAlt = kendo.template($("#kendoUIextTemplate").html()); window.kendoUIAlt2 = kendo.template($("#kendoUIextTemplate").html(), {useWithBlock:false}); 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>"); </script> <div id="template" style="display:none"></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.js
$('#template').empty().append(doTtemplate(sharedVariables));
++sharedVariables.list[0];
pending…
Kendo UI Templates (Default)
$('#template').empty().append(kendouiTemplate(sharedVariables));
++sharedVariables.list[0];
pending…
Kendo UI Templates (No "with" block)
$('#template').empty().append(kendouiTemplate2(sharedVariables));
++sharedVariables.list[0];
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