String Concatenation Performance in Web Browsers

The coding example below was inspired by a challenge I recently considered:

I’d like a String Buffer. It should be optimized for prepend, append, and read-all operations. The prepend / append should accept variable length chunks of immutable data — assume something like a Java Strings or C arrays. Prepend / append will be roughly 10x more frequent than read. Describe an implementation and why you chose it.

Since the challenge did not specify a language and since my purpose here is to demonstrate useful coding techniques, I went ahead and created a JavaScript test bed which you can run and modify yourself.

The test bed allows one to try different prepend, append, and read-all algorithms to see which require the least time to complete.  It is designed to enable one to easily vary the maximum size of the strings being concatenated, the number of times the strings are concatenated and the relative frequency of Append / Prepend or Read-All.

Further, it includes a self-test feature and demonstrates programming techniques intended to be clear to the reviewer while providing a robust and inviting testing capability.

To run and explore the test bed, open the following web page:

https://bseaver.jsbin.com/puvoto/edit?js,console

What I found while researching string concatenation performance, is that there are posts still on the web from previous years that recommend using special code to improve string concatenation performance in JavaScript.  For example where strBuffer is an array and pre and app are strings,  prepend may be “strBuffer.unshift(pre)”,  append may be “strBuffer.push(app)” and Read-All may be “strBuffer.join(”)”.

What I found during my testing is that there are practically no use cases using current browsers (including Internet Explorer) where the special code code improved performance at all.  In fact the special code generally dramatically slows down performance!  Bottom line: concatenate strings today in JavaScript with the plus (+) operator.

If a colleague issued the above challenge as a sincere work request, before coming up with an answer I might have the following questions:

Is there a known or perceived problem with string concatenation that he or she has in mind?

Are there particular use cases which have this problem? For example, does the problem occur only when customers A and B do processes X and Y as part of their end of month operations?

What is the nature of the programming environment in which the string concatenation is an issue?  For example does the problem occur in code written in C or Java or JavaScript in Web Browsers? 

Where does the applicable code run?  For example is it on our server, a third party’s’ server or a client’s Web Browser?

Is the environment periodically updated by third parties or is its version entirely under our control? 

If one were to write special code to improve the performance of string concatenation, it would be prudent to periodically revisit specific performance testing since web browsers or compilers and interpreters of computer languages are periodically revised and since the computers and servers running the code are periodically replaced or upgraded.  Efforts to improve performance may become outdated and thus can create unnecessary complexity and even slow down an application.

 

Leave a Reply