benchmark

bench.js

var co = require('co');
var prettyHrtime = require('pretty-hrtime');
var jsdom = require('./jsdom');
var templateEngine = require('./template-engine');
var times = 100;

function *bench(fn) {
  var i = 0;
  var start = process.hrtime();

  while (i < times) {
    i++;
    yield fn();
  }

  console.log(prettyHrtime(process.hrtime(start), { verbose: true }));
}

co(function *() {
  yield bench(jsdom);
  yield bench(templateEngine);

  console.log('-------------------------');

  yield bench(jsdom);
  yield bench(templateEngine);

  console.log('-------------------------');

  yield bench(jsdom);
  yield bench(templateEngine);

  console.log('-------------------------');
})();

jsdom-component_index.js

var domify = require('component/domify');
var template = require('./template.html');

module.exports = Component;

function Component(data) {
  data || (data = {});
  var el = domify(template);
  this.el = el;
  el.querySelector('.title').textContent = data.title;
  el.querySelector('.content').textContent = data.content;
}

Component.prototype.toHTML = function () {
  return this.el.outerHTML;
};

jsdom-component_template.html

<div>
  <h3 class="title"></h3>
  <div class="content"></div>
</div>

jsdom.js

var requireDuo = require('require-duo');

module.exports = function () {
  return requireDuo(__dirname)
    .entry('jsdom-component/index.js')
    .script(function (View) {
      var data = {
        title: 'abc',
        content: 'lol'
      };
      return (new View(data)).toHTML();
    })
    .exec();
};

template-engine-component_index.js

var template, domify, minstache;
var isBrowser = true;

try {
  template = require('./template.html');
  domify = require('component/domify');
  minstache = require('visionmedia/minstache');
} catch (e) {
  var fs = require('fs');
  var path = require('path');
  minstache = require('minstache');
  template = fs.readFileSync(path.join(__dirname, 'template.html'), 'utf8');
  isBrowser = false;
}

module.exports = Component;

function Component(data) {
  data || (data = {});

  this.html = minstache(template, data);

  if (isBrowser) {
    this.el = domify(this.html);
  }
}

Component.prototype.toHTML = function () {
  return isBrowser ? this.el.outerHTML : this.html;
};

template-engine-component_template.html

<div>
  <h3 class="title">{{title}}</h3>
  <div class="content">{{content}}</div>
</div>

template-engine.js

var View = require('./template-engine-component');

module.exports = function *() {
  var data = {
    title: 'abc',
    content: 'lol'
  };
  var view = new View(data);
  return view.toHTML();
};

4 seconds 257 milliseconds 577 microseconds 570 nanoseconds
6 milliseconds 741 microseconds 497 nanoseconds
-------------------------
4 seconds 825 milliseconds 980 microseconds 355 nanoseconds
14 milliseconds 127 microseconds 451 nanoseconds
-------------------------
5 seconds 6 milliseconds 390 microseconds 74 nanoseconds
9 milliseconds 350 microseconds 115 nanoseconds
-------------------------