hacking and gonzo since 2000
RND - fast and simple JS template system
As web applications get more dynamic and complex, it's crucial to know what's the fastest way to render content. I have done some research and I am gladly sharing it with you. The things I cover:
HTML render benchmarkingThere are different ways of adding/manipulating HTML, those that I am going to test are following:
I have benchmarked in following browsers:
Basically we insert following HTML around 10000 times using the different methods: <span class="test">
babble, babble, bitch, bitch
<div><img src="hej.png" /></div>
</span>
The results
A table over my benchmarks: As you can see, using DOM is slow. While using innerHTML is the fastest method. All around, it's around 3 times faster using innerHTML than DOM. Remember, this is for very basic HTML. IE was tested on a 3GHz machine with 1 GB ram. The others were tested on a Powermac 2x2.0 GHz G5 with 2 GB ram. Why not to use innerHTMLUsing innerHTML approach can be dirty, mostly because HTML code is spread around. That's when I got the idea to a simple JS template engine. I named it RND and by the benchmarks you can see that it's almost as fast as using innerHTML! RND JS templateLet me start off by showing the implementation, because it's simple and beautiful: function RND(tmpl, ns) {
var fn = function(w, g) {
g = g.split("|");
var cnt = ns[g[0]];
for(var i=1; i < g.length; i++)
cnt = eval(g[i])(cnt);
return cnt || w;
};
return tmpl.replace(/%(([A-Za-z0-9_|.]))/g, fn);
}
An example of usageThis JS code: var tmpl = '<a href="%(link)">%(value|parseInt)</a>';
var name_space = {'link': 'http://amix.dk', 'value': 5.5};
alert( RND(tmpl, name_space) );
Will alert: <a href="http://amix.dk">5</a>
The syntaxIn a string you use %(NAME) to denote the placement of placeholders. In the example you can see that placeholders are %(link) and %(value|parseInt). Notice the use of filter function parseInt, i.e. you can pass any functions as filters and you can combine filters. To fill your template you call RND(tmpl_string, name_sapce), where
The reasons why RND is good:
A more complex example
In the benchmarks I used following template:
Real world usage of RNDSkeletonz has a very nifty plugin syntax builder. The HTML is rendered from JSON and the HTML building was done using AmiJS DOM. Before I changed the slowest method to use RND I took some benchmarks. To render plugin syntax HTML using AmiJS DOM:
To render plugin syntax using RND:
That's around 80x improvement ~ the code is also much cleaner since HTML representation and actual code are separated. I am suprised by this result, but happy that I found a solution :) The tests for Skeletonz were done only in Firefox, using the same benchmarking suite as you'll find in the zip below. DownloadUpdate [13. Aug 2006]
Code
·
Code improvement
·
JavaScript
•
11. Aug 2006
51 comments so far
Post a comment
Commenting on this post has expired.
|
 Grab my RSS feed
Blog labels |
