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

JavaScript performance comparison

Revision 27 of this test case created

Info

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

Preparation code

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="https://rawgithub.com/aefxx/jQote2/master/jquery.jqote2.min.js">
</script>
<script type="text/javascript" src="https://rawgithub.com/janl/mustache.js/master/mustache.js">
</script>
<script type="text/javascript" src="https://rawgithub.com/olado/doT/master/doT.js">
</script>
<script type="text/javascript" src="https://rawgithub.com/BorisMoore/jsrender/master/jsrender.js" ></script>
<script type="text/javascript">
  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
    },
    {
      "id": "XNKN_2147042265",
      "AccountId": "XNKN_2147042265",
      "BaseCurrency": "EUR",
      "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.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.doTtemplate = doT.template('{{~it:x}}<h2 class="title">{{=x.AccountId}}<small class="currency">{{=x.BaseCurrency}}</small></h2><ul class="list group"><li><strong class="label">Cash Balance</strong><span class="value">{{=x.CashBalance}}</span></li><li class="collapsible"><div class="collapsible-header"><strong class="label">Account value</strong><span class="value">{{=x.TotalValue}}</span></div><div class="collapsible-content"><ul class="value-list"><li><strong>Cash Balance</strong>{{=x.CashBalance}}</li><li><strong>Non-margin positions</strong>{{=x.NonMarginPositionsValue}}</li><li><strong>Unrealised margin profit/loss</strong>{{=x.UnrealizedMarginProfitLoss}}</li><li><strong>Cost to close</strong>{{=x.CostToClosePositions}}</li><li><strong>Transactions not booked</strong>{{=x.TransactionsNotBooked}}</li></ul></div></li><li class="collapsible"><div class="collapsible-header"><strong class="label">Margin available</strong><span class="value">{{=x.MarginAvailableForTrading}}</span></div><div class="collapsible-content"><ul class="value-list"><li><strong>Account value</strong>{{=x.TotalValue}}</li><li><strong>Other collateral</strong>{{=x.OtherCollateral}}</li><li><strong>Not available as margin collateral</strong>{{=x.MarginCollateralNotAvailable}}</li><li><strong>Used for margin requirements</strong>{{=x.MarginUsedByCurrentPositions}}</li><li><strong>Net exposure</strong>{{=x.MarginNetExposure}}</li><li><strong>Exposure Coverage</strong>{{=x.MarginExposureCoveragePct}}%</li></ul></div></li><li><strong class="label">Margin Utilisation</strong><div class="value">{{=x.MarginUtilizationPct}}%<span class="progress"><span class="progress-value" style="width:{{=x.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.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.jsRenderTemplate = $.templates('{{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>');
</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
doTtemplate(sharedVariables.Accounts);
pending…
mustache
Mustache.to_html(mustacheTemplate, sharedVariables);
pending…
jqote2
$.jqote(jqote2Template, sharedVariables)
pending…
JsRender
jsRenderTemplate.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:

0 comments

Add a comment