DoT.js vs Mustache.js vs Eco.js vs Jqote2.js vs JsRender.js vs Hogan.js

JavaScript performance comparison

Revision 15 of this test case created

Info

Appending HTML to the page with doT, Mustache and native Javascript

linked RenderJS to the latest version on master.

Preparation code

<script src="http://code.jquery.com/jquery-1.7.1.min.js">
</script>
<script src="https://raw.github.com/aefxx/jQote2/master/jquery.jqote2.min.js">
</script>
<script src="http://github.com/janl/mustache.js/raw/master/mustache.js">
</script>
<script src="https://github.com/olado/doT/raw/master/doT.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="https://raw.github.com/BorisMoore/jsrender/master/jsrender.js" ></script>
<script src="https://raw.github.com/twitter/hogan.js/master/web/builds/1.0.3/hogan.min.js" ></script>
<script>
  window.sharedVariables = {
    "Accounts": [{
      "id": "XNKN_2147042265",
      "AccountId": "XNKN_2147042265",
      "BaseCurrency": "USD",
      "BaseCurrencyDecimals": 2,
      "LegalInstruments": 460031,
      "CashBalance": 10054873.73,
      "NonMarginPositionsValue": 0,
      "UnrealizedMarginProfitLoss": 139392.38,
      "CostToClosePositions": 0,
      "MarginAvailableForTrading": 10115221.041784238,
      "TransactionsNotBooked": 0,
      "TotalValue": 10194266.110000001,
      "OtherCollateral": 100000,
      "MarginCollateralNotAvailable": 0,
      "MarginUsedByCurrentPositions": -179045.06821576256,
      "MarginNetExposure": 4476126.705390137,
      "MarginExposureCoveragePct": 229.98156190716585,
      "MarginUtilizationPct": 1.7392698644329347
    }]
  };









  var result = document.getElementById('result');
</script>
<style>
  #result {display:none;}
</style>
<div id="result">
</div>

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
 
  window.doTtemplate = doT.template('{{ for (var i = 0, l = it.Accounts.length; i < l; i++) { }}<h2 class="title">{{=it.Accounts[i].AccountId}}<small class="currency">{{=it.Accounts[i].BaseCurrency}}</small></h2><ul class="list group"><li><strong class="label">Cash Balance</strong><span class="value">{{=it.Accounts[i].CashBalance}}</span></li><li class="collapsible"><div class="collapsible-header"><strong class="label">Account value</strong><span class="value">{{=it.Accounts[i].TotalValue}}</span></div><div class="collapsible-content"><ul class="value-list"><li><strong>Cash Balance</strong>{{=it.Accounts[i].CashBalance}}</li><li><strong>Non-margin positions</strong>{{=it.Accounts[i].NonMarginPositionsValue}}</li><li><strong>Unrealised margin profit/loss</strong>{{=it.Accounts[i].UnrealizedMarginProfitLoss}}</li><li><strong>Cost to close</strong>{{=it.Accounts[i].CostToClosePositions}}</li><li><strong>Transactions not booked</strong>{{=it.Accounts[i].TransactionsNotBooked}}</li></ul></div></li><li class="collapsible"><div class="collapsible-header"><strong class="label">Margin available</strong><span class="value">{{=it.Accounts[i].MarginAvailableForTrading}}</span></div><div class="collapsible-content"><ul class="value-list"><li><strong>Account value</strong>{{=it.Accounts[i].TotalValue}}</li><li><strong>Other collateral</strong>{{=it.Accounts[i].OtherCollateral}}</li><li><strong>Not available as margin collateral</strong>{{=it.Accounts[i].MarginCollateralNotAvailable}}</li><li><strong>Used for margin requirements</strong>{{=it.Accounts[i].MarginUsedByCurrentPositions}}</li><li><strong>Net exposure</strong>{{=it.Accounts[i].MarginNetExposure}}</li><li><strong>Exposure Coverage</strong>{{=it.Accounts[i].MarginExposureCoveragePct}}%</li></ul></div></li><li><strong class="label">Margin Utilisation</strong><div class="value">{{=it.Accounts[i].MarginUtilizationPct}}%<span class="progress"><span class="progress-value" style="width:{{=it.Accounts[i].MarginUtilizationPct}}%"></span></span></div></li></ul>{{ } }}        <ul class="list link-list group"><li><a href="#/orders/">Open Orders</a></li><li><a href="#/positions/">Open Positions</a></li></ul>        <p class="timestamp">Last updated: <span id="AccUpd">-</span>&nbsp;<button class="btn refresh"><span class="icon icon-refresh"></span></button></p>');

doTtemplate(sharedVariables);
 pending…
mustache
 
  window.mustacheTemplate = '{{#Accounts}}<h2 class="title">{{AccountId}}<small class="currency">{{BaseCurrency}}</small></h2><ul class="list group"><li><strong class="label">Cash Balance</strong><span class="value">{{{CashBalance}}}</span></li><li class="collapsible"><div class="collapsible-header"><strong class="label">Account value</strong><span class="value">{{{TotalValue}}}</span></div><div class="collapsible-content"><ul class="value-list"><li><strong>Cash Balance</strong>{{{CashBalance}}}</li><li><strong>Non-margin positions</strong>{{{NonMarginPositionsValue}}}</li><li><strong>Unrealised margin profit/loss</strong>{{{UnrealizedMarginProfitLoss}}}</li><li><strong>Cost to close</strong>{{{CostToClosePositions}}}</li><li><strong>Transactions not booked</strong>{{{TransactionsNotBooked}}}</li></ul></div></li><li class="collapsible"><div class="collapsible-header"><strong class="label">Margin available</strong><span class="value">{{{MarginAvailableForTrading}}}</span></div><div class="collapsible-content"><ul class="value-list"><li><strong>Account value</strong>{{{TotalValue}}}</li><li><strong>Other collateral</strong>{{{OtherCollateral}}}</li><li><strong>Not available as margin collateral</strong>{{{MarginCollateralNotAvailable}}}</li><li><strong>Used for margin requirements</strong>{{{MarginUsedByCurrentPositions}}}</li><li><strong>Net exposure</strong>{{{MarginNetExposure}}}</li><li><strong>Exposure Coverage</strong>{{{MarginExposureCoveragePct}}}%</li></ul></div></li><li><strong class="label">Margin Utilisation</strong><div class="value">{{{MarginUtilizationPct}}}%<span class="progress"><span class="progress-value" style="width:{{{MarginUtilizationPct}}}%"></span></span></div></li></ul>{{/Accounts}}        <ul class="list link-list group"><li><a href="#/orders/">Open Orders</a></li><li><a href="#/positions/">Open Positions</a></li></ul>        <p class="timestamp">Last updated: <span id="AccUpd">-</span>&nbsp;<button class="btn refresh"><span class="icon icon-refresh"></span></button></p>';

Mustache.to_html(mustacheTemplate, sharedVariables);
 pending…
jqote2
 
  window.jqote2Template = $.jqotec('<% for (var i = 0, l = this.Accounts.length; i < l; i++) {        var acc=this.Accounts[i];         %><h2 class="title"><%=acc.AccountId %><small class="currency"><%=acc.BaseCurrency%></small></h2><ul class="list group"><li><strong class="label">Cash Balance</strong><small class="value"><%=acc.CashBalance%></small></li><li class="collapsible"><div class="collapsible-header"><strong class="label">Account value</strong><small class="value"><%=acc.TotalValue%></small></div><div class="collapsible-content"><ul class="value-list"><li><strong>Cash Balance</strong><%=acc.CashBalance%></li><li><strong>Non-margin positions</strong><%=acc.NonMarginPositionsValue%></li><li><strong>Unrealised margin profit/loss</strong><%=acc.UnrealizedMarginProfitLoss%></li><li><strong>Cost to close</strong><%=acc.CostToClosePositions%></li><li><strong>Transactions not booked</strong><%=acc.TransactionsNotBooked%></li></ul></div></li><li class="collapsible"><div class="collapsible-header"><strong class="label">Margin available</strong><small class="value"><%=acc.MarginAvailableForTrading%></small></div><div class="collapsible-content"><ul class="value-list"><li><strong>Account value</strong><%=acc.TotalValue%></li><li><strong>Other collateral</strong><%=acc.OtherCollateral%></li><li><strong>Not available as margin collateral</strong><%=acc.MarginCollateralNotAvailable%></li><li><strong>Used for margin requirements</strong><%=acc.MarginUsedByCurrentPositions%></li><li><strong>Net exposure</strong><%=acc.MarginNetExposure%></li><li><strong>Exposure Coverage</strong><%=acc.MarginExposureCoveragePct%>%</li></ul></div></li><li><strong class="label">Margin Utilisation</strong><div class="value"><%=acc.MarginUtilizationPctWithMax%>%<span class="progress"><span class="progress-value" style="width:<%=acc.MarginUtilizationPct%>%"></span></span></div></li></ul><% } %>        <ul class="list link-list group"><li><a href="#/orders/">Open Orders</a></li><li><a href="#/positions/">Open Positions</a></li></ul>        <p class="timestamp">Last updated: <span id="AccUpd">-</span>&nbsp;<button class="btn refresh"><span class="icon icon-refresh"></span></button></p>');

