template-engines (precompiled) (v8)

Revision 8 of this benchmark created on

Description

First of all I apologize for my "perfect" English.

This benchmark trying to measure three types of JavaScript templates usage:

  • Rendering template to string
  • Rendering template with applying it to #document-fragment
  • Rendering template with applying it to existing DOM element

All three cases demonstrate the behavior of templates in the real world applicance.

Actualy we interested in one behaviour - rendering template to string with the further application, but we include some reactive libs that initialy get binded to the dom.

As far those libraries included:

musatche.js (src) - 0.7.2 - String-based

Hogan.js (src) - 2.0.0 - String-based

Handlebars.js (src) - 1.0.0 - String-based - Compile option data: false applied *

Ractive.js (src) - 0.3.6 - Bindable - Compile option twoway: false applied **

Bindable type actualy behaives like Reactive in terms of Two-Way data binding

* From Handlebars.js documentstion's optimizations section:

Implementations that do not use @data variables can improve performance of iteration centric templates by specifying {data: false} in the compiler options.

** From Ract.js documentation's Initialisation options section:

twoway Boolean

Defaults to true. Whether or not two-way data binding is enabled (see Two‐way binding).

Preparation HTML

<!-- Include needed scripts -->
<script src="http://cdn.ractivejs.org/latest/ractive.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.2/mustache.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hogan.js/2.0.0/hogan.js"></script>
<pre id="container">
</pre>

Setup

// Populationg template data
    var data = {
      title: 'Seo Optimised Article Title',
      article: {
        title: 'Article Title',
        body: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut laboriosam voluptate iure dolor fugit quod nihil accusantium nemo quas eligendi?'
      }
    };
    
    // Populating template strings
    var templates = {};
    
    templates.mustache = '<article><div class="row eight"><h1>{{{article.title}}}</h1><p>{{{article.body}}}</p></div></article>';
    
    templates.ractive = '<article><div class="row eight"><h1>{{article.title}}</h1><p>{{article.body}}</p></div></article>';
    
    // Iterator - monkey patching Ractive #set behaviour
    var i = 0;
    
    // Chaching container dom elements
    var $dom = document.getElementById('container');
    var $fragment = document.createDocumentFragment();
    
    // Pre-compiling templates, creating doc. fragments
    
    // mustache
    var mustache = Mustache.compile(templates.mustache);
    
    // Hogan.js
    var hogan = Hogan.compile(templates.mustache);
    
    // Handlebar.js
    var handlebars = Handlebars.compile(templates.mustache);
    
    // Handlebars with `data: false` optimisation on loops
    var handlebars_optimised = Handlebars.compile(templates.mustache, { data: false });
    
    // Ractive, initialy works with dom
    var ractive_fragment = new Ractive({
      el: $fragment,
      template: templates.ractive,
      data: data,
      twoway: false
    });
    
    var ractive_dom = new Ractive({
      el: $fragment,
      template: templates.ractive,
      data: data,
      twoway: false
    });

Teardown


    i = 0;
   

Test runner

Ready to run.

Testing in
TestOps/sec
mustache.js
var testdata = {
  title: data.title + i++,
  article: {
    title: data.article.title + i,
    body: data.article.body + i
  }
};
mustache(testdata);
ready
mustache.js (FRAGMENT)
var testdata = {
  title: data.title + i++,
  article: {
    title: data.article.title + i,
    body: data.article.body + i
  }
};
$fragment.innerHTML = mustache(testdata);
ready
mustache.js (DOM)
var testdata = {
  title: data.title + i++,
  article: {
    title: data.article.title + i,
    body: data.article.body + i
  }
};
$dom.innerHTML = mustache(testdata);
ready
Hogan.js
var testdata = {
  title: data.title + i++,
  article: {
    title: data.article.title + i,
    body: data.article.body + i
  }
};
hogan.render(testdata);
ready
Hogan.js (FRAGMENT)
var testdata = {
  title: data.title + i++,
  article: {
    title: data.article.title + i,
    body: data.article.body + i
  }
};
$fragment.innerHTML = hogan.render(testdata);
ready
Hogan.js (DOM)
var testdata = {
  title: data.title + i++,
  article: {
    title: data.article.title + i,
    body: data.article.body + i
  }
};
$dom.innerHTML = hogan.render(testdata);
ready
Handlebars.js
var testdata = {
  title: data.title + i++,
  article: {
    title: data.article.title + i,
    body: data.article.body + i
  }
};
handlebars(testdata);
ready
Handlebars.js (FRAGMENT)
var testdata = {
  title: data.title + i++,
  article: {
    title: data.article.title + i,
    body: data.article.body + i
  }
};
$fragment.innerHTML = handlebars(testdata);
ready
Handlebars.js (DOM)
var testdata = {
  title: data.title + i++,
  article: {
    title: data.article.title + i,
    body: data.article.body + i
  }
};
$dom.innerHTML = handlebars(testdata);
ready
Handlebars.js - optimised
var testdata = {
  title: data.title + i++,
  article: {
    title: data.article.title + i,
    body: data.article.body + i
  }
};
handlebars_optimised(testdata);
ready
Handlebars.js - optimised (FRAGMENT)
var testdata = {
  title: data.title + i++,
  article: {
    title: data.article.title + i,
    body: data.article.body + i
  }
};
$fragment.innerHTML = handlebars_optimised(testdata);
ready
Handlebars.js - optimised (DOM)
var testdata = {
  title: data.title + i++,
  article: {
    title: data.article.title + i,
    body: data.article.body + i
  }
};
$dom.innerHTML = handlebars_optimised(testdata);
ready
Reactive.js - singular (FRAGMENT)
var testdata = {
  title: data.title + i++,
  article: {
    title: data.article.title + i,
    body: data.article.body + i
  }
};
ractive_fragment.set('title', testdata.title);
ractive_fragment.set('article.title', testdata.article.title);
ractive_fragment.set('article.body', testdata.article.body);
ready
Reactive.js - comulative (FRAGMENT)
var testdata = {
  title: data.title + i++,
  article: {
    title: data.article.title + i,
    body: data.article.body + i
  }
};
ractive_fragment.set({
  'title': testdata.title,
  'article.title': testdata.article.title,
  'article.body': testdata.article.body
});
ready
Reactive.js - singular (DOM)
var testdata = {
  title: data.title + i++,
  article: {
    title: data.article.title + i,
    body: data.article.body + i
  }
};
ractive_dom.set('title', testdata.title);
ractive_dom.set('article.title', testdata.article.title);
ractive_dom.set('article.body', testdata.article.body);
ready
Reactive.js - comulative (DOM)
var testdata = {
  title: data.title + i++,
  article: {
    title: data.article.title + i,
    body: data.article.body + i
  }
};
ractive_dom.set({
  'title': testdata.title,
  'article.title': testdata.article.title,
  'article.body': testdata.article.body
});
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.