Building large strings in JavaScript ; Is join method most efficient?

Question

In writing a database to disk as a text file of JSON strings, I've been experimenting with how to most efficiently build the string of text that is ultimately converted to a blob for download to disk.

There a number of questions that state to not concatenate a string with the + operator in a loop, but instead write the component strings to an array and then use the join method to build one large string.

The best explanation I came across explaining why can be found here, by Jeol Mueller:

In JavaScript (and C# for that matter) strings are immutable. They can never be changed, only replaced with other strings. You're probably aware that combined + "hello " doesn't directly modify the combined variable - the operation creates a new string that is the result of concatenating the two strings together, but you must then assign that new string to the combined variable if you want it to be changed.

So what this loop is doing is creating a million different string objects, and throwing away 999,999 of them. Creating that many strings that are continually growing in size is not fast, and now the garbage collector has a lot of work to do to clean up after this."

The thread here, was also helpful.

However, using the join method didn't allow me to build the string I was aiming for without getting the error:

allocation size overflow

I was trying to write 50,000 JSON strings from a database into one text file, which simply may have been too large no matter what. I think it was reaching over 350MB. I was just testing the limit of my application and picked something far larger than a user of the application will likely ever create. So, this test case was likely unreasonable.

Nonetheless, this leaves me with three questions about working with large strings.

---

1. For the same amount of data overall, does altering the number of array elements joined in a single join operation affect the efficiency in terms of not hitting an allocation size overflow?

   For example, I tried writing the JSON strings to a pseudo 3-D array of 100 (and then 50) elements per dimension; and then looped through the outer two dimensions joining them together. 100^3 = 1,000,000 or 50^3 = 125,000 both provide more than enough entries to hold the 50,000 JSON strings. I know I'm not including the 0 index, here.

   So, the 50,000 strings were held in an array from a[1][1][1] to a5[100][100] in the first attempt and of a[1][1][1] to a[20][50][50] in the second attempt. If the dimensions are i, j, k from outer to inner, I joined all the k elements in each a[i][j]; and then joined all of those i x j joins, and lastly all of these i joins into the final text string.

   All attemtps still hit the allocation size overflow before completing.

   So, is there any difference between joining 50,000 smaller strings in one join versus 50 larger strings, if the total data is the same?

---

2. Is there a better, more efficient way to build large strings than the join method?

---

3. Does the same principle described by Joel Mueller regarding string concatenation apply to reducing a string through substring, such as string = string.substring(position)?

   The context of this third question is that when I read a text file in as a string and break it down into its component JSON strings before writing to the database, I use an array that is map of the file layout; so, I know the length of each JSON string in advance and repeat three statements inside a loop:

   l = map[i].l;
   str = text.substring(0,l);
   text = text.substring(l).  
   

   It would appear that since strings are immutable, this sort of reverse of concatenation step is as inefficient as using the + operator to concatenate.

   Would it be more efficient to not delete the str from text each iteration, and just keep track of the increasing start and end positions for the substrings as step through the loop reading the entire text string?

Response to message about duplicate question

I got a message, I guess from the stackoverflow system itself, asking me to edit my question explaining why it is different from the proposed duplicate.

Reasons are:

1. The proposed duplicate asks specifically and exclusively about the maximum size of a single string. None of the three bolded questions, here, asks about the maximum size of a single string, although that is useful to know.

2. This question asks about the most efficient way of building large strings and that isn't addressed in the answers found in the proposed duplicate, apart from an efficent way of building a large test string. They don't address how to build a realistic string, comprised of actual application data.

3. This question provides a couple links to some information concerning the efficiency of building large strings that may be helpful to those interested in more than the maximum size alone.

4. This question also has a specific context of why the large string was being built, which led to some suggestions about how to handle that situation in a more efficient manner. Although, in the strictest sense, they don't specifically address the question by title, they do address the broader context of the question as presented, which is how to deal with the large strings, even if that means ways to work around them. Someone searching on this same topic might find real help in these suggestions that is not provided in the proposed duplicate.

So, although the proposed duplicate is somewhat helpful, it doesn't appear to be anywhere near a genuine duplicate of this question in its full context.

Additional Information

This doesn't answer the question concerning the most efficient way to build a large string, but it refers to the comments about how to get around the string size limit.

Converting each component string to a blob and holding them in an array, and then converting the array of blobs into a single blob, accomplished this. I don't know what the size limit of a single blob is, but did see 800MB in another question.

A process (or starting point) for creating the blob to write the database to disk and then to read it back in again can be found here.

Regarding the idea of writing the blobs or strings to disk as they are generated on the client as opposed to generating one giant string or blob for download, although the most logical and efficient method, may not be possible in the scenario presented here of an offline application.

According to this question, web extensions no longer have access to the privileged javascript code necessary to accomplish this through the File API.

I asked this question related to the Streams API write stream method and something called StreamSaver.

Answer 1

In writing a database to disk as a text file of JSON strings.

I see no reason to store the data in a string or array of strings in this case. Instead you can write the data directly to the file.

• In the simplest case you can write each string to the file separately.
• To get better performance, you could first write some data to a smaller buffer, and then write that buffer to disk when it's full.
• For best performance you could create a file of a certain size and create a memory mapping over that file. Then write/copy the data directly to the mapped memory (which is your file). The trick would be to know or guess the size up front, or you could resize the file when needed and then remap the file.

Joining or growing strings will trigger a lot of memory (re)allocations, which is unnecessary overhead in this case.

---

I don't want the user to have to download more than one file

If the goal is to let a user download that generated file, you could even do better by streaming those strings directly to the user without even creating a file. This also has the advantage that the user starts receiving data immediately instead of first having to wait till the whole file is generated.

Because the file size is not known up front, you could use chunked transfer encoding.