JavaScript template language shootoff

JavaScript performance comparison

Revision 453 of this test case created by Andrey

Preparation code

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

<script src="http://cdn.kendostatic.com/2011.2.804/js/kendo.all.min.js"></script>

<script src="http://github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js"></script>

<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>
</div>
</script>
<script>
  window.sharedVariables = {
   header: "Header",
   header2: "Header2",
   header3: "Header3",
   header4: "Header4",
   header5: "Header5",
   header6: "Header6",
  };

 
window.kendoUIAlt2 = function kendoFunction(model) {
  var inlineTemplate = kendo.template($("#kendoUIextTemplate").html(), {useWithBlock:false});
  $("#kendo-div").html(inlineTemplate(model));
};
  
window.knockoutTemplate = function knockoutFunction(model) {
  ko.applyBindings(model, document.getElementById("knockout-div"));
};

</script>

<b>Kendo output:</b><br />
<div id='kendo-div'></div>

<b>Knockout output:</b><br />
<div id='knockout-div'>
    <h1 class='header' data-bind='text: header'></h1>
    <h2 class='header2' data-bind='text: header2'></h2>
    <h3 class='header3' data-bind='text: header3'></h3>
    <h4 class='header4' data-bind='text: header4'></h4>
    <h5 class='header5' data-bind='text: header5'></h5>
    <h6 class='header6' data-bind='text: header6'></h6>  

</div>

<script type='text/javascript'>
kendoUIAlt2(sharedVariables);
knockoutTemplate(sharedVariables);
</script>
    

Preparation code output

<script src="http://cdn.kendostatic.com/2011.2.804/js/kendo.all.min.js"></script> <script src="http://github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js"></script> <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> </div> </script> <script> window.sharedVariables = { header: "Header", header2: "Header2", header3: "Header3", header4: "Header4", header5: "Header5", header6: "Header6", }; window.kendoUIAlt2 = function kendoFunction(model) { var inlineTemplate = kendo.template($("#kendoUIextTemplate").html(), {useWithBlock:false}); $("#kendo-div").html(inlineTemplate(model)); }; window.knockoutTemplate = function knockoutFunction(model) { ko.applyBindings(model, document.getElementById("knockout-div")); }; </script> <b>Kendo output:</b><br /> <div id='kendo-div'></div> <b>Knockout output:</b><br /> <div id='knockout-div'> <h1 class='header' data-bind='text: header'></h1> <h2 class='header2' data-bind='text: header2'></h2> <h3 class='header3' data-bind='text: header3'></h3> <h4 class='header4' data-bind='text: header4'></h4> <h5 class='header5' data-bind='text: header5'></h5> <h6 class='header6' data-bind='text: header6'></h6> </div> <script type='text/javascript'> kendoUIAlt2(sharedVariables); knockoutTemplate(sharedVariables); </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
Knockout.js Template
knockoutTemplate(sharedVariables);
pending…
Kendo UI Templates (External Temp Def - No "with" block))
kendoUIAlt2(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

Kendo output:
Knockout output: