Info

Compared Mustache.js, Handlebars.js and templayed.js without template caching.

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://raw.github.com/janl/mustache.js/master/mustache.js"></script>
<script src="http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js"></script>
<script src="https://raw.github.com/archan937/templayed.js/master/releases/0.1.1/templayed.js"></script>
<script id="template" type="text/template">
  <tr valign="top">
    <td width="580px">
      <div identifier="iden1" class="kung_foo tribute dropdown" style="padding-top: 7px">
        <div class="bar">
          <label for="for1" class="name">Hallo *&nbsp;</label>
          <div class="foo_bar">
            <select name="name1" identifier="iden1" id="id">
              <option></option>
              {{#options}}
              <option value="{{id}}">{{value}}</option>
              {{/options}}
            </select>
          </div>
        </div>
      </div>
    </td>
  </tr>
  <tr valign="top">
    <td width="580px">
      <div identifier="iden1" class="kung_foo tribute yesno">
        <div class="bar">
          <label for="for1" class="name">Hi&nbsp;</label>
          <div class="foo_bar">
            <ul class="horizontal">
              <li class="first">
                <input type="radio" value="Yes" name="name1" id="id"> Yes way
              </li>
              <li class="">
                <input type="radio" value="No" name="name1" id="id"> No way
              </li>
            </ul>
          </div>
        </div>
      </div>
    </td>
  </tr>
  <tr valign="top">
    <td width="580px">
      <div identifier="iden1" class="kung_foo tribute something">
        <div class="bar">
          <label for="for1" class="name">Alo *&nbsp;</label>
          <div class="foo_bar">
            <input type="things" value="" size="255" name="name1" maxlength="255" identifier="iden1" id="id1" class="things">
          </div>
        </div>
      </div>
    </td>
  </tr>
  <tr valign="top">
    <td width="580px">
      <div identifier="iden1" class="kung_foo tribute something">
        <div class="bar">
          <label for="for1" class="name">Bonjour&nbsp;</label>
          <div class="foo_bar">
            <input type="things" value="" size="255" name="name1" maxlength="255" id="id1" class="things">
          </div>
        </div>
      </div>
    </td>
  </tr>
  <tr valign="top">
    <td width="580px">
      <div identifier="iden1" class="kung_foo tribute something">
        <div class="bar">
          <label for="for1" class="name">Oi *&nbsp;</label>
          <div class="foo_bar">
            <input type="things" value="" size="255" name="name1" maxlength="255" id="id1" class="things">
          </div>
        </div>
      </div>
    </td>
  </tr>
  <tr valign="top">
    <td width="580px">
      <div identifier="iden1" class="kung_foo tribute date_things_field">
        <div class="bar">
          <label for="for1" class="name">Bye *&nbsp;</label>
          <div class="foo_bar">
            <input type="things" value="" style="width: 30px" placeholder="dd" name="name1" maxlength="2" id="id">
            <input type="things" value="" style="width: 30px" placeholder="mm" name="name1" maxlength="2" id="id">
            <input type="things" value="" style="width: 42px" placeholder="jjjj" name="name1" maxlength="4" id="id">
          </div>
        </div>
      </div>
    </td>
  </tr>
  <tr valign="top">
    <td width="580px">
      <div identifier="iden1" class="kung_foo tribute email">
        <div class="bar">
          <div class="foo_bar">
            <label for="" class="name">Dag *&nbsp;</label> <input type="things" value="" size="30" name="name1" id="id">
          </div>
        </div>
      </div>
    </td>
  </tr>
  <tr valign="top">
    <td width="580px">
      <div identifier="iden1" class="kung_foo tribute postcode">
        <div class="bar">
          <label for="for1" class="name">Doei *&nbsp;</label>
          <div class="foo_bar">
            <input type="things" style="width: 40px" size="4" name="name1" maxlength="4" identifier="iden1" id="id1" class="things">
            <input type="things" style="width: 30px" size="2" name="name1" maxlength="2" identifier="iden1" id="id1" class="things">
          </div>
        </div>
      </div>
    </td>
  </tr>
  <tr valign="top">
    <td width="580px">
      <div identifier="iden1" class="kung_foo tribute combined_something">
        <div class="bar">
          <label for="for1" class="name">Later&nbsp;</label>
          <div class="foo_bar">
            <input type="things" style="width: 50px" size="255" name="name1" maxlength="255" identifier="iden1" id="id1" class="things">
            <input type="things" value="" style="width: 40px" size="255" name="name1" maxlength="255" identifier="iden1" id="id1" class="things">
          </div>
        </div>
      </div>
    </td>
  </tr>
  <tr valign="top">
    <td width="580px">
      <div identifier="iden1" class="kung_foo tribute something">
        <div class="bar">
          <label for="for1" class="name">Toodles *&nbsp;</label>
          <div class="foo_bar">
            <input type="things" value="" size="255" name="name1" maxlength="255" id="id1" class="things">
          </div>
        </div>
      </div>
    </td>
  </tr>
  <tr valign="top">
    <td width="580px">
      <div identifier="iden1" class="kung_foo tribute something">
        <div class="bar">
          <label for="for1" class="name">Cya *&nbsp;</label>
          <div class="foo_bar">
            <input type="things" value="" size="255" name="name1" maxlength="255" id="id1" class="things">
          </div>
        </div>
      </div>
    </td>
  </tr>
  <tr valign="top">
    <td width="580px">
      <div identifier="iden1" class="kung_foo tribute something">
        <div class="bar">
          <label for="for1" class="name">Au revoir&nbsp;</label>
          <div class="foo_bar">
            <input type="things" value="" size="255" name="name1" maxlength="255" id="id1" class="things">
          </div>
        </div>
      </div>
    </td>
  </tr>
  <tr valign="top">
    <td width="580px">
      <div identifier="iden1" class="kung_foo tribute something">
        <div class="bar">
          <label for="for1" class="name">Groetjes&nbsp;</label>
          <div class="foo_bar">
            <input type="things" value="" size="255" name="name1" maxlength="255" id="id1" class="things">
          </div>
        </div>
      </div>
    </td>
  </tr>
  <tr valign="top">
    <td width="580px">
      <div identifier="iden1" class="kung_foo tribute something">
        <div class="bar">
          <label for="for1" class="name">Greetings&nbsp;</label>
          <div class="foo_bar">
            <input type="things" size="255" name="name1" maxlength="255" id="id1" class="things">
          </div>
        </div>
      </div>
    </td>
  </tr>
  <tr valign="top">
    <td width="580px">
      <div identifier="iden1" class="kung_foo tribute something">
        <div class="bar">
          <label for="for1" class="name">Greets&nbsp;</label>
          <div class="foo_bar">
            <input type="things" value="" size="255" name="name1" maxlength="255" id="id1" class="things">
          </div>
        </div>
      </div>
    </td>
  </tr>
  <tr valign="top">
    <td width="580px">
      <div identifier="iden1" class="kung_foo tribute things">
        <div class="bar">
          <label for="for1" class="name">Bye bye *&nbsp;</label>
          <div class="foo_bar">
            <thingsarea rows="20" name="name1" id="id1" cols="40" class="normal"></thingsarea>
          </div>
        </div>
      </div>
      <div style="clear:both"></div>
    </td>
  </tr>
</script>
<script>
  Benchmark.prototype.setup = function() {
    var template = document.getElementById("template").innerHTML;
    var variables = {"options": [{id: 1, value: "Hello world!"}]};
    Mustache.clearCache();
  };
</script>

Preparation code output

Test runner

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

Java applet disabled.

Mustache.to_html(template, variables)

Handlebars.compile(template)(variables)

templayed(template, variables)

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:

• Revision 1: published by Paul Engel on 10th September 2012
• Revision 3: published by Paul Engel on 29th September 2012 and last updated on 30th September 2012
• Revision 6: published on 6th October 2012
• Revision 7: published by Paul Engel on 7th October 2012
• Revision 10: published on 1st November 2012
• Revision 11: published on 5th November 2012
• Revision 12: published on 17th November 2012
• Revision 13: published on 24th November 2012
• Revision 16: published on 3rd December 2012
• Revision 18: published on 3rd December 2012
• Revision 19: published by Jú Gonçalves on 20th January 2013
• Revision 20: published on 21st January 2013 and last updated on 22nd January 2013
• Revision 21: published on 29th January 2013
• Revision 22: published on 29th January 2013
• Revision 24: published on 30th March 2013
• Revision 26: published on 1st April 2013
• Revision 27: published by rhyzx on 12th April 2013
• Revision 30: published by rhyzx on 22nd April 2013

0 comments