JSPerformance

JavaScript performance comparison

Test case created by Prateek Jadhwani

Preparation code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/template" id="myTemplate">
    <div>
        <% _.each(items, function (item) { 
        %>
            <%= item %> 
        <% }) %>
    </div>
</script>
<script src="http://underscorejs.org/underscore-min.js">
</script>
<script>
  var text = "<div><% _.each(items, function (item) { %><%= item %> <% }) %></div>";

    // Storing the whole Template as a function in Cache 
    var cachedTemplate = _.memoize(_.template);

    // Most common practice of storing the template in a Variable
    // And then compiling it
    var templateFunction = _.template(text);

    // Most common practice of parsing the DOM element
    // from the WebPage and then compiling it
    var templateFunction2 = _.template($("#myTemplate").html());

    // using the cached compiled template and then 
    // executing it as a function
    var cachedTemplateFunction = _.memoize(templateFunction, function(value)
    {
      return JSON.stringify(value);
    });

    // Cached Template Function2 from the parsed DOM element
    var cachedTemplateFunction2 = _.memoize(templateFunction2, function(value)
    {
      return JSON.stringify(value);
    });
</script>
    

Preparation code output

Test runner

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

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
Normal(div in var)
var a = [];
for (var i = 0; i < 10; i++) {
  a.push("" + i);
  _.template(text)({
    items: a
  });
}
pending…
Cached(div in var)
var a = [];
for (var i = 0; i < 10; i++) {
  a.push("" + i);
  cachedTemplate(text)({
    items: a
  });
}
pending…
Template function(div in var)
var a = [];
for (var i = 0; i < 10; i++) {
  a.push("" + i);
  templateFunction({
    items: a
  });
}
pending…
Cached Template Function(div in var)
var a = [];
for (var i = 0; i < 10; i++) {
  a.push("" + i);
  cachedTemplateFunction({
    items: a
  });
}
pending…
Normal(DOM parsing)
var a = [];
var myTemplate = $("#myTemplate").html();
for (var i = 0; i < 10; i++) {
  a.push("" + i);
  _.template(myTemplate)({
    items: a
  });
}
pending…
Cached(DOM parsing)
var a = [];
var myTemplate = $("#myTemplate").html();
for (var i = 0; i < 10; i++) {
  a.push("" + i);
  cachedTemplate(myTemplate)({
    items: a
  });
}
pending…
Template function(DOM parsing)
var a = [];
for (var i = 0; i < 10; i++) {
  a.push("" + i);
  templateFunction2({
    items: a
  });
}
pending…
Cached Template Function(DOM parsing)
var a = [];
for (var i = 0; i < 10; i++) {
  a.push("" + i);
  cachedTemplateFunction2({
    items: a
  });
}
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.

0 Comments