Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New Coder
    Join Date
    Dec 2006
    Posts
    95
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Which of these two cases involving a variable would be faster?

    I really didn't know how to explain what I am asking simply in the title, so forgive me for the ambiguous subject, but I am asking if either of these would be faster than the other?

    Example:

    var html = "<table>" +
    "<tr>" +
    "<td>";

    vs.

    var html = "<table>";
    html += "<tr>";
    html += "<td>";

  • #2
    Senior Coder A1ien51's Avatar
    Join Date
    Jun 2002
    Location
    Between DC and Baltimore In a Cave
    Posts
    2,717
    Thanks
    1
    Thanked 94 Times in 88 Posts
    why don't you make up a test that does a bunch of them in a loop and seems what happens.

    Eric
    Tech Author [Ajax In Action, JavaScript: Visual Blueprint]

  • #3
    Senior Coder A1ien51's Avatar
    Join Date
    Jun 2002
    Location
    Between DC and Baltimore In a Cave
    Posts
    2,717
    Thanks
    1
    Thanked 94 Times in 88 Posts
    I might actually do this test.... We will see if anything good is on tv...If not I guess I will have a blog entry..

    lol

    Eric
    Tech Author [Ajax In Action, JavaScript: Visual Blueprint]

  • #4
    New Coder
    Join Date
    Dec 2006
    Posts
    95
    Thanks
    4
    Thanked 0 Times in 0 Posts
    I did a small test, but as expected there was no noticeable difference. I figured since it wasn't too big of a change since it was a small example that there would be no real difference in speed, but I was just asking for the long run of things.

  • #5
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,639
    Thanks
    0
    Thanked 649 Times in 639 Posts
    The first one is shorter and so should be slightly faster for the page to load. The Javascript commands are the same so that probably wont make any difference.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #6
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    It's all dependent on which scripting engine is used and how that engine deals with string concatenations. If the engine is smart (SpiderMonkey), the byte code will be the same for those two examples. If the engine isn't (JScript), the byte code for the latter will have to look up the html variable each time. In both cases, the engine will have to create a lot of intermediaries that are later thrown away.
    However, if the engine is really smart, it will use a string builder facility internally, so it doesn't produce as many intermediaries.

    If you want to make string concatenation fast, you should do it like this instead:
    Code:
    var
        html=[
            '<table>',
            '<tr>',
            '<td>'].join('');
    Of course, speed for things like this is rarely an issue unless you're adding LOTS of small strings together. With just three like in this case, it will hardly make any difference.
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #7
    Senior Coder A1ien51's Avatar
    Join Date
    Jun 2002
    Location
    Between DC and Baltimore In a Cave
    Posts
    2,717
    Thanks
    1
    Thanked 94 Times in 88 Posts
    Well you lost out to a broken pipe under my sink. I ran a small test and got some surpries with speed differences in IE and Firefox and Opera. (I also did the join because there was a talk about that here in the past.) Hopefully I can get my findings in a readable format.

    Eric
    Tech Author [Ajax In Action, JavaScript: Visual Blueprint]

  • #8
    New Coder
    Join Date
    Dec 2006
    Posts
    95
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Thanks, liorean.

    I will also await your findings too, when you get the chance.

  • #9
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    Well, I did some testing, a very artificial and contrived test.

    The results from Opera 9.03.8675 were as follows:
    Code:
    true
    array joining: 610
    true
    string concat: 500
    true
    + operator with vars: 1140
    true
    + operator: 938
    true
    += operator: 1110
    Evidently, strings using the concat method were fastest here. The program grew in memory by about 11MiB when loading the page, and didn't drop in size after finishing.


    The results from Firefox 2.0 were as follows:
    Code:
    true
    array joining: 3657
    true
    string concat: 1063
    true
    + operator with vars: 1078
    true
    + operator: 0
    true
    += operator: 1484
    Firefox surprised me by the lousy performance for array joining. The + operator is clearly exceptional here - SpiderMonkey clearly does some compiler optimisations and constant folding, which makes that test blazingly fast. However, I would expect that to only apply for cases where ALL the strings added together are compile time constants. (That's how JScript.NET behaves, from what I've been told.) The browser memory grew some 50MiB in size while computing, settling at a final size of about 10MiB larger.




    Internet Explorer 6.0 clearly has problems with strings. Running that program, it continuously grew by about 500MiB, then shrunk to 50MiB, then grew and so on ad infinitum. I changed the test to make just a single iteration instead of one hundred iterations for ie and tried again. It still grew by about 500MiB while calculating, but it settled down at about 17MiB above original size.
    Code:
    true
    array joining: 47
    true
    string concat: 1094
    true
    + operator with vars: 1453
    true
    + operator: 1125
    true
    += operator: 4625
    Note that these numbers come from doing ONE SINGLE iteration, NOT ONE HUNDRED iterations like the other browser tests!
    The efficiency of doing join on arrays is just massive compared to the other methods. And since ie6 needs by several orders of magnitude more time to do string concatenation than the other browsers, I think the won from using array joining is evident.


    Swift 0.2 (WebKit on Win32)
    Code:
    true
    array joinin: 547
    true
    string concat: 468
    true
    + operator with vars: 8078
    true
    + operator: 10782
    true
    += operator: 5984
    Again, string concatenation is fastest followed by array joining. Since this is WebKit, Safari on Mac OS X should exhibit similar performance.






    CONCLUSION:
    concat is generally the best way to build strings. Except for one thing: Internet Explorer/JScript has absolutely abyssal performance for all but one method of building strings - array joining. Now, array joining is the slowest way to build a string in Firefox/SpiderMonkey, but on the other hand the performance isn't even nearly as bad as Internet Explorer using any of the other ways of building the string.

    What's worth more, a hundred times better performance in Internet Explorer, which has the absolutely worst performance of the tested browsers; or three times better performance in Firefox?
    Last edited by liorean; 12-12-2006 at 05:56 PM.
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #10
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    Some stats from Safari 1.3 from my 900MHz G3 iBook as well:
    Code:
    true
    array joining: 1417
    true
    string concat: 2973
    true
    + operator with vars: 60987
    true
    + operator: 64147
    true
    += operator: 15844
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #11
    Senior Coder A1ien51's Avatar
    Join Date
    Jun 2002
    Location
    Between DC and Baltimore In a Cave
    Posts
    2,717
    Thanks
    1
    Thanked 94 Times in 88 Posts
    I found about the same thing, IE would freeze in tests I ran that the others would fly through. Opera had some good numbers also.

    Eric
    Tech Author [Ajax In Action, JavaScript: Visual Blueprint]


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •