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

#JavaScript

#テンプレート

山形孝造

2012.12.18

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