Memory overflow in Javascript with "+="

Question

I need to concat hundreds of Javascript strings like this:

var result = '';
for (var i = 0; i < 300; i ++ ) {
    result += DATA[i] + 'Some Dynamic Text';
}

The DATA[i] is pretty large (Like 300KB or more, it's image's base64 represents).

When I execute this code, the browser pops up an memory overflow error.(The break point is result += DATA[i])

How can I optimize this code to avoid this kind of memory issue ?

==== EDIT ====
I didn't make it clear before, so you can consider the DATA[i] is pretty large and I can't change it. Every concat is also append some dynamic text.

I can't replicate the problem: http://jsfiddle.net/SDtjW/ It sounds strange that that amount of data would cause memory errors. Can you show an example that throws the error? — JJJ, Aug 12 '13 at 10:41
This might help you https://developers.google.com/speed/articles/optimizing-javascript — Joren, Aug 12 '13 at 10:45
At first the data was "about 100 characters" and now it's "pretty large". So how large, in characters, is the array and the resulting string in total? — JJJ, Aug 12 '13 at 10:48
@Juhana, Sorry I didn't make it clear, I just update my question. — WoooHaaaa, Aug 12 '13 at 10:50
would it be possible to store the result in an array ? it would allow you more flexibility. — GameAlchemist, Aug 12 '13 at 11:39

Andreas Louv · Answer 1 · 2013-08-12T14:45:41.310

0

You can debug using a try {} catch:

var result = '';
for (var i = 0; i < 300; i ++ ) {
    try {
      result += DATA[i];
    }
    catch ( e ) {
        console.log('An error occured on DATA[' + i + ']');
        console.log('Value:' + DATA[i]);
        console.log(e);
    }
}

Why would you store an image in base64 and send it to the front end, because you want to store it offline? Isn't that that cache control is for?

Without any more information i cannot suggest you to use that approach :(

But rater look into how to set a long lasting cache on the image itself.

Btw, you can use Array.join if DATA is a native array:

var result = DATA.join('');

If DATA is an array like object (arguments, {'0': 1, '1': 2, length: 2}) you can use:

var result = [].join.call(DATA, '');

This want solve your memory overflow, but will be faster.

edited Aug 12 '13 at 14:45

answered Aug 12 '13 at 10:46

Andreas Louv

46,145
13
104
123

1

You missed a zero, 300kB ~= 300 * 1000 – Gareth Aug 12 '13 at 10:51
@Gareth OP started stating that each element in the array? is 100 chars long – Andreas Louv Aug 12 '13 at 10:54
Ah ok, I didn't realise that the question had changed there. – Gareth Aug 12 '13 at 11:05

score 0 · Answer 2 · edited May 23 '17 at 10:25

0

Please look here .. This should help you

Javascript and VERY LONG string

Also please look at Javascript StringBuilder at -

http://www.codeproject.com/Articles/12375/JavaScript-StringBuilder

edited May 23 '17 at 10:25

Community

1
1

answered Aug 12 '13 at 11:28

abipc

997
2
13
35

score -1 · Answer 3 · answered Aug 12 '13 at 10:38

-1

What if you use

result = DATA.join("");

answered Aug 12 '13 at 10:38

Krasimir

13,306
3
40
55

1

Obviously this won't work since the same amount of memory is required for the operation. – Joren Aug 12 '13 at 10:42
@Joren: Thing is, though...it's not. With the loop, each concat creates another string. If we go with the OP's numbers, 300KB * 300 == 90MB total; building `result` by catting creates ~150x that (over 13GB!) in garbage over the course of 300 concats. Depending on how the implementation's GC works (which ECMA doesn't specify), that garbage might stick around til the browser gets control back. `.join()`, on the other hand -- particularly since it's typically implemented in native code -- almost certainly knows how to create a string without hundreds of intermediate objects. – cHao Aug 12 '13 at 16:14

Memory overflow in Javascript with "+="

3 Answers3