From the point of view of rendering speed, where is the best position to put <script>...</script> and <style>...</style>? Within <head>...</head>, or at the end of <body>...</body> or right after it? And are there any other tags that can be put outside of its usual position in <head>...</head> like <base>?
2 Answers
<style> and <link rel="stylesheet"> are required to be in the <head>. If they aren't, the page can be rendered without styles and then jarringly change when the styles are loaded.
<script>s, on the other hand, can be anywhere. Personally, I prefer to have external JS files loaded in the <head> (typically the ones that define functions), and the scripts that affect the page itself go just before </body> to ensure all elements are available before running.
I do however have a new script framework I've written, which allows me to place <script> elements anywhere, but their code is deferred so they run as if they had been placed just before </body>. This allows me to put scripts close to the parts of the page they affect, without having a negative impact on the page loading.
answered Feb 25, 2012 at 5:42
Niet the Dark Absol
326k86 gold badges480 silver badges604 bronze badges
Comments
As Kolink said, CSS styles should go in the <head> section so the page is never rendered without the styles being applied.
You will get maximum page rendering speed if the <scripts> are at the very end of the body, right before the <body> tag. This is because the page can be rendered before the scripts are parsed or run rather than after they are parsed and run.
<scripts> that do not have to run in any particular order can also be marked as defer or async in modern browsers and this will cause their loading and parsing to be deserialized with the load and display of the HTML.
This is feasible for most scripts (like things that respond to user events (mouse motion, clicks, keys, etc...), but not feasible for everything. For example, any scripts that are used by code that does document.write() directly into the page content must be loaded before the code that calls them so it would typically be included in teh <head> section so it's available while the page is being parsed and laid out.
htmltag covers all versions ofhtml, includinghtml5. You should only taghtml5if your question is specifically about HTML5. Same for CSS/CSS3.