Home > Technical & Creative Skills > Programming, Servers & Scripts

javascript and its affect on page load speed (8)

11-30-2011 12:00 AM #1 harrypotter (Member)
javascript and its affect on page load speed

hello...

another newbie coding question.

if i am using javascript, something like (http://stackoverflow.com/questions/9...rl-parameter):

Code:

var QueryString = function () {
  // This function is anonymous, is executed immediately and 
  // the return value is assigned to QueryString!
  var query_string = {};
  var query = window.location.search.substring(1);
  var vars = query.split("&");
  for (var i=0;i<vars.length;i++) {
    var pair = vars[i].split("=");
        // If first entry with this name
    if (typeof query_string[pair[0]] === "undefined") {
      query_string[pair[0]] = pair[1];
        // If second entry with this name
    } else if (typeof query_string[pair[0]] === "string") {
      var arr = [ query_string[pair[0]], pair[1] ];
      query_string[pair[0]] = arr;
        // If third or later entry with this name
    } else {
      query_string[pair[0]].push(pair[1]);
    }
  } 
    return query_string;
} ();

does it affect the page load speed if i put this in the <head> v.s. <body> tag?

i ask because http://code.google.com/speed/page-speed/ is recommending to put javascript more towards to bottom of the page...

does this only apply to calling external js? or would something like above affect the page speed as well?

sorry for the newbie question... thanks for answering.

11-30-2011 08:03 AM #2 thekaine (Member)

The general idea is:

When you but your stuff at the bottom and consider you get the data as a top to bottom data stream. Then you might get the JavaScript stuff before the actual HTML which may slow down the loading. But thats only when you:

- Run Script stuff that is not needed right away to display something
- The Script actually is a real part of your total page (5 lines of js code is no problem, but you could aswell load like 200kb from external sources for frameworks)

So bottom line:

Some stuff NEEDS to be on top to work proparly (most ppl use some framework anyway and let the script run on page completly loaded). The rest wants to be at the very end because you might need the html tags to be fully loaded (thats why google wants you to but your analytic stuff at the bottom, to make sure your visitor has loaded everything).
And dor you it means => Put it where you want

11-30-2011 09:25 PM #3 harrypotter (Member)

thanks for answering man!

i figure a few lines of javascript put in the <head> tag shouldn't be too much of a problem. good to have confirmation on that

01-12-2012 06:09 AM #4 Kapies (Member)

Google minimize javascripts, css...

01-12-2012 08:08 AM #5 wright (Member)

when the browser sees javascript he STOPS and does nothing to render the page until he's done. So if you have for example a geo ip script you should put it as FAR down the page as possible so the page loads and then after the user has something to look at you can do the fancy stuff. Javascript is in the <head> tag out of tradition, if I were you I would always test putting it further down the page and see how it affects loading behavior.

01-12-2012 08:56 AM #6 zeno (Administrator)

You could try different variations and use some sort of page-load tester to get data on all of them. Also, I know it's an example, but, that script you're dealing with looks to be for pulling values from a URL so they can be used for something - would this not be simpler to do with PHP?

01-14-2012 08:11 AM #7 harrypotter (Member)

Originally Posted by wright

i thought this was true only if we are loading js from external source?

01-14-2012 08:19 AM #8 zeno (Administrator)

I was under the impression all javascript was like that, hence why asynchrous javascript code became a lot more utilised to speed up page load times.

Home > Technical & Creative Skills > Programming, Servers & Scripts