templates Kendo Uscore Lo-Dash DoT

JavaScript performance comparison

Test case created by tomByrer

Info

Branch of the shortened Template Shootoff r38, updated with CDNs, DoT & low-scoring tests + list data removed from it.

Please:

Libraries (in order of tests):

Preparation code

<!-- EXTERNAL LIBRARIES HOSTED BY A CDN -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.2.621/js/kendo.all.min.js"></script>
<script src="http://dl.dropbox.com/u/513327/doT.min.js"></script>
<script src="http://dl.dropbox.com/u/513327/jsconf/2012/documentcloud/underscore.js"></script>
<script src="http://dl.dropbox.com/u/513327/jsconf/2012/mod/lodash_template.js"></script>
<script>var lodash = _.noConflict();</script>


<script>

  /****************************************
   MASTER TEMPLATE DATA
   ****************************************/

  window.tpl = {};
  window.tpl.vars = {
    header: "Header",
    header2: "Header2",
    header3: "Header3",
    header4: "Header4",
    header5: "Header5",
    header6: "Header6",
  };

  /********************************
   PRE-COMPILED TEMPLATES
   ********************************/


  //doT (6/25/2012)
  window.tpl.dot = 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></div>");

  // Kendo
  window.tpl.kendoFalseWith = 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></div>", {useWithBlock: false});

// Lo-Dash (7/5/2012)
window.tpl.lodash = lodash.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></div>");

// Lo-Dash - no with
window.tpl.lodashNoWith = lodash.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></div>", null, {variable: 'data'});

// Underscore - no with
window.tpl.underscoreNoWith = _.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></div>", null, {variable: 'data'});

</script>

Preparation code output

Test runner

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

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
doT
tpl.dot(tpl.vars);
pending…
Kendo
tpl.kendoFalseWith(tpl.vars);
pending…
Lo-Dash
tpl.lodash(tpl.vars);
pending…
Lo-DashNoWith
tpl.lodashNoWith(tpl.vars);
pending…
Underscore
tpl.underscoreNoWith(tpl.vars);
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. Here’s a list of current revisions for this page:

4 comments

tomByrer (revision owner) commented :

Disregard the lower score for Kendo in Firefox Beta 16.0a1; I was in another tab when the test was run & it was slowed down by the switching. Re-ran tests had it matching doT just like PaleMoon 12.2.1 (FireFox optimized x64).

John-David commented :

@tomByrer

lodash_template.js is just a custom build, node build include=template,noConflict, of the edge repo version of Lo-Dash.

For future benchmarks you should use the edge repo version of Underscore because as it contains template fixes to avoid null/undefined property values which are not present in the CDN'ed version and it affects its comparison to Lo-Dash (I modded this benchmark to use the most recent edge).

Lo-Dash is held back from the fastest slot because it too has the null/undefined property guards that doT and Kendo lack.

tomByrer (revision owner) commented :

@John-David Thanks for fixing my test! I was just watching your Optimizations and custom builds video also ;)

Interesting that both my FF builds on the same i7 machine (Firefox Beta 16.0a1 & PaleMoon 12.2.1-x64) have such different results; for in PaleMoon Kendo & doT are lower, while Lo-Dash & Underscore are higher...

tomByrer (revision owner) commented :

edit: Kendo is slightly higher in PaleMoon.

Add a comment