Building HTML - String vs Array

Discussion in 'Javascript' started by Java script Dude, Feb 9, 2008.

  1. 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
    Java script Dude, Feb 9, 2008
    #1
    1. Advertising

  2. Java script Dude

    RobG Guest

    On Feb 9, 12:13 pm, Java script Dude <> 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
    RobG, Feb 9, 2008
    #2
    1. Advertising

  3. Java script Dude

    Doug Gunnoe Guest

    On Feb 8, 8:13 pm, Java script Dude <> 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.
    Doug Gunnoe, Feb 9, 2008
    #3
  4. Java script Dude

    timothytoe Guest

    On Feb 9, 11:34 am, Doug Gunnoe <> wrote:
    > On Feb 8, 8:13 pm, Java script Dude <> 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.
    timothytoe, Feb 9, 2008
    #4
  5. Java script Dude

    Guest

    On Feb 9, 5:15 am, RobG <> wrote:
    > On Feb 9, 12:13 pm, Java script Dude <> 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~
    , Feb 10, 2008
    #5
  6. Java script Dude

    Evertjan. Guest

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

    > On Feb 9, 5:15 am, RobG <> wrote:
    >> On Feb 9, 12:13 pm, Java script Dude <> 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)
    Evertjan., Feb 10, 2008
    #6
  7. Java script Dude

    timothytoe Guest

    On Feb 9, 6:25 pm, wrote:
    > On Feb 9, 5:15 am, RobG <> wrote:
    >
    >
    >
    > > On Feb 9, 12:13 pm, Java script Dude <> 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.
    timothytoe, Feb 10, 2008
    #7
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. =?Utf-8?B?TWFyYyBDYXN0cmVjaGluaQ==?=

    Building Dataset from Class Array

    =?Utf-8?B?TWFyYyBDYXN0cmVjaGluaQ==?=, Feb 27, 2004, in forum: ASP .Net
    Replies:
    0
    Views:
    342
    =?Utf-8?B?TWFyYyBDYXN0cmVjaGluaQ==?=
    Feb 27, 2004
  2. =?Utf-8?B?TWFyYyBDYXN0cmVjaGluaQ==?=

    Building Dataset from Class Array

    =?Utf-8?B?TWFyYyBDYXN0cmVjaGluaQ==?=, Feb 27, 2004, in forum: ASP .Net
    Replies:
    4
    Views:
    4,306
    Steven Cheng[MSFT]
    Mar 5, 2004
  3. =?Utf-8?B?UmFqZXNoIHNvbmk=?=

    'System.String[]' from its string representation 'String[] Array'

    =?Utf-8?B?UmFqZXNoIHNvbmk=?=, May 4, 2006, in forum: ASP .Net
    Replies:
    0
    Views:
    1,781
    =?Utf-8?B?UmFqZXNoIHNvbmk=?=
    May 4, 2006
  4. Midex
    Replies:
    24
    Views:
    866
  5. Lloyd Zusman
    Replies:
    5
    Views:
    117
    TomRossi7
    Nov 21, 2005
Loading...

Share This Page