SOLVED
Need explanation on this : "CSS resources have to go in the <head>, Javascript resources at the end of the page"
1 Accepted Solution
Correct answer by
hi askdctm
CSS must always be loaded before body(in the head), because when you have the CSS declared before <body> starts, your styles has actually loaded already.
So very quickly users see something appear on their screen (e.g. background colors). If not, users see blank screen for some time before the CSS reaches the user.
Also, if you leave the the styles somewhere in the <body>, the browser has to re-render the page (new and old when loading) when the styles declared has been parsed.
JAVASCRIPT I would answer this with multiple options actually, the some of which actually render in the body.
- Place library script such as the jQuery library in the head section.
- Place normal script in the head unless it becomes a performance/page load issue.
- Place script associated with includes, within and at the end of that include. One example of this is .ascx user controls in asp.net pages - place the script at the end of that markup.
- Place script that impacts the render of the page at the end of the body (before the body closure).
- do NOT place script in the markup such as
<input onclick="myfunction()"/>- better to put it in event handlers in your script body instead. - If you cannot decide, put it in the head until you have a reason not to such as page blocking issues.
Some Reference Link:- http://stackoverflow.com/questions/2451417/whats-pros-and-cons-putting-javascript-in-head-and-puttin...
I hope this would help you.
Thanks and Regards
Kautuk Sahni
Kautuk Sahni
Correct answer by
hi askdctm
CSS must always be loaded before body(in the head), because when you have the CSS declared before <body> starts, your styles has actually loaded already.
So very quickly users see something appear on their screen (e.g. background colors). If not, users see blank screen for some time before the CSS reaches the user.
Also, if you leave the the styles somewhere in the <body>, the browser has to re-render the page (new and old when loading) when the styles declared has been parsed.
JAVASCRIPT I would answer this with multiple options actually, the some of which actually render in the body.
- Place library script such as the jQuery library in the head section.
- Place normal script in the head unless it becomes a performance/page load issue.
- Place script associated with includes, within and at the end of that include. One example of this is .ascx user controls in asp.net pages - place the script at the end of that markup.
- Place script that impacts the render of the page at the end of the body (before the body closure).
- do NOT place script in the markup such as
<input onclick="myfunction()"/>- better to put it in event handlers in your script body instead. - If you cannot decide, put it in the head until you have a reason not to such as page blocking issues.
Some Reference Link:- http://stackoverflow.com/questions/2451417/whats-pros-and-cons-putting-javascript-in-head-and-puttin...
I hope this would help you.
Thanks and Regards
Kautuk Sahni
Kautuk Sahni
Related Conversations
