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

JavaScript performance comparison

Revision 24 of this test case created by Mathatan

Info

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

linked RenderJS to the latest version on master.

Version #15 compiles and executes in the loop. This version pre-compiles and then benchmarks execution of compiled functions.

Version #24 fixed urls

Preparation code

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js">
</script>
<script src="//aefxx.com/files/jquery.jqote2.min.js">
</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.2/mustache.min.js">
</script>
<script src="//olado.github.io/doT/doT.min.js">
</script>
<script src="//jashkenas.github.com/coffee-script/extras/coffee-script.js">
</script>
<script src="//sstephenson.github.com/eco/dist/eco.js">
</script>
<script src="//www.jsviews.com/download/jsrender.js">
</script>
<script src="//twitter.github.com/hogan.js/builds/2.0.0/hogan-2.0.0.js">
</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.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
    }]
  };


  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>');

  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.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>');
  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>');
  $.templates({
    jsRenderTemplate: '{{for 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>{{/for}}        <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.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.handlebarsTemplate = '{{#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>';

  window.hoganTemplate = Hogan.compile(mustacheTemplate);

  window.mustacheCompile = Mustache.compile(mustacheTemplate);
  window.handlebarsCompile = Handlebars.compile(handlebarsTemplate);

  if (window.console) {
    console.log(doTtemplate(sharedVariables));
    console.log(hoganTemplate.render(sharedVariables));
  }

  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
doTtemplate(sharedVariables);
pending…
mustache
Mustache.to_html(mustacheTemplate, sharedVariables);
pending…
jqote2
jqote2Template.call(sharedVariables, 0, 0, [sharedVariables], jqote2Template);
pending…
Eco
ecoTemplate(sharedVariables);
pending…
JsRender
$.render.jsRenderTemplate(sharedVariables);
pending…
Hogan
hoganTemplate.render(sharedVariables);
pending…
mustacheCompile
mustacheCompile(sharedVariables);
pending…
handlebarsCompile
handlebarsCompile(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:

0 comments

Add a comment