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

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

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版との違いがあります。

テスト内容

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

Name Price Stock
apple ¥100 50
orange ¥75 75
banana ¥50 100

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


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にあげてありますので御覧ください。

実行環境

マシンスペック

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

まとめ

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

  • コンパイルとレンダリングが一緒になってるから分けてベンチとってみたhttps://gist.github.com/4334079