Building HTML - String vs Array
 

When building HTML in JavaScript when using JS DOM
(document.createElement(strType)) is not effective, there are
basically two methods for doing this:
1) Concatenate Strings:
var s="";
s+="<some_html>";
s+="<some_more_html>"//...
someElem.innerHTML=s
~
2) Build Using Arrays:
var a=[];
a.push("<some_html>");
a.push("<_more_html>");
someElem.innerHTML=a.join("")
~

I have reviewed code from several enterprise JavaScript based sites
and find a mixture of both methods.

Doing some simple performance testing I found that Internet Explorer
is ~3 faster with Arrays than Strings. Mozilla is ~2.5 times faster
with Strings than Arrays.

Has anybody done similar tests and what were your results and your
decision for your applications.

JsD

Re: Building HTML - String vs Array
 

On Feb 9, 12:13*pm, Java script Dude <despam2...@yahoo.ca> wrote:
> When building HTML in JavaScript when using JS DOM
> (document.createElement(strType)) is not effective, there are
> basically two methods for doing this:
> 1) Concatenate Strings:
> var s="";
> s+="<some_html>";
> s+="<some_more_html>"//...
> someElem.innerHTML=s
> ~
> 2) Build Using Arrays:
> var a=[];
> a.push("<some_html>");
> a.push("<_more_html>");
> someElem.innerHTML=a.join("")
> ~
>
> I have reviewed code from several enterprise JavaScript based sites
> and find a mixture of both methods.
>
> Doing some simple performance testing I found that Internet Explorer
> is ~3 faster with Arrays than Strings. Mozilla is ~2.5 times faster
> with Strings than Arrays.
>
> Has anybody done similar tests and what were your results and your
> decision for your applications.

The real issue is that IE is painfully slow using the += compound
operator. Instead use something like:

s = s + someHTML;

Use either arrays or string concatenation, whichever suits.


--
Rob

Re: Building HTML - String vs Array
 

On Feb 8, 8:13*pm, Java script Dude <despam2...@yahoo.ca> wrote:

> Doing some simple performance testing I found that Internet Explorer
> is ~3 faster with Arrays than Strings. Mozilla is ~2.5 times faster
> with Strings than Arrays.

I would expect string concatenation to be slower than pushing stuff
onto an array based stack. But then again I have no idea what kind of
algorithm is being used for string concatenation in these systems. I
just can't imagine a case where inserting a string at the end of an
array could be slower than concatenation.

Re: Building HTML - String vs Array
 

On Feb 9, 11:34 am, Doug Gunnoe <douggun...@gmail.com> wrote:
> On Feb 8, 8:13 pm, Java script Dude <despam2...@yahoo.ca> wrote:
>
> > Doing some simple performance testing I found that Internet Explorer
> > is ~3 faster with Arrays than Strings. Mozilla is ~2.5 times faster
> > with Strings than Arrays.
>
> I would expect string concatenation to be slower than pushing stuff
> onto an array based stack. But then again I have no idea what kind of
> algorithm is being used for string concatenation in these systems. I
> just can't imagine a case where inserting a string at the end of an
> array could be slower than concatenation.

From what I've seen, IE is almost always the slowest browser, so I
optimize for IE. I use the array method when I have a big string to
build. The syntax isn't all that bad.

Re: Building HTML - String vs Array
 

On Feb 9, 5:15 am, RobG <rg...@iinet.net.au> wrote:
> On Feb 9, 12:13 pm, Java script Dude <despam2...@yahoo.ca> wrote:
>
>
>
> > When building HTML in JavaScript when using JS DOM
> > (document.createElement(strType)) is not effective, there are
> > basically two methods for doing this:
> > 1) Concatenate Strings:
> > var s="";
> > s+="<some_html>";
> > s+="<some_more_html>"//...
> > someElem.innerHTML=s
> > ~
> > 2) Build Using Arrays:
> > var a=[];
> > a.push("<some_html>");
> > a.push("<_more_html>");
> > someElem.innerHTML=a.join("")
> > ~
>
> > I have reviewed code from several enterprise JavaScript based sites
> > and find a mixture of both methods.
>
> > Doing some simple performance testing I found that Internet Explorer
> > is ~3 faster with Arrays than Strings. Mozilla is ~2.5 times faster
> > with Strings than Arrays.
>
> > Has anybody done similar tests and what were your results and your
> > decision for your applications.
>
> The real issue is that IE is painfully slow using the += compound
> operator. Instead use something like:
>
> s = s + someHTML;
>
> Use either arrays or string concatenation, whichever suits.
>
> --
> Rob

