Home/ Questions/Q 8071705
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-05T13:46:27+00:00

This question is just to clear some things up. Some things like this have

  • 0

This question is just to clear some things up. Some things like this have been asked before, and this rounds them all up into one question – where should JavaScript go in the HTML document, or, more importantly, does it matter? So, one of the things I’m asking is, does

<head>
<script type="text/javascript">
alert("Hello world!");
</script>
</head>

at all differ (in terms of functionality) from

<body>
<!-- Code goes here -->
<script type="text/javascript">
alert("Hello world!");
</script>
</body>

More importantly, I want to focus on JS that modifies or uses elements from the DOM in any way. So I know that if you put something like document.getElementById("test").innerHTML = "Hello world!" before <element id="test"></element> in your body, then it won’t work since the body is loaded from top to bottom, making the JS load first, which will then proceed to try to manipulate an element that doesn’t exist yet. So it should, just like the above, either go in the <head> or just before the </body> tag. The question is, aside from organisation and sorting, does it matter which one of these is chosen, and if so, in what way?

Of course, there is also a third method – the jQuery way:

$(document).ready(function(){ /*Code goes here*/ });

That way, it doesn’t matter where in the body you place the code, since it will only be executed when everything has loaded. The question here is, is it worth importing a huge JS library just to use a method the need for which could be replaced with an accurate placing of your scripts? I’d just like to clear things up a little here, if you would like to answer, go ahead! Summary: where should different kinds of scripts go – head or body, and/or does it matter? Is jQuery worth it just for the ready event?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Most recommended method is to put it before </body> tag. Yahoo performance article also suggests that other than YSlow and Page Speed addons by Yahoo and Google respectively.

    Quoting from Yahoo article linked above:

    The problem caused by scripts is that they block parallel downloads.
    The HTTP/1.1 specification suggests that browsers download no more
    than two components in parallel per hostname.     If you serve your images
    from multiple hostnames, you can get more than two downloads to occur
    in parallel. While a script is downloading, however, the browser won’t
    start any other downloads, even on different hostnames.

    When you put scripts in <head> tag, the browsers goes for them thereby keeping other stuff on hold until scripts are loaded which users will perceive like slow loading of the page. This is why you should put scripts at the bottom.

    As for:

    $(document).ready(function(){/*Code goes here*/});

    It is fired when DOM is available and ready to be manipulated. If you put your code at the end, you won’t necessarily need this but usually this is needed because you want to do something as soon as DOM is available for use.

    • 0