$.jqote(jqote2Template, sharedVariables);
 pending…
Eco
 
  window.ecoTemplate = eco('<% for acc in @Accounts: %><h2 class="title"><%-acc.AccountId%><small class="currency"><%=acc.BaseCurrency%></small></h2><ul class="list group"><li><strong class="label">Cash Balance</strong><small class="value"><%-acc.CashBalance%></small></li><li class="collapsible"><div class="collapsible-header"><strong class="label">Account value</strong><small class="value"><%-acc.TotalValue%></small></div><div class="collapsible-content"><ul class="value-list"><li><strong>Cash Balance</strong><%-acc.CashBalance%></li><li><strong>Non-margin positions</strong><%-acc.NonMarginPositionsValue%></li><li><strong>Unrealised margin profit/loss</strong><%-acc.UnrealizedMarginProfitLoss%></li><li><strong>Cost to close</strong><%-acc.CostToClosePositions%></li><li><strong>Transactions not booked</strong><%-acc.TransactionsNotBooked%></li></ul></div></li><li class="collapsible"><div class="collapsible-header"><strong class="label">Margin available</strong><small class="value"><%-acc.MarginAvailableForTrading%></small></div><div class="collapsible-content"><ul class="value-list"><li><strong>Account value</strong><%-acc.TotalValue%></li><li><strong>Other collateral</strong><%-acc.OtherCollateral%></li><li><strong>Not available as margin collateral</strong><%-acc.MarginCollateralNotAvailable%></li><li><strong>Used for margin requirements</strong><%-acc.MarginUsedByCurrentPositions%></li><li><strong>Net exposure</strong><%-acc.MarginNetExposure%></li><li><strong>Exposure Coverage</strong><%-acc.MarginExposureCoveragePct%>%</li></ul></div></li><li><strong class="label">Margin Utilisation</strong><div class="value"><%-acc.MarginUtilizationPct%>%<span class="progress"><span class="progress-value" style="width:<%-acc.MarginUtilizationPct%>%"></span></span></div></li></ul><% end %>        <ul class="list link-list group"><li><a href="#/orders/">Open Orders</a></li><li><a href="#/positions/">Open Positions</a></li></ul>        <p class="timestamp">Last updated: <span id="AccUpd">-</span>&nbsp;<button class="btn refresh"><span class="icon icon-refresh"></span></button></p>');
ecoTemplate(sharedVariables);
 pending…
