Javascript String Performance

Followup previous article on innerHTML performance, I now take a look at what is the better way to built the HTML string for the innerHTML.

I use 2 for loop to built a table with 1000 rows and 5 columns. 4 different ways of building the string is tested. The test is done on Firefox 2.

1) str += ...
2) str = str + ...
3) str = str.concat(... , ...)
4) str.push(... , ...)

Below is the javascript sample for the 4th test cases

function init(){
 console.time("String")
 var newStr = new Array("<table>");
 for(var i=0; i<1000; i++){
  newStr.push("<tr>");
  for (var j=0; j<5; j++){
    newStr.push("<td>row ", i, " col ", j, "</td>");
  }
  newStr.push("</tr>");
 }
 newStr.push("</table>");
 document.getElementById("content").innerHTML = newStr.join("");
 console.timeEnd("String");
}

I did sample of 20 time and get the average result.

	Test Type	Average Time (ms)
1	str += ...	317.5
2	str = str + ...	285.4
3	str = str.concat(... , ...)	287.2
4	str.push(... , ...)	298.4

The results is quite close. The 1st Case is the slowest among all. The other 3 time is almost silimar considering their performance variation is about the same. Thus for most case (small functions), either way should be fine. But to squeeze every ms out, try using case 2-4.

The only thing to avoid is building the string like the example below.
newStr = newStr + "row ";
newStr = newStr + i;
newStr = newStr + " col ";
newStr = newStr + j;
newStr = newStr + "";

Use this instead:
newStr = newStr + "row " + i + " col " + j + "";

Any String that can be build in one line, should be done so.

Show-n-Tell Thursday Add to del.icio.us

DOM innerHTML vs appendChild

There's a lot of debate on whether to use innerHTML or to add in HTML elements using DOM methods. Personally I prefer to use innerHTML because it is easier to use. innerHTML is said to be faster as well.

For comparison, I have develop 2 functions to create a table with 100 rows and 5 columns.

1) An array is use to built the Table HTML string. Then it is appended into innerHTML of a div "content".

function init(){
var ihtml = "<table id='mytable'>";
for(var i=1; i<=100; i++){
 ihtml += "<tr id='row" + i + "'>";
 for(var j=1; j<=5; j++){
  ihtml += "<td id='col" + i + "_" + j + "'>" + i +

"_" + j + "</td>";
 }
 ihtml += "</tr>";
}
ihtml += "</html>";
document.getElementById("content").innerHTML = ihtml;
}

2) A DOM table is built and append into the div "content".

function init(){
var table=document.createElement("table");
table.setAttribute("id", "mytable");
for(var i=1; i<=100; i++){
 var tr = document.createElement("tr");
 tr.setAttribute("id", "row" + i);
 for(var j=1; j<=5; j++){
  var td = document.createElement("td");
  td.setAttribute("id", "col" + i + "_" + j);
  td.appendChild(document.createTextNode(i + "_" + j))
  tr.appendChild(td);
 }
 table.appendChild(tr);
}
document.getElementById("content").appendChild(table)
}

I use Firebug profile to time the function. So what the performance result difference should I expect?

	function 1(innerHTML)	function 2
Average Time	60 ms	130 ms

Both function manage to execute in miliseconds. But, function 1 (innerHTML) is two time faster the DOM methods. I have increase it to 1000 rows and the result is the same, innerHTML is twice as fast. As a conclusion, innerHTML is much faster for more complex/larger DOM manipulation.

Show-n-Tell Thursday Add to del.icio.us

Quick Tip - Domino File Upload Control element

For file uploading on the web, File Upload Control element can be used in Domino Design. It will create the file upload file (eg tag below). The name of the File Upload field will start with %%File.

<input id="UserFile" size=50 type="file"
name="%%File.482571b10020b158.e1c9d0d2ceb6a5c5482571b50022e0ab.$Body.0.1F64">

@AttachmentNames will return all the attachment(s) filename of the document. To create anchor link to the file, a <ComputedValue> can be used to built the link.

temp := @AttachmentNames;
ahref := "<a title=\"" + temp + 
"\" target=_blank href=" + DatabasePath + 
"VUncat/" + @Text( @DocumentUniqueID ) + 
"/$FILE/" + temp + ">" + temp + "</a>";
ahref

There is a problem when directly using the attachment name to be set as the anchor link. Files with space in the filename will produce broken link. Some file upload examples that I saw, include a message to inform user not to upload file with space in the filename. This is definitely not user friendly.

To overcome it use @URLEncode. It will handle the space or some other special characters in the filename.

ahref := "<a title=\"" + temp + 
"\" target=_blank href=" + DatabasePath + 
"VUncat/" + @Text( @DocumentUniqueID ) + 
"/$FILE/" + @URLEncode("Domino"; temp) + 
">" + temp + "</a>";

To add in additional function to removed the attachment, use an input checkbox with the name "%%Detach"

ahref := "<INPUT TYPE=checkbox NAME=\"%%Detach\" VALUE=\"" + 
@URLEncode("Domino"; temp) + "\"> <a title=\"" + 
temp + "\" target=_blank href=" + @WebDbName + "VUncat/" + 
@Text( @DocumentUniqueID ) + "/$FILE/" + @URLEncode("Domino"; temp) + 
">" + temp + "</a><br/>";

Checked on the filename that need to be removed. Then save document. The attachment will be removed.

Domino File Upload Control provides an easy way to upload file into the document. And the examples above is to access the attachments and manipulate it (open, delete).

Show-n-Tell Thursday Add to del.icio.us

CNY Lou Sang

Lou Sang is a Chinese New Year (CNY) dish. It consist of crackers, carrot, assorted colored ginger, pomelo, etc and not forgetting the raw fish. It is mix together with pepper, oil and plum sauce. Family and friends will stand and mix it up together using chopstick. While mixing, everyone will provide good luck wish like getting a promotion, better business, etc.

Lou Sang is only available about 1-2 weeks before CNY and 15th day after CNY (the last day of CNY - Chap Goh Meh). If you happen to be in Malaysia during then, don't forget to try it out at Chinese restaurant.