Hello Rob,

I tried using IE 6 and += seems to be faster than s = s + "xxx".

Here is the performance test I am doing:
<html>
<head>
<title>String Build Performance Tester</title>

<script>
function doTest(){
var
iItr=10000,sHtml="",iSWS1
,iSWD1,iSWS2,iSWD2,iSWS3,iSWD3
,aHtml=[]
;

sHtml=""
iSWS1 = (new Date()).getTime()
for(var i=0;i<iItr;i++){sHtml+=__()}
iSWD1 = (new Date()).getTime()

sHtml=""
iSWS2 = (new Date()).getTime()
for(var i=0;i<iItr;i++){sHtml=sHtml+__()}
iSWD2 = (new Date()).getTime()

sHtml=""
iSWS3 = (new Date()).getTime()
for(var i=0;i<iItr;i++){aHtml.push(__())}
sHtml=aHtml.join()
iSWD3 = (new Date()).getTime()

alert(
"Test Results:"
+"\n. Concat 1 (+=) = "+((iSWD1-iSWS1)/1000)+"s"
+"\n. Concat 2 (s=s+) = "+((iSWD2-iSWS2)/1000)+"s"
+"\n. Array Join = "+((iSWD3-iSWS3)/1000)+"s"
)

function __(){ return new String(Math.random())}
}
</script>
</head>

<body>
<script>doTest()</script>
</body>
</html>
~end code~

Re: Building HTML - String vs Array
 

wrote on 10 feb 2008 in comp.lang.javascript:

> On Feb 9, 5:15 am, RobG <rg...@iinet.net.au> wrote:
>> On Feb 9, 12:13 pm, Java script Dude <despam2...@yahoo.ca> wrote:
>>
>>
>>
>> > When building HTML in JavaScript when using JS DOM
>> > (document.createElement(strType)) is not effective, there are
>> > basically two methods for doing this:
>> > 1) Concatenate Strings:
>> > var s="";
>> > s+="<some_html>";
>> > s+="<some_more_html>"//...
>> > someElem.innerHTML=s
>> > ~
>> > 2) Build Using Arrays:
>> > var a=[];
>> > a.push("<some_html>");
>> > a.push("<_more_html>");
>> > someElem.innerHTML=a.join("")
>> > ~
>>
>> > I have reviewed code from several enterprise JavaScript based sites
>> > and find a mixture of both methods.
>>
>> > Doing some simple performance testing I found that Internet Explorer
>> > is ~3 faster with Arrays than Strings. Mozilla is ~2.5 times faster
>> > with Strings than Arrays.
>>
>> > Has anybody done similar tests and what were your results and your
>> > decision for your applications.
>>
>> The real issue is that IE is painfully slow using the += compound
>> operator. Instead use something like:
>>
>> s = s + someHTML;
>>
>> Use either arrays or string concatenation, whichever suits.
>>
>> --
>> Rob
>
> Hello Rob,
>
> I tried using IE 6 and += seems to be faster than s = s + "xxx".
>
> Here is the performance test I am doing:
> <html>
> <head>
> <title>String Build Performance Tester</title>
>
> <script>
> function doTest(){
> var
> iItr=10000,sHtml="",iSWS1
> ,iSWD1,iSWS2,iSWD2,iSWS3,iSWD3
> ,aHtml=[]
> ;
>
> sHtml=""
> iSWS1 = (new Date()).getTime()
> for(var i=0;i<iItr;i++){sHtml+=__()}
> iSWD1 = (new Date()).getTime()
>
> sHtml=""
> iSWS2 = (new Date()).getTime()
> for(var i=0;i<iItr;i++){sHtml=sHtml+__()}
> iSWD2 = (new Date()).getTime()
>
> sHtml=""
> iSWS3 = (new Date()).getTime()
> for(var i=0;i<iItr;i++){aHtml.push(__())}
> sHtml=aHtml.join()
> iSWD3 = (new Date()).getTime()
>
> alert(
> "Test Results:"
> +"\n. Concat 1 (+=) = "+((iSWD1-iSWS1)/1000)+"s"
> +"\n. Concat 2 (s=s+) = "+((iSWD2-iSWS2)/1000)+"s"
> +"\n. Array Join = "+((iSWD3-iSWS3)/1000)+"s"
> )
>
> function __(){ return new String(Math.random())}
>}
> </script>
> </head>
>
> <body>
> <script>doTest()</script>

