JavaScript - Head, Body or Jquery

JavaScript - head, body or jQuery?

Most recommended method is to put it before </body> tag. Yahoo performance article also suggests that other than YSlow and Page Speed addons by Yahoo and Google respectively.

Quoting from Yahoo article linked above:

The problem caused by scripts is that they block parallel downloads.
The HTTP/1.1 specification suggests that browsers download no more
than two components in parallel per hostname. If you serve your images
from multiple hostnames, you can get more than two downloads to occur
in parallel. While a script is downloading, however, the browser won't
start any other downloads, even on different hostnames.

When you put scripts in <head> tag, the browsers goes for them thereby keeping other stuff on hold until scripts are loaded which users will perceive like slow loading of the page. This is why you should put scripts at the bottom.

As for:

$(document).ready(function(){/*Code goes here*/});

It is fired when DOM is available and ready to be manipulated. If you put your code at the end, you won't necessarily need this but usually this is needed because you want to do something as soon as DOM is available for use.

is there a difference between putting a javascript in the head or in the body?

It is always better to put javascript at the bottom just before </body>. That way it doesn't block rendering (good for performance). Also, at that point you know the DOM (the tree of HTML elements) is ready for you.

$(document).ready(function () {}) is jQuery's way of waiting until the DOM is ready. If you put your javascript in the <head> you have to use this technique, because obviously all the actual HTML you want to work with comes after it and needs to be parsed. The callback (the function passed to .ready()) gets called once the DOM is ready.

Difference between loading jQuery-lib in head and before /body

Loading the library in the <head> will ensure it is loaded before the rest of the page loads, meaning it is available for any jQuery/JS code you write or load in further down the page. This will slow down your page's initial load by however long it takes the library to be loaded.

Loading the library at the end of the <body> will mean the HTML and CSS will load first - so the page will seem to load faster, but no code that relies on the jQuery library will work until the library has loaded. Additionally, you would have to put any code that uses jQuery after the point at the end of the <body> where you load it.

What JavaScript should be included in the head and what included in the body?

The Place of the <script> Element

The script elements block progressive page downloads.

Browsers download several components at a time, but when they encounter an external script, they stop further downloads until the script file is downloaded, parsed, and executed.

This hurts the overall page time, especially if it happens several times during a page load.

To minimize the blocking effect, you can place the script element toward the end of
the page, right before the closing tag.

This way there will be no other resources for the script to block.
The rest of the page components will be downloaded and already engaging the user.

The worst antipattern is to use separate files in the head of the document:

<!doctype html>
<html>
<head>
    <title>My App</title>
    <!-- ANTIPATTERN -->
    <script src="jquery.js"></script>
    <script src="jquery.quickselect.js"></script>
    <script src="jquery.lightbox.js"></script>
    <script src="myapp.js"></script>
</head>
<body>
...
</body>
</html>

A better option is to combine all the files:

<!doctype html>
<html>
<head>
    <title>My App</title>
    <script src="all_20100426.js"></script>
</head>
<body>
    ...
</body>
</html>

And the best option is to put the combined script at the very end of the page:

<!doctype html>
<html>
<head>
    <title>My App</title>
</head>
<body>
    ...
    <script src="all_20100426.js"></script>
</body>

“JavaScript Patterns, by Stoyan Stefanov
(O’Reilly). Copyright 2010 Yahoo!, Inc., 9780596806750.”

When do you put Javascript in body, when in head and when use doc.load?

$(document).ready() simply ensures that all DOM elements are loaded before your javascript is loaded.

When it doesn't matter

Without waiting for this event to fire, you may end up manipulating DOM elements or styles that are yet to exist on the page. the DOM ready event also allows you more flexibility to run scripts on different parts of the page. For example:

<div id="map"></div>
<script type="text/javascript">document.getElementById('map').style.opacity = 0;</script>

will run because the map div has been loaded before the script runs. In fact, you can get some pretty good performance improvements by placing your scripts at the bottom of the page.

When it does matter

However, if you are loading your scripts in the <head> element, most of your DOM has not loaded. This example will not work:

<script type="text/javascript">document.getElementById('map').style.opacity = 0;</script>
<div id="map"></div>

will not, since the map div has not been loaded.

A safe solution

You can avoid this by simply wait until the entire DOM has loaded:

<script type="text/javascript">$(document).ready(function () { 
    document.getElementById('map').style.opacity = 0;
});
</script>
<div id="map"></div>

There are plenty of articles that explain this, as well as the jQuery documentation itself.

Jquery not loading in head but loading on bottom of body tag

The way jQuery, or JavaScript for that matter, works is it detects elements or binds events at the time when the script itself is called. As the document is loaded from top to bottom, placing jQuery at the bottom makes sure your DOM is loaded first, before executing JS. On the other hand, you can place jQuery at top, using technique such as this:

$(document).ready(function() {
    console.log('jQuery is now ready to be executed!');

    // Place jQuery code here...
});

This is basically telling jQuery, wait until DOM is loaded, before acting upon it.

Source: http://api.jquery.com/ready/

Jquery Code not working when placed in head tag

I figured out what was the problem. I put the ready function after the <body> tag and now it is working perfectly.

JavaScript - Head, Body or Jquery