hacking and gonzo since 2000
RND template redux
I rebuilt my benchmark from last since it had some flaws. The new one features:
I also think that some people have misunderstood RND. It isn't designed to fully replace DOM or innerHTML [they are both good for their things], it's meant to complement them. I.e. RND is a new tool for your web toolbox. New RND versionThis new version features:
function RND(tmpl, ns, scope) {
scope = scope || window;
var fn = function(w, g) {
g = g.split("|");
var cnt = ns[g[0]];
for(var i=1; i < g.length; i++)
cnt = scope[g[i]](cnt);
if(cnt == 0 || cnt == -1)
cnt += '';
return cnt || w;
};
return tmpl.replace(/%\(([A-Za-z0-9_|.])\)/g, fn);
}
What can it do now?Here is a new example where you define the scope: var tmpl = '<a href="%(link)">%(value|timesTwo)</a>';
var name_space = {link: 'http://amix.dk', value: 5.5};
var myfn = {
timesTwo: function(v) {
return v*2;
}
}
alert(RND(tmpl, name_space, myfn));
This will alert: <a href="http://amix.dk">11</a>
Notice that the value has been multiplied with 2. Here are some ideas for filters:
The new test codeHere is how the code that builds the test table looks like. You be the judge of fairness and style. Basic DOM
var span, div, img;
for(var i=0; i < iterations; i++) {
//Delete container in a fair way
cnt.innerHTML = "";
var x = document.createElement('table');
x.border = 1;
var y = document.createElement('tbody');
x.appendChild(y);
var z, span, txt, td, b;
for (var i=0; i < row_col_count; i++) {
z = document.createElement('tr');
y.appendChild(z);
z.onmouseover = colorCell;
for (var j=0; j < row_col_count; j++) {
b = document.createElement('b');
span = document.createElement('span');
span.style.color = "red";
txt = document.createTextNode(getText(i, j));
span.appendChild(txt);
b.appendChild(span);
td = document.createElement('td');
td.appendChild(b);
z.appendChild(td);
}
}
cnt.appendChild(x)
}
AJS DOM
var new_elm;
for(var i=0; i < iterations; i++) {
//Delete container in a fair way
cnt.innerHTML = "";
var y = AJS.TBODY();
var x = AJS.TABLE({border: 1}, y);
var z;
for (var i=0; i < row_col_count; i++) {
var z = AJS.TR();
z.onmouseover = colorCell;
AJS.ACN(y, z);
for (var j=0; j < row_col_count; j++)
AJS.ACN(z,
AJS.TD(
AJS.B(
AJS.SPAN({style: 'color: red'}, getText(i, j)+''))));
}
cnt.appendChild(x)
}
innerHTML
for(var i=0; i < iterations; i++) {
var html = '<table border="1">';
var tr;
for (var i=0; i < row_col_count; i++) {
tr = '<tr>';
for (var j=0; j < row_col_count; j++) {
tr += '<td onmouseover="colorCell(this)"><b>';
tr += '<span style="color: red">' + getText(i, j) + '</span>';
tr += '</b></td>';
}
html += tr + "</tr>";
}
html += "</table>";
cnt.innerHTML = html;
}
RND template
var tmpl_table = '<table border="1">%(rows)</table>';
var tmpl_col = AJS.join('', [
'<td onmouseover="colorCell(this)">',
'<b><span style="color: red">%(cnt)</span></b>',
'</td>']);
for(var i=0; i < iterations; i++) {
var rows = '';
for (var i=0; i < row_col_count; i++) {
var cells = '';
for (var j=0; j < row_col_count; j++)
cells += RND(tmpl_col, {cnt: getText(i, j)});
rows += '<tr>' + cells + '</tr>';
}
cnt.innerHTML = RND(tmpl_table, {rows: rows});
}
The new resultsInternet Explorer 6.0.2900Time run: 10 Number of iterations: 10 Basic DOM: 9124 ms AJS DOM: 11809 ms innerHTML: 2101 ms RND template: 2335 ms FireFox 1.5.0.6Time run: 10 Number of iterations: 10 Basic DOM: 1509 ms AJS DOM: 4330 ms innerHTML: 777 ms RND template: 1085 ms Opera 9Time run: 10 Number of iterations: 10 Basic DOM: 912 ms AJS DOM: 1394 ms innerHTML: 619 ms RND template: 1234 ms ConclusioninnerHTML is once again the fastest method in all browsers. RND is slightly faster than basic DOM. AJS DOM is the slowest, but most powerful method. In the future I am building very complex user interfaces using innerHTML (through RND) [of course, with a mix in of DOM where needed]. A little notice for IE: innerHTML and RND was around 45 times faster than basic DOM for a test case where one does not use bold and span. Download the new suite
Code
·
Code improvement
·
JavaScript
•
13. Aug 2006
18 comments so far
Post a comment
Commenting on this post has expired.
|
 Grab my RSS feed
Blog labels |
