handlebars each vs concatenation vs array join

JavaScript performance comparison

Revision 4 of this test case created by Alpha

Preparation code

<script src="https://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.rc.1.js">
</script>
<script src="https://underscorejs.org/underscore-min.js">
</script>
      
<script>
Benchmark.prototype.setup = function() {
  var optionTemplate = '{{#each options}}<option value="{{value}}">{{label}}</option>';
  
  target = {
    options: []
  };
  resultRegex = /^<option.*<\/option>$/;
  var pad = function(number, length) {
      var str = '' + number;
      while (str.length < length) {
        str = '0' + str;
      }
      }
      
      
      
  var suffix = '';
  for (var i = 0; i < 1000; i++) {
    suffix = pad(i, 5);
    target.options.push({
      value: 'foo' + suffix,
      label: 'bar' + suffix
    });
  }

};

Benchmark.prototype.teardown = function() {
  if (!resultRegex.test(result)) {
    throw new Error('Unexpected output');
  }

};
</script>

Preparation code output

<script src="https://underscorejs.org/underscore-min.js"> </script>

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
Handlebars each
result = Handlebars.compile('{{#each options}}' + Handlebars.compile(optionTemplate) + '{{/each}}')(target);
pending…
String concatenation
var options = target.options;
var length = options.length;
result = '';
for (var i = 0; i < length; i++) {
  result += optionTemplate(options[i]);
}
pending…
Array join
var options = target.options;
var length = options.length;
result = [];
for (var i = 0; i < length; i++) {
  result.push(optionTemplate(options[i]));
}
result = result.join('');
pending…
Underscore each
result = _.map(target.options, optionTemplate).join('');
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