JsRender
 
  window.jsRenderTemplate = $.template('{{#each Accounts}}<h2 class="title">{{=AccountId}}<small class="currency">{{=BaseCurrency}}</small></h2><ul class="list group"><li><strong class="label">Cash Balance</strong><span class="value">{{=CashBalance}}</span></li><li class="collapsible"><div class="collapsible-header"><strong class="label">Account value</strong><span class="value">{{=TotalValue}}</span></div><div class="collapsible-content"><ul class="value-list"><li><strong>Cash Balance</strong>{{=CashBalance}}</li><li><strong>Non-margin positions</strong>{{=NonMarginPositionsValue}}</li><li><strong>Unrealised margin profit/loss</strong>{{=UnrealizedMarginProfitLoss}}</li><li><strong>Cost to close</strong>{{=CostToClosePositions}}</li><li><strong>Transactions not booked</strong>{{=TransactionsNotBooked}}</li></ul></div></li><li class="collapsible"><div class="collapsible-header"><strong class="label">Margin available</strong><span class="value">{{=MarginAvailableForTrading}}</span></div><div class="collapsible-content"><ul class="value-list"><li><strong>Account value</strong>{{=TotalValue}}</li><li><strong>Other collateral</strong>{{=OtherCollateral}}</li><li><strong>Not available as margin collateral</strong>{{=MarginCollateralNotAvailable}}</li><li><strong>Used for margin requirements</strong>{{=MarginUsedByCurrentPositions}}</li><li><strong>Net exposure</strong>{{=MarginNetExposure}}</li><li><strong>Exposure Coverage</strong>{{=MarginExposureCoveragePct}}%</li></ul></div></li><li><strong class="label">Margin Utilisation</strong><div class="value">{{=MarginUtilizationPct}}%<span class="progress"><span class="progress-value" style="width:{{=MarginUtilizationPct}}%"></span></span></div></li></ul>{{/each}}        <ul class="list link-list group"><li><a href="#/orders/">Open Orders</a></li><li><a href="#/positions/">Open Positions</a></li></ul>        <p class="timestamp">Last updated: <span id="AccUpd">-</span>&nbsp;<button class="btn refresh"><span class="icon icon-refresh"></span></button></p>');

$.render(sharedVariables, jsRenderTemplate);
 pending…
Hogan
 
   window.mustacheTemplate = '{{#Accounts}}<h2 class="title">{{AccountId}}<small class="currency">{{BaseCurrency}}</small></h2><ul class="list group"><li><strong class="label">Cash Balance</strong><span class="value">{{{CashBalance}}}</span></li><li class="collapsible"><div class="collapsible-header"><strong class="label">Account value</strong><span class="value">{{{TotalValue}}}</span></div><div class="collapsible-content"><ul class="value-list"><li><strong>Cash Balance</strong>{{{CashBalance}}}</li><li><strong>Non-margin positions</strong>{{{NonMarginPositionsValue}}}</li><li><strong>Unrealised margin profit/loss</strong>{{{UnrealizedMarginProfitLoss}}}</li><li><strong>Cost to close</strong>{{{CostToClosePositions}}}</li><li><strong>Transactions not booked</strong>{{{TransactionsNotBooked}}}</li></ul></div></li><li class="collapsible"><div class="collapsible-header"><strong class="label">Margin available</strong><span class="value">{{{MarginAvailableForTrading}}}</span></div><div class="collapsible-content"><ul class="value-list"><li><strong>Account value</strong>{{{TotalValue}}}</li><li><strong>Other collateral</strong>{{{OtherCollateral}}}</li><li><strong>Not available as margin collateral</strong>{{{MarginCollateralNotAvailable}}}</li><li><strong>Used for margin requirements</strong>{{{MarginUsedByCurrentPositions}}}</li><li><strong>Net exposure</strong>{{{MarginNetExposure}}}</li><li><strong>Exposure Coverage</strong>{{{MarginExposureCoveragePct}}}%</li></ul></div></li><li><strong class="label">Margin Utilisation</strong><div class="value">{{{MarginUtilizationPct}}}%<span class="progress"><span class="progress-value" style="width:{{{MarginUtilizationPct}}}%"></span></span></div></li></ul>{{/Accounts}}        <ul class="list link-list group"><li><a href="#/orders/">Open Orders</a></li><li><a href="#/positions/">Open Positions</a></li></ul>        <p class="timestamp">Last updated: <span id="AccUpd">-</span>&nbsp;<button class="btn refresh"><span class="icon icon-refresh"></span></button></p>';

 window.hoganTemplate = Hogan.compile(mustacheTemplate);
hoganTemplate.render(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. Here’s a list of current revisions for this page:

2 comments

Laura Doktorov commented : ∞

Results for doT.js in test #15 are invalid - the template is broken.

Laura Doktorova commented : ∞

Correction, not broken, but #15 both compiles and executes in the loop. Added #16 - precompiles and then loops compiled versions.

Add a comment