If you change the above line to:

<button onclick='doTest()'>do test</button>

and do the test repeatedly [IE7],
you will see that sometimes concat1 is faster, sometimes concat2,
while join is the big, big looser.

Ubder FF@ this is the same,
but here they are both faster than the array join!!!

> </body>
> </html>
> ~end code~
>
>



--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

Re: Building HTML - String vs Array
 

On Feb 9, 6:25*pm, tim.c.qu...@gmail.com wrote:
> On Feb 9, 5:15 am, RobG <rg...@iinet.net.au> wrote:
>
>
>
> > On Feb 9, 12:13 pm, Java script Dude <despam2...@yahoo.ca> wrote:
>
> > > When building HTML in JavaScript when using JS DOM
> > > (document.createElement(strType)) is not effective, there are
> > > basically two methods for doing this:
> > > 1) Concatenate Strings:
> > > var s="";
> > > s+="<some_html>";
> > > s+="<some_more_html>"//...
> > > someElem.innerHTML=s
> > > ~
> > > 2) Build Using Arrays:
> > > var a=[];
> > > a.push("<some_html>");
> > > a.push("<_more_html>");
> > > someElem.innerHTML=a.join("")
> > > ~
>
> > > I have reviewed code from several enterprise JavaScript based sites
> > > and find a mixture of both methods.
>
> > > Doing some simple performance testing I found that Internet Explorer
> > > is ~3 faster with Arrays than Strings. Mozilla is ~2.5 times faster
> > > with Strings than Arrays.
>
> > > Has anybody done similar tests and what were your results and your
> > > decision for your applications.
>
> > The real issue is that IE is painfully slow using the += compound
> > operator. *Instead use something like:
>
> > * s = s + someHTML;
>
> > Use either arrays or string concatenation, whichever suits.
>
> > --
> > Rob
>
> Hello Rob,
>
> I tried using IE 6 and += seems to be faster than s = s + "xxx".
>
> Here is the performance test I am doing:
> <html>
> <head>
> * * <title>String Build Performance Tester</title>
>
> <script>
> function doTest(){
> * * var
> * * * * iItr=10000,sHtml="",iSWS1
> * * * *,iSWD1,iSWS2,iSWD2,iSWS3,iSWD3
> * * * *,aHtml=[]
> * * ;
>
> * * sHtml=""
> * * iSWS1 = (new Date()).getTime()
> * * for(var i=0;i<iItr;i++){sHtml+=__()}
> * * iSWD1 = (new Date()).getTime()
>
> * * sHtml=""
> * * iSWS2 = (new Date()).getTime()
> * * for(var i=0;i<iItr;i++){sHtml=sHtml+__()}
> * * iSWD2 = (new Date()).getTime()
>
> * * sHtml=""
> * * iSWS3 = (new Date()).getTime()
> * * for(var i=0;i<iItr;i++){aHtml.push(__())}
> * * sHtml=aHtml.join()
> * * iSWD3 = (new Date()).getTime()
>
> * * alert(
> * * * * "Test Results:"
> * * * *+"\n. Concat 1 (+=) = "+((iSWD1-iSWS1)/1000)+"s"
> * * * *+"\n. Concat 2 (s=s+) = "+((iSWD2-iSWS2)/1000)+"s"
> * * * *+"\n. Array Join = "+((iSWD3-iSWS3)/1000)+"s"
> * * )
>
> * * function __(){ return new String(Math.random())}}
>
> </script>
> </head>
>
> <body>
> * * <script>doTest()</script>
> </body>
> </html>
> ~end code~

It all depends on how badly you want performance. For a realtime
application like a game, you'd figure out what worked the fastest
(maybe at install or load time, or based upon a hardware database).

For websites, you just try to balance code size, maintainability and
performance. At this time, I'm mostly writing for Firefox and then
optimizing for IE. As more installed basse moves to faster IE, that
may change for me.