Wednesday, June 5, 2024
 Popular · Latest · Hot · Upcoming
116
rated 0 times [  119] [ 3]  / answers: 1 / hits: 79097  / 14 Years ago, thu, december 9, 2010, 12:00:00

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.


More From » html

 Answers
11

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.


[#94668] Tuesday, December 7, 2010, 14 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
paola

Total Points: 675
Total Questions: 115
Total Answers: 95

Location: Laos
Member since Tue, Jul 7, 2020
4 Years ago
;