SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Correct order of files in head tag?

    In general, is it best place to external JavaScript and jQuery files in the head tags or before the closing body tag. I've read opinions that present arguments for both, so I'm confused as to which is the best way to go. I think the correct order is: (1) css stylesheet(s), (2) link to jQuery (e.g., https://ajax.googleapis.com/ajax/lib.../jquery.min.js), and then (3) JavaScript files. (See also example below). Is this correct? Thanks!

    EXAMPLE
    <head>
    <title>This is my Sample Page</title>

    <!-- CSS goes before JavaScript -->
    <link rel="stylesheet" type="text/css" href="main1.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="myScript.js"></script>


    <script>
    $(document).ready(function() {
    //JavaScript programming goes here
    });
    </script>


    </head>

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,863
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    JavaScript shouldn't be in the <head> at all. The best place for JavaScript is immediately before the </body> tag. The only exception to this is where you have a script that needs to prevent the page loading at all if certain conditions apply - eg. a framebreaker script that will stop the page loading in the frame and send a request to the server to load the page in the entire browser instead.

    Any part of the page not yet rendered when JavaScript loads has to wait for the JavaScript to finish loading before it renders - just in case the script contains document.write statements. The async and defer attributes that are intended to bypass the rebdering delay are not yet supported by all browsers so placing the JavaScript at the bottom of the page avoids the rendering delays.

    Also that ready command will get the script to run as soon as the HTML finishes loading in some browsers but in others it will delay until all the files have loaded even though the JavaScript doesn't reference them. By moving the script to the bottom and deleting the ready test you can run the script sooner in those browsers that would otherwise wait for all the files to load.

    The jQuery file has to be attached before the other JavaScript files that reference jQuery.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    JavaScript shouldn't be in the <head> at all. The best place for JavaScript is immediately before the </body> tag..
    thanks for the response. Two quick follow-up questions: (1) so should I remove the $(document).ready entirely? and (2) should I also put the link to jQuery down near the bottom before the closing body tag as well - e.g., <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> Thanks!

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by amateurhour
    so should I remove the $(document).ready entirely?
    It isn't needed, but I don't think it does any harm, either. 'Sup to you.

    should I also put the link to jQuery down near the bottom before the closing body tag as well
    Yes.

  5. #5
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks!

  6. #6
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,863
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by ralph.m View Post
    It isn't needed, but I don't think it does any harm, either. 'Sup to you.
    Having it there would slow the script running in those browsers that can't detect when the HTML has loaded and which therefore have to wait for the load event to be triggered instead. So if there are lots of images in the page and you have a significant number of visitors using old browsers then getting rid of it might speed things up a bit.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Yes, I've also seen problems with jQuery not working, which seemed to be caused by linking to jQuery in the head and having scripts at the bottom of the page. Moving the library to the bottom of the page fixed the problem, so I can only assume that was the problem.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •