Home/ Questions/Q 3486020
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-18T10:58:41+00:00

If the script tag is above or below the body in a HTML page,

  • 0

If the script tag is above or below the body in a HTML page, does it matter for the performance of a website?

And what if used in between like this:

<body>
..blah..blah..
<script language="JavaScript" src="JS_File_100_KiloBytes">
function f1() {
.. some logic reqd. for manipulating contents in a webpage
}
</script>
... some text here too ...
</body>

Or is this better?:

<script language="JavaScript" src="JS_File_100_KiloBytes">
function f1() {
.. some logic reqd. for manipulating contents in a webpage
}
</script>
<body>
..blah..blah..
..call above functions on some events like onclick,onfocus,etc..
</body>

Or this one?:

  <body>
    ..blah..blah..
    ..call above functions on some events like onclick,onfocus,etc..
<script language="JavaScript" src="JS_File_100_KiloBytes">
    function f1() {
    .. some logic reqd. for manipulating contents in a webpage
    }
    </script>
    </body>

Need not tell everything is again in the <html> tag!!

How does it affect performance of webpage while loading? Does it really?
Which one is the best, either out of these 3 or some other which you know?

And one more thing, I googled a bit on this, from which I went here: Best Practices for Speeding Up Your Web Site and it suggests put scripts at the bottom, but traditionally many people put it in <head> tag which is above the <body> tag. I know it’s NOT a rule but many prefer it that way. If you don’t believe it, just view source of this page! And tell me what’s the better style for best performance.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Javascript assets, by default, tend to block any other parallel downloads from occurring. So, you can imagine if you have plenty of <script> tags in the head, calling on multiple external scripts will block the HTML from loading, thus greeting the user with a blank white screen, because no other content on your page will load until the JS files have completely loaded.

    In order to combat this issue, many developers have opted to placing JS at the bottom of the HTML page (before the </body> tag). This seems logical because, most of the time JS is not required until the user begins interacting with the site. Placing JS files at the bottom also enables progressive rendering.

    Alternatively, you can choose to load Javascript files asynchronously. There are plenty of existing methods which this can be accomplished by:

    XHR Eval

    var xhrObj = getXHRObject();
xhrObj.onreadystatechange = 
  function() { 
    if ( xhrObj.readyState != 4 ) return;
    eval(xhrObj.responseText);
  };
xhrObj.open('GET', 'A.js', true);
xhrObj.send('');

    Script DOM Element

    var se = document.createElement('script');
se.src = 'http://anydomain.com/A.js';
document.getElementsByTagName('head')
[0].appendChild(se);

    Meebo Iframed JS

    var iframe = document.createElement('iframe');
document.body.appendChild(iframe);
var doc = iframe.contentWindow.document;
doc.open().write('<body onload="insertJS()">');
doc.close();

    To name a few…

    Note: Only a maximum of five scripts can be loaded in parallel in current browsers.

    ForIE there is the defer attribute you can use like so:

    <script defer src="jsasset.js" type="text/javascript"></script>

    When set, this boolean attribute
    provides a hint to the user agent that
    the script is not going to generate
    any document content (e.g., no
    "document.write" in javascript) and
    thus, the user agent can continue
    parsing and rendering.

    Update 2022: all browsers now accept the defer attribute.

    • 0