appendToJQueryTmpl

JavaScript performance comparison

Revision 4 of this test case created

Preparation code

<div id="stringappend"></div>
<div id="tmplappend"></div>
<div id="handlebarsappend"></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://raw.githubusercontent.com/appendto/jquery-tmpl/master/jquery.tmpl.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.min.js"></script>

<script id="sometmpl" type="text/html">
        <li>
    <a href="${ url }">${ name }</a>
    Age: ${ age }
   (${ cityJoin })
  </li>
</script>
<script id="handlebarstmpl" type="text/x-handlebars-template">
        <li>
    <a href="{{url}}">{{name}}</a>
    Age: {{age}}
    ( {{cityJoin}} )
  </li>
</script>


<script>
  var data = {
                name: function() {
                        return this.firstName + " " + this.lastName;
                },
    age: 30,
                firstName: "John",
                lastName: "Resig",
                url: "http://ejohn.org/",
                cityJoin: function() {
                        return this.cities.join(", ");
                },
                cities: [
                        "Boston, MA",
                        "San Francisco, CA"
                ]
        };
  var template = $("#sometmpl");
  var handlebarsTemplate = Handlebars.compile($("#handlebarstmpl").html());
</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
string concat
var markup = "";
markup = "<li><a href='" + data.url + "'>" + data.name() + "</a>";
markup += "Age: " + data.age;
markup += "(" + data.cityJoin() + ")</li>";
$("#stringappend").append(markup);
pending…
jquery tmpl
$("#tmplappend").append(template.render(data));
pending…
handlebars
$("#handlebarsappend").append(handlebarsTemplate(data));
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