Building HTML - String vs Array

  • Thread starter Java script Dude
  • Start date
J

Java script Dude

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
 
R

RobG

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.
Click to expand...

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.
 
D

Doug Gunnoe

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.
Click to expand...

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.
 
T

timothytoe

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.
Click to expand...

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.
 
T

tim.c.quinn

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("")
~
Click to expand...
I have reviewed code from several enterprise JavaScript based sites
and find a mixture of both methods.
Click to expand...
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.
Click to expand...
Has anybody done similar tests and what were your results and your
decision for your applications.
Click to expand...

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.
Click to expand...

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~
 
E

Evertjan.

wrote on 10 feb 2008 in comp.lang.javascript:
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("")
~
Click to expand...
I have reviewed code from several enterprise JavaScript based sites
and find a mixture of both methods.
Click to expand...
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.
Click to expand...
Has anybody done similar tests and what were your results and your
decision for your applications.
Click to expand...

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.
Click to expand...

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>
Click to expand...

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!!!
 
T

timothytoe

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.
Click to expand...
Click to expand...
The real issue is that IE is painfully slow using the += compound
operator.  Instead use something like:
Click to expand...
  s = s + someHTML;
Click to expand...
Use either arrays or string concatenation, whichever suits.
Click to expand...

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~
Click to expand...

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.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Collect Excel Data from Website 5
String vs new String 8
RFC: Building the Perfect Tabbed Pane (an tutorial article) 69
Monoliths vs. "Microlibraries" 5
String truncated 2
YUI--doomed? 7
more details on jscript memory leak from DOM object references 4
Sencha Touch--Support 2 browsers in just 228K! 64

Members online

Total: 28 (members: 1, guests: 27)
Robots: 315

Forum statistics

Threads
473,755
Messages
2,569,535
Members
45,007
Latest member
obedient dusk

Latest Threads

Top