node-benchでjsテンプレートエンジンのベンチマークをとってみた

node-benchとは

node-benchというライブラリを御存知ですか？abのようにhttpではなく、node上のコードのベンチをとるツールです。
npm install bench でインストールできます。

isaacs/node-bench・Github

使い方はGithubのREADMEにも載っていますが、基本的には以下の形です。

// 比較したいコードをオブジェクト形式でcompareに入れる
exports.compare = {
  test1: function() {
    console.log('this is test code 1');
  },

  test2: function() {
    console.log('this is test code 2');
  }
};

// ライブラリを呼び出す
require('bench').runMain();

あとは上記のようなファイルを保存して node test.js とするだけです。簡単です。

jsテンプレートたち

独断と偏見で選ばせていただきました。

• ejs
  オーソドックスなjsテンプレートです。
• jade
  人気のフレームワークexpressでデフォルトで採用されているテンプレートです。
• eco
  ejs的な文法でcoffeescriptを書けるようにしたテンプレートです。embed coffeescript なんでしょうねおそらく。
• coffeekup
  こちらもcoffeescriptを採用していますが、コードが完全にcoffeescriptで表現されているところが特徴的です。
• haml-js
  rubyのテンプレートとして生まれたhamlのjs移植版です。ループなどに若干ruby版との違いがあります。

テスト内容

データを元に、以下のテーブルを出力するようにしました。

テストを走らせるコードは以下です。

var fs = require('fs');
var engine_names = ['ejs', 'eco', 'jade', 'coffeekup', 'haml']
var compare = {};
var view_file = __dirname + '/views/index.';
var data = {
  fruits: [
    { name: 'apple', price: 100, stock: 50 },
    { name: 'orange', price: 75, stock: 75 },
    { name: 'banana', price: 50, stock: 100 }
  ]
};

engine_names.forEach(function(name) {
  var engine = require(name);
  var template = fs.readFileSync(view_file + name, 'utf-8');

  if (name === 'haml') {
    compare[name] = function() {
      engine(template)(data);
    };
  } else {
    compare[name] = function() {
      engine.compile(template)(data);
    };
  }
});

exports.compare = compare;
exports.time = 2000;
require('bench').runMain();

それぞれcompileとdataの埋め込みでhtmlの生成にかかる時間を競うようにしています。

作成したテンプレートが気になる方ははgistにあげてありますので御覧ください。

• index.ejs
• index.jade
• index.eco
• index.coffeekup
• inedx.haml

実行環境

マシンスペック

• Mac Book Air - OS X 10.8.2
• プロセッサ - 2.13GHz Intel Core 2 Duo
• メモリ - 4GB 1067 MHz DDR3

nodeのバージョンなど

• node - 0.8.15
• v8 - 3.11.10.25
• ejs - 0.8.3
• jade - 0.27.7
• eco - 1.1.0-rc-3
• coffeekup - 0.3.1
• haml - 0.4.3

実行してみた

数値はbigger is betterで早い順です。

ejs
Raw:
 > 7.2202166064981945
 > 7.200720072007201
 > 7.155635062611807
 > 6.802721088435374
 > 7.299270072992701
Average (mean) 7.135712580509055

haml
Raw:
 > 1.6963528413910094
 > 1.665278934221482
 > 1.7094017094017093
 > 1.7301038062283738
 > 1.7226528854435832
Average (mean) 1.7047580353372314

jade
Raw:
 > 1.6181229773462784
 > 1.6542597187758479
 > 1.7006802721088434
 > 1.663893510815308
 > 1.6849199663016006
Average (mean) 1.6643752890695758

eco
Raw:
 > 0.5973715651135006
 > 0.6468305304010349
 > 0.6222775357809583
 > 0.6565988181221274
 > 0.6631299734748011
Average (mean) 0.6372416845784844

coffeekup
Raw:
 > 0.481000481000481
 > 0.5589714924538849
 > 0.5577244841048522
 > 0.5636978579481398
 > 0.5558643690939411
Average (mean) 0.5434517369202597

Winner: ejs
Compared with next highest (haml), it's:
76.11% faster
4.19 times as fast
0.62 order(s) of magnitude faster

Compared with the slowest (coffeekup), it's:
92.38% faster
13.13 times as fast
1.12 order(s) of magnitude faster

ejs圧勝です。ダントツで１位ですね。意外なのがhamlが2位で僅差ですがjadeが負けてしまいました。
あとはcoffeescript -> javascriptの変換で時間がかかるのは仕方ないようですね。

まとめ

やはりejsのようにシンプルなテンプレートが速いですが、書きやすさといった面ではhamlやjadeなども捨てがたいところです。
個人的にはviewの速度がネックになるような状況でないかぎりhamlを愛用していきたいとおもいます。