SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Evangelist Maujor's Avatar
    Join Date
    Mar 2005
    Location
    Rio de Janeiro - Brazil - South America
    Posts
    409
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    JavaScript performance

    I'm puzzeled with a very simple Javascript performance test.
    Code for two web pages:
    PAGE 1
    Code:
    <!DOCTYPE html>
    <html lang=en>
    <head>
    <meta charset=utf-8>
    <title>PAGE 1</title>
    
    <script>
    for (var i=0; i<=1000000000; i++) {
    	var g = i;
    }
    </script>
    
    <style>
    p { color: red; }
    </style>
    </head>
    
    <body>
    <p>Some text</p>
    </body>
    </html>
    PAGE 2
    Code:
    <!DOCTYPE html>
    <html lang=en>
    <head>
    <meta charset=utf-8>
    <title>PAGE 2</title>
    <style>
    p { color: red; }
    </style>
    </head>
    
    <body>
    <p>Some text</p>
    
    <script>
    for (var i=0; i<=1000000000; i++) {
    	var g = i;
    }
    </script>
    
    </body>
    </html>
    Why does the display time for the red paragraph are the same in both pages?
    Shouldn't PAGE 2 display the red paragraph faster?
    Mauricio Samy Silva
    http://www.maujor.com/

  2. #2
    SitePoint Wizard
    Join Date
    Jul 2003
    Location
    Kent
    Posts
    1,921
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Cos the count is going on separately from the page rendering?
    The javascript does nothing to the dom, it just sits counting in the background.

    why not make it write something to the page when the count finishes? Then you'll see which page has a faster rendering to the end result.

  3. #3
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Dr John is right there, the test doesn't actually do anything except assign a variable. (I'd also suggest you take a few zeros away ). How this behaves depends on the browser as well I believe.

    If you want to see how long the operation actually takes, it would be quite trivial to modify this snippet so it will tell you:

    Code JavaScript:
    var start, end, g, i;
    start = new Date().getTime();
     
    for (i=0; i<1000000; i++) {
      g = i;
    }
     
    end = new Date().getTime();
    console.log("Test took:", (end-start)/1000 + "s");

    Now your test result will be logged to the developer console (but you could alert it, write it to the page, do something else with it).

    If you want to write some more JS performance tests I'd recommend going to jsperf.com and searching for use cases or create your own. Writing the tests is fairly easy.
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  4. #4
    SitePoint Evangelist Maujor's Avatar
    Join Date
    Mar 2005
    Location
    Rio de Janeiro - Brazil - South America
    Posts
    409
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Dr John and AussieJohn.
    Maybe due my poor english I put a lot of confusion in my question.
    I know how to measure how long a Javascript operation takes and also the JSPerf interface.
    The question is:
    If scripts located before the body's close tag do not block the page
    loading why does the PAGE2 doesn't shows the paragraph faster than PAGE1?
    What am I missing?
    Mauricio Samy Silva
    http://www.maujor.com/

  5. #5
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Maujor View Post
    If scripts located before the body's close tag do not block the page
    loading why does the PAGE2 doesn't shows the paragraph faster than PAGE1?
    What am I missing?
    Are you talking about putting scripts at the bottom of the page to prevent the JavaScript from being executed before the rest of the page loads? Or are you specifically interested in working out how/why elements on the page get rendered based on a script that takes a long time to execute (in either the head or the body region).

    If it's the first, then the reason you would put scripts at the bottom is so that the browser gets to load the CSS and HTML first, so that there is something on the screen before the JavaScript get loaded. Normally when the JS is placed in the head it will block other downloads until it is done loading and executing. It's also worth noting that we're talking about external resources here, so inline scripts will execute and in most circumstances won't block the page from being rendered and should not block other external downloads.
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  6. #6
    SitePoint Evangelist Maujor's Avatar
    Join Date
    Mar 2005
    Location
    Rio de Janeiro - Brazil - South America
    Posts
    409
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AussieJohn View Post
    If it's the first, then the reason you would put scripts at the bottom is so that the browser gets to load the CSS and HTML first, so that there is something on the screen before the JavaScript get loaded.
    Great AussieJohn this is the point.
    So, why does there is nothing on the Page 2 (the red paragraph) before the Javascript loop get executed?
    Mauricio Samy Silva
    http://www.maujor.com/

  7. #7
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Maujor View Post
    Great AussieJohn this is the point.
    So, why does there is nothing on the page (the red paragraph) before the Javascript for loop ends run?
    Ah that's the trick when you have scripts that take a long time to execute (For example when they loop 1000000000 times ). The script can still prevent the browser from taking any other actions if it is doing something very processor intensive that takes a long time.
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  8. #8
    SitePoint Evangelist Maujor's Avatar
    Join Date
    Mar 2005
    Location
    Rio de Janeiro - Brazil - South America
    Posts
    409
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    [SOLVED] :-)
    Thanks AussieJohn for take your time, your kindness and be patient.
    Regards
    Mauricio Samy Silva
    http://www.maujor.com/


Tags for this Thread

Bookmarks

Posting Permissions

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