SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    javascript just before </head> for faster loading?

    Hello,
    I have a quick question. I don't remember from where, but once I read that putting the javascript bottom or the head of an html document can help it load faster. Is this true?
    Also if you have some server-side languages in that html document should javascript be underneath or after that as well?

    I guess my ultimate question is that does putting js at the bottom of the <head> make the page faster or is it the closer the javascript is to the bottom of the <head> the faster the page will load?

    Thanks in Advance!

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,317
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Actually, the current recommendation is to put JS links just before the closing </body> tag. That way, the page (HTML/CSS) gets to load visually without being held up by all the JS stuff—and you also avoid the problem of the JS having no HTML elements to apply itself to.

  3. #3
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    But that doesn't validate, right? I thought all script tags be to be in the head

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,317
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by team1504 View Post
    But that doesn't validate, right? I thought all script tags be to be in the head
    No, they can be anywhere. Those recommending the JS links be put just before the closing </body> tag include some of the most prominent "standardistas".

  5. #5
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    They should be linked externally is probably what you are thinking of since scripts are not markup and thus the LINK would be within the HEAD.

  6. #6
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    oh okay. so what I have now learned is that <link />s are in the head and <script>s can be anywhere. Its best to put them just before the closing head tag (</head>) or closing body tag (</body>). Is this correct?

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,317
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    The current thinking is that <script>s are best placed just before the closing </body> tag, but I've not heard that if they are in the <head> section they should be just before the closing tag, but I guess it makes some sense—at least from an organizational point of view. But yes, <link> should always be in the <head>.

  8. #8
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Okay. Thank you all— I think I got it now!

    Best Regards,
    Team 1504

  9. #9
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Honestly, each placement has it's own 'job' -- and depending on what I want it to do is likely where I'll place it. For example, if a script is running at 'onload' it doesn't matter where you put it, it can't execute until everything else is done... if it's a library that has to be loaded before it can be run in the first few lines of BODY, putting it right before /BODY means it's going to break... on the other hand if it's going to modify markup and you want it to run BEFORE onload as it say... modifies the markup in a manner you want applied before CSS loads (that way you only get one FOUC instead of TWO), then it goes before /BODY.

    The last of those is the real reason I often put scripting right before </body> -- FOUC is bad enough for CSS or images applied via the CSS, without something like dynamic content or scripted controls suddenly popping in AFTER the CSS is applied -- waiting for onload can literally be like a second "Flash of unstyled content". (part of why I don't really use onload anymore)

    This is one of those cases where I think people are looking for a "always do this" which is the wrong question. It's just not that simple an answer and is part of why it's called "work" and not "happy happy fun time".


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
  •