Will linking javascript files in the body rather than in the header cause a problem?

Question

this is what im trying to do

<script type="text/javascript" src="resources/application.js"></script>
    <script type="text/javascript" >
       $(document).ready(createHeader()); 
       $(document).ready(scriptSet()); 
    </script>

id like to avoid having to separate the two, and while generally i see script links only inside the header the document.ready functions dont seem to work when put there. However, everything seems to work completely fine when placed at the end of the body, so would this cause any problems or is this fine?

Do you have a reference of the jquery library _before_ those scripts? Also, you do not need multiple `$(document).ready()` in one file. — Alex R., Jul 27 '11 at 02:03
I often have the librairies (jQuery, plugins,...) in the header and page specific scripts linked directly in the body. In my experience it works fine like that. — Pierre Henry, Jul 27 '11 at 02:07
Jared is right ! if you want to give direct references to functions defined in your script file to the ready event handler, then I think it should be without the parentheses: document.ready(createHeader); Otherwise define an anonymous function. — Pierre Henry, Jul 27 '11 at 02:10

Sparky · Accepted Answer · 2015-06-11T03:52:48.080

8

Functionally, as long as you enclose your code inside a $(document).ready(function(){ }); and it comes after the jQuery file includes, it does not matter if it's in the head or the body. $(document).ready ensures that the DOM is fully loaded before any script is executed.

HOWEVER, putting all of your script includes and scripts at the bottom of the body is best for loading performance.

This article explains it nicely.

Example:

        <body>

    <!-- MY HTML CODE -->

    <!-- START javascript -->
        <script type="text/javascript" src="/javascript/jquery/jquery-1.6.2.min.js"></script>
        <script type="text/javascript" src="/javascript/jquery/plugins/jquery.random_plugin.js"></script>
        <script type="text/javascript" src="/javascript/jquery/plugins/jquery.random_plugin2.js"></script>
        <script type="text/javascript" src="/javascript/some_other_scripts.js"></script>

        <script type="text/javascript" language="JavaScript">
        //<![CDATA[
            $(document).ready(function(){
                // my code
            });
        //]]>
        </script>
    <!-- END javascript -->

        </body>

edited Jun 11 '15 at 03:52

answered Jul 27 '11 at 02:24

Sparky

98,165
25
199
285

Following that strictly, even `$.ready()` would have to go after the jQuery script download, which is the performance factor. It seems a little overzealous to put all scripts (non-includes) at the bottom (even the Yahoo homepage doesn't do this, although it does it for the most part), but if the site has lots of images or other content to download, or is a very high traffic site (like SO), the script includes probably should go to the bottom (and any scripts that require those includes to function). – Jared Farrish Jul 27 '11 at 02:45
@Jared: Yes, `ready` goes after the jQuery includes. I should have posted an example. – Sparky Jul 27 '11 at 02:47
@Sparky That article you link to is excellent, and the whole performance series is a must read for anyone building web sites. Thanks for the pointer! – russellmania Nov 09 '13 at 19:23

score 1 · Answer 2 · answered Jul 27 '11 at 02:05

1

There is no problem with having script tags in the body. Just remember that the page is parsed top-down, so scripts have to be included before they are used.

answered Jul 27 '11 at 02:05

liammclennan

5,295
3
34
30

Hassek · Answer 3 · 2011-07-27T02:10:33.030

0

Nop, in fact its good for "performance" to put your scripts at the end of your HTML.

Still a good practice is to have all your javascript in another file and just set a header calling it, if posible even compressing the file.

Now, I would change that code for this

$(document).ready(function(){
    createHeader();
    scriptSet();
});

so you dont call $(document).ready twice :)

edited Jul 27 '11 at 02:10

answered Jul 27 '11 at 02:05

Hassek

8,715
6
47
59

I don't know why the performance of putting a the `.ready()` calls at the end of a page will matter, and you're missing the anonymous function in the `.ready()` call. – Jared Farrish Jul 27 '11 at 02:07
True, the perfomance I am talking about is not because of the ready. When you set your javascript at the end of your html the page will parse at the end the javascript, so it will be seen as if it "loaded faster", its not really a performance gain, it justs seems like it. Btw I added the anonymous function :) – Hassek Jul 27 '11 at 02:12

score 0 · Answer 4 · answered Jul 27 '11 at 02:08

You do realize that the functions you have put inside $(document).ready() are not going to wait for DOMContentLoaded to fire? You have to wrap them inside a function call (event handler) in order to avoid calling them instantly when they show up in the code. An anonymous function is usually just fine.

$(document).ready(function(){
    createHeader();
    scriptSet();
});

score 0 · Answer 5 · answered Jul 27 '11 at 02:09

I have deployed a number of web applications, and haven't ever had a problem with the script being in the body tag. I like to place it at the end of the page so as not to impede download progress of the visible elements on the page. I believe that Google has also done this with some of their scripts (maybe Analytics?).

Like some of the others have said, make sure that you have your jQuery reference before the $(document).ready(); call. It's easy to slip past, and hard to troubleshoot :)

JMax

Jared Farrish · Answer 6 · 2011-07-27T02:17:59.980

It typically does not matter if you put your script includes and blocks within your BODY element; they'll run perfectly fine in most cases. Some people believe it a bad practice, but it's not a wrong practice. It happens all the time.

However, I'd like to point out that it will not matter where you put a $.ready() function call, as long as it's after the jQuery include, as it will always run AFTER the DOM is ready (which will occur AFTER page load). So, in this case it doesn't make any difference.

Note the anonymous function in the function call. This passes a reference to $.ready() for the anonymous function, which allows it's function body to be executed at a later time, hence your functions will be called at a later time.

<script type="text/javascript">
$(document).ready(function(){
    createHeader(); 
    scriptSet();
}); 
</script>

hm, can you tell me where i can get some more information on why this is done this way would like to read up on it — user667122, Jul 27 '11 at 03:16
Do you mean [`.ready()?`](http://api.jquery.com/ready/)? Or [anonymous functions](http://helephant.com/2008/08/23/javascript-anonymous-functions/)? — Jared Farrish, Jul 27 '11 at 03:44

Will linking javascript files in the body rather than in the header cause a problem?

6 Answers6

Linked