hacking and gonzo since 2000

RND template redux

I rebuilt my benchmark from last since it had some flaws. The new one features:

50x50 table
Top rows and left-most columns will be filled with some fixed text (some of them)
The other 2401 cells will be populated with random numbers
The fixed names will be extracted from a JSON object
AJS.RCN isn't used for basic DOM
A basic event added
The text will be decorated in bold and span

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 version

This new version features:

eval isn't used, actually, you can pass what scope to look at. window is the default scope.
A bug fix (-1 or 0 wasn't displayed)

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:

Captialize text
Truncate text to 20 chars
Date format

The new test code

Here 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 results

Internet Explorer 6.0.2900

Time 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.6

Time run: 10
Number of iterations: 10
Basic DOM: 1509 ms
AJS DOM: 4330 ms
innerHTML: 777 ms
RND template: 1085 ms

Opera 9

Time run: 10
Number of iterations: 10
Basic DOM: 912 ms
AJS DOM: 1394 ms
innerHTML: 619 ms
RND template: 1234 ms

Conclusion

innerHTML 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

Download the new suite

Code · Code improvement · JavaScript • 13. Aug 2006