<head></head>. I am using jquery and wanted to know if it has to be in the head tags for some reason or if will break something if I move it. Thank you.
EDIT: Why is it almost always in the head tags?
$(document).ready(...) to execute things, then the positioning shouldn't matter. Otherwise, you may find corner cases where it matters. In general, it does not matter. Scripts end up in the
head tag mostly out of tradition.
No, it can be anywhere. In fact, it’s sometimes a good idea to put it at the bottom of the document. For an explanation why, see http://developer.yahoo.com/performance/rules.html#js_bottom.
Basically, browsers stop rendering page until
.js files are completely downloaded and processed. Since they render page progressively as HTML arrives, the later
.js files are referenced, the better user experience will be.
So the trick is to include only absolutely crucial scripts in the
head, and load remaining ones towards the end of the page.
Everything stops when the browser reads a script tag until it has processed it. Your page will therefore render quicker if you move the script tags down as far as possible - ideally just before the end body tag. Obviously the total load time will be the same.
You will have to make sure you don't actually call any jQuery functions until jQuery is included of course.
JS changes so quickly these days with new frameworks coming out every week and each one claims to be "the bees knees" by its advocates.
Gumbo is right to say a script tag can be referenced anywhere that supports an inline element, but the choice to load an external JS file or include JS code within a tag is a decision made individually on a case-by-case basis.
Yes, the browser will stop to load JS when it is parsed and therefore, you need to consider how this will affect page load speed and functionality.
As of mid 2015 (the popular answer was in July 2009), giving mobile priority to page load speed requires a two request limit to the mobile / cell mast, which under 3G gives you a 28k (2x 14kb(yes)) payload. You need to consider 'paint to screen' (as Google names it) of 28k. This should provide the user with enough page content / interactivity to ensure that they're on the right page or right track. Jquery minified is currently 87.6lkb, so that "just ain't gonna cut the mustard!"
This is why most mobile pages sit for a couple of seconds before loading anything, even on 4G! Don't allow that. Page speed is king and users hit their back button before your JQuery file loads. Under 3G+, a 28k payload will load in < 1sec, so there is no reason why your page shouldn't start loading in that time. Next time you click a link on your phone, watch the loading bar sit and wait while it goes through all the tags on the next page!
Do not structure your page based on 7-year-old posts on SO (even if it's not wrong, just outdated). Decide where each piece of code is needed and make sure a user can use the most important aspects of a page before you try to load 6 JS frameworks that implement extravagant visual features and extensive data binding for your page.
BTW, Google prefers you push JS to the bottom because Google analytics code needs to be the very last thing to load.
Think before you code!
SCRIPT is not only categorized as head.misc element but also as special element and thus everywhere allowed where inline elements are allowed. So you can put a
SCRIPT wherever inline elements are allowed:
In fact, some recommend to put
SCRIPT elements at the end of the
It can go in the
body tag. Just keep in mind that it will execute whenever is read and not necessarily when the document is finished loading. Take a look here.
©2020 All rights reserved.