Does the <script> tag position in HTML affects performance of the webpage?

Posted by Rahul Joshi on Stack Overflow See other posts from Stack Overflow or by Rahul Joshi
Published on 2010-12-09T09:52:36Z Indexed on 2010/12/31 15:54 UTC
Read the original article Hit count: 280

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.

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about html