_.templateを複数回使う時はコンパイルした方がいい

underscore.js には _.tempalte というテンプレートエンジンがついているが、これを使う時にコンパイル結果を使いまわすことができる

var html = '<span><%= name %></span>';

// 利用後そのままコンパイル結果を捨てる
_.tempalte(html, { name: 'qiita' }); //=> <span>qiita</span>

// コンパイルした結果を使いまわす
var tmpl = _.template(html);
tmpl({name: 'qiita'}); //=> <span>qiita</span>

直感的にコンパイルしたものは使いまわした方がよいことは分かるが、果たしてどれくらい違うのか？
測定してみた。

測定コード

underscore-tempalte-test.js

var html = '\
  <ul>\
    <% _.each(items, function(item) { %>\
      <li><%= item %></li>\
    <% }); %>\
  </ul>';

var items = [];
for (var i = 0; i < 10; i++) { items[items.length] = i; }

JSLitmus.test('with compile', function (count) {
  var tmpl = _.template(html);
  while(count--) { tmpl({items: items}); }
});

JSLitmus.test('without compile', function (count) {
  while(count--) { _.template(html, {items: items}); }
});

結果

左から Firefox, Opera, Chromeの結果

ちょっと洒落にならないくらい違った。2回以上使うならコンパイルして使いまわすぐらいの気持ちでいくのがよさそう。
そしてやはりChromeは他の2つより純粋な JS の速度が速い。

参考

• JSLitmusを使ってJSの性能測定をする