String Concatenation

Many Pro/Web.Link applications involve the construction of a report table of some kind. Typically the application loops around the objects in session and builds a table to display to the user. Try out the following example yourself to see the issue.

<HTML>
<BODY>
<DIV id="UI"></DIV>

<SCRIPT>
//The cell content may be small
var SmallString="Cell Content";

var TableString="<TABLE border=1>";

var Before = new Date();
//...but performance suffers when 
//you join thousands of strings 
for (var i=0;i<1000;i++)
{
	TableString += "<TR>";
	for (var j=0;j<20;j++)
	{
		TableString += "<TD>" 
			+ SmallString 
			+ "</TD>";
	}
	TableString += "</TR>";
}
var After = new Date();

TableString += "</TABLE>";
		
UI.innerHTML = TableString;
alert ((After-Before)/1000);
</SCRIPT>

</BODY>
</HTML>

The Conventional Method of String Concatenation

In the example code (shown right) you can see that Strings are combined together using the '+' operator. The problem with this technique is that the JavaScript processing engine inside the browser is creating many intermediate Strings in memory. Every concatenation makes this worse. While the results of it are negligible for small tables, the performance hit can rapidly get worse when you are writing applications that have to process real-world CAD data.

Num ColsNum RowsNum CellsTime (sec)
10100010,0000.67
15100015,0002.89
10150015,0003.63
20100020,0006.95
15150022,50010.42
20150030,00020.19

I've taken the liberty of capturing the performance hit on my Dell M4300 Laptop inside IE6. While you may be happy to take a 2 second hit, you'll likely not lose sleep over a 4 second or 5 second wait but you will get user feedback when your applications are taking 20+ seconds with no logical reason why.

It is clear that processing time can be significant for this operation (note the time is only for String Concatenation commands and does not include the time taken for the Browser to dynamically render the code). Fortunately there is a technique using JavaScripts built-in Array methods to more efficiently acheive the same result.

<HTML>
<BODY>
<DIV id="UI"></DIV>

<SCRIPT>
//The cell content may be small
var SmallStr="Cell Content";

//Put each substring into an Array
var TableStr=new Array();
TableStr[0]="<TABLE border=1>";

var Before = new Date();
//...compare time taken to fill up the
// array in comparison
for (var i=0;i<1500;i++)
{
  TableStr[TableStr.length]="<TR>";
  for (var j=0;j<20;j++)
  {
    TableStr[TableStr.length]="<TD>";
    TableStr[TableStr.length]=SmallStr; 
    TableStr[TableStr.length]="</TD>";
  }
  TableStr[TableStr.length]="</TR>";
}

TableStr[TableStr.length]="</TABLE>";

//Use Array.join('') to concatenate
var Result = TableStr.join('');
var After = new Date();
UI.innerHTML = Result;
alert ((After-Before)/1000);
</SCRIPT>

</BODY>
</HTML>

The Array.join() Method of String Concatenation

The code (shown right) has been modified to now utilise the JavaScript Array methodology. Instead of concatenating constantly as the loop runs, instead the Array is added with each little peice. Then at the end Array.join('') is called which creates a single String from all the members of the Array.

Num ColsNum RowsNum CellsTime (sec)Improvement
10100010,0000.09Negligible
15100015,0000.1Good
10150015,0000.09Good
20100020,0000.09Great
15150025,5000.12Fantastic
20150030,0000.1Oh My God
30300090,0000.4Didn't Check

I've again taken the liberty of capturing the performance on my Dell M4300 Laptop inside IE6. I think you'll be rather more accepting of these numbers.

But why does this work? Basically Array population results in the creation of a small variable each time. This is in comparison to the creation of a big String variable each time with the standard approach.

The results are overwhelming improvements for concatenation time. This method for working with Strings in JavaScript is provided as a StringBuilder class

Technique Encapsulated in the StringBuilder Class

<SCRIPT src="JS/StringBuilder.js"></SCRIPT>

You can get the StringBuilder class (or equivalent) from many places on the internet including here. To leverage the Class, first link the StringBuilder.js file into your HTML page using a statement such as shown right.

var MyStringBuilder = new StringBuilder();
MyStringBuilder.Append("String ");
MyStringBuilder.Append("Builder");
MyStringBuilder.Append("Rocks");

alert (MyStringBuilder.ToString());

The StringBuilder class can then be used in the following manner:

  • Create a new StringBuilder object into which you will put your characters.
  • Use StringBuilder.Append() to Append characters into the object.
  • Use StringBuilder.ToString() to return a true String.

    Conclusion

    String concatenation isn't a major concern to Pro/Web.Link programmers provided an appropriate-for-the-task technique is leveraged. JavaScript is a wonderfully flexible language and better yet many performance enhancing techniques are wrapped up into ready-to-use scripts available from many places on the Internet.