SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Guru DeNasio's Avatar
    Join Date
    May 2001
    Posts
    830
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    JavaScript absolutely necessary in HEAD?

    Hallo guys,

    Is it absolutely necessary to put the JavaScript code in the HEAD? I have a lot of JavaScript code in the BODY and they all appears to be working just fine. What is the downside of putting JavaScript code in the BODY? What can go wrong?

    Sometimes you can not avoid putting JavaScript code in the BODY. Like for instance, when you provide your members with a HTML code for a poll and the code has JavaScript in it.
    Ballot-Box.net - free polls for webmasters
    FormLog.com - free form processor

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,121
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Actually, a lot of JS gurus these days advocate putting your scripts just before the closing body tag. That way, the page loads first (HTML and CSS) and it's handy also handy to have the DOM elements in place first where the JS has to act on them. (Otherwise, you have to tell the script not to run until the page has loaded).

    Quote Originally Posted by DeNasio View Post
    Sometimes you can not avoid putting JavaScript code in the BODY. Like for instance, when you provide your members with a HTML code for a poll and the code has JavaScript in it.
    Yes, true, but usually that is junk code, so don't base your understanding of JS around that stuff.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Guru DeNasio's Avatar
    Join Date
    May 2001
    Posts
    830
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Yes, true, but usually that is junk code
    What? How dare you call my code junk!
    Ballot-Box.net - free polls for webmasters
    FormLog.com - free form processor

  4. #4
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,789
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    The best place to put the script tag is immediately before the </body> tag. Not all older scripts will work when put there though (although ones designed to go in the <head> should all also work better if moved there.

    By moving the script to the end you allow the rest of the page to load first without being held up waiting for the script to load first.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  5. #5
    SitePoint Guru DeNasio's Avatar
    Join Date
    May 2001
    Posts
    830
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    The best place to put the script tag is immediately before the </body> tag. ........By moving the script to the end you allow the rest of the page to load first without being held up waiting for the script to load first.
    I've always read that JavaScript code should go between the <HEAD> tags. How come that "they" didn't realise then that it's better to put JavaScript at the end of the page immediately before the </body> tag? How come that people are now realising this?
    Ballot-Box.net - free polls for webmasters
    FormLog.com - free form processor

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,121
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by DeNasio View Post
    What? How dare you call my code junk!
    If you are provided code for some purpose—like a Facebook app—that sits somewhere in the body, it's usually pretty evil stuff. Ideally, the JavaScript is not inline but more 'aloof', leaving the user with something functional if JS is off.

    The debate about where to put scripts is an interesting one. I have a good book on JS, first published in '05, which tells you to put the scripts in the head, but recently I got the new edition, which advocates putting the JS just before the closing </body> tag. The web is evolving, and people are refining their understanding of best practice as things move along.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,688
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by DeNasio View Post
    I've always read that JavaScript code should go between the <HEAD> tags. How come that "they" didn't realise then that it's better to put JavaScript at the end of the page immediately before the </body> tag? How come that people are now realising this?
    Before HTML4 scripts were only allowed in the head. From HTML4 onwards, they were allowed in the body as well. After further investigations took place, the benefits of doing so were discovered. The trouble is that ancient web browsers (much older than IE6) weren't able to have scripts in the body.

    It takes a while for old web browsers to die (or die out enough), so it has only been within the past 4 years or so that it has been a viable technique to use widely.

    So now you have a choice when scripts need to touch the body content.

    Head scripts cannot directly touch the body, because at that moment, the body does not yet exist. So, head scripts have to employ various type of trickery in order to touch the body.
    • They may wait for the onload event, by which time people are sick and tired of waiting for images to finish loading before the script can begin
    • They may wait for the DOM to finish loading, which require difficult to remember cross-browser code, and is also only supported in some web browsers
    • Or they may use a timed interval to continue polling the page until the part they want to touch becomes available.


    Another problem with head scripts is that they completely block the page loading process. Whenever a head script is encounted, nothing on the page is allowed to loaded until the head script has loaded, and fully finishes running its script.

    Body scripts have some advantages over that.
    • They automatically have access to everything that's above them, so there's no need to wait an onload event.
    • They can be run immediately, so they get to be executed even before the DOM has finished loading.
    • Polling techniques by using timed intervals aren't required, but may still have a useful place from the head.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


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
  •