Should Jquery code go in header or footer

Question

Where is the best place to put Jquery code  or separate Jquery file    Will pages load faster if I put it in the footer

User · Answer

Put Scripts at the Bottom     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  In some situations it s not   easy to move scripts to the bottom    If  for example  the script uses   document write to insert part of the   page s content  it can t be moved   lower in the page  There might also be   scoping issues  In many cases  there   are ways to workaround these   situations       An alternative suggestion that often   comes up is to use deferred scripts    The DEFER attribute indicates that the   script does not contain   document write  and is a clue to   browsers that they can continue   rendering  Unfortunately  Firefox   doesn t support the DEFER attribute    In Internet Explorer  the script may   be deferred  but not as much as   desired  If a script can be deferred    it can also be moved to the bottom of   the page  That will make your web   pages load faster    EDIT  Firefox does support the DEFER attribute since version 3 6    Sources     http   www w3schools com tags att script defer asp or better   http   caniuse com  feat script-defer

User · Answer

Only load jQuery itself in the head  via CDN of course   Why  In some scenarios you might include a partial template  e g  ajax login form snippet  with embedded jQuery dependent code  if jQuery is loaded at page bottom  you get a    is not defined  error  nice   There are ways to workaround this of course  such as not embedding any JS and appending to a load-at-bottom js bundle   but why lose the freedom of lazily loaded js  of being able to place jQuery dependent code anywhere you please  Javascript engine doesn t care where the code lives in the DOM so long as dependencies  like jQuery being loaded  are satisfied   For your common shared js files  yes  place them before  lt  body gt   but for the exceptions  where it really just makes sense application maintenance-wise to stick a jQuery dependent snippet or file reference right there at that point in the html  do so   There is no performance hit loading jquery in the head  what browser on the planet does not already have jQuery CDN file in cache   Much ado about nothing  stick jQuery in the head and let your js freedom reign

User · Answer

Nimbuz provides a very good explanation of the issue involved  but I think the final answer depends on your page  what s more important for the user to have sooner - scripts or images   There are some pages that don t make sense without the images  but only have minor  non-essential scripting  In that case it makes sense to put scripts at the bottom  so the user can see the images sooner and start making sense of the page  Other pages rely on scripting to work  In that case it s better to have a working page without images than a non-working page with images  so it makes sense to put scripts at the top   Another thing to consider is that scripts are typically smaller than images  Of course  this is a generalisation and you have to see whether it applies to your page  If it does then that  to me  is an argument for putting them first as a rule of thumb  ie  unless there s a good reason to do otherwise   because they won t delay images as much as images would delay the scripts  Finally  it s just much easier to have script at the top  because you don t have to worry about whether they re loaded yet when you need to use them   In summary  I tend to put scripts at the top by default and only consider whether it s worthwhile moving them to the bottom after the page is complete  It s an optimisation - and I don t want to do it prematurely

User · Answer

Standard practice is to put all of your scripts at the bottom of the page  but I use ASP NET MVC with a number of jQuery plugins  and I find that it all works better if I put my jQuery scripts in the  lt head gt  section of the master page     In my case  there are artifacts that occur when the page is loaded  if the scripts are at the bottom of the page  I m using the jQuery TreeView plugin  and if the scripts are not loaded at the beginning  the tree will render without the necessary CSS classes imposed on it by the plugin  So you get this funny-looking mess when the page first loads  followed by the proper rendering of the TreeView  Very bad looking  Putting the jQuery plugins in the  lt head gt  section of the master page eliminates this problem

User · Answer

All scripts should be loaded last  In just about every case  it s best to place all your script references at the end of the page  just before  lt  body gt     If you are unable to do so due to templating issues and whatnot  decorate your script tags with the defer attribute so that the browser knows to download your scripts after the HTML has been downloaded    lt script src  my js  type  text javascript  defer  defer  gt  lt  script gt      Edge cases  There are some edge cases  however  where you may experience page flickering or other artifacts during page load which can usually be solved by simply placing your jQuery script references in the  lt head gt  tag without the defer attribute  These cases include jQuery UI and other addons such as jCarousel or Treeview which modify the DOM as part of their functionality     Further caveats  There are some libraries that must be loaded before the DOM or CSS  such as polyfills  Modernizr is one such library that must be placed in the head tag

User · Answer

Just before  lt  body gt  is the best place according to Yahoo Developer Network s Best Practices for Speeding Up Your Web Site this link  it makes sense   The best thing to do is to test by yourself

User · Answer

For me jQuery is a little bit special   Maybe an exception to the norm  There are so many other scripts that rely on it  so its quite important that it loads early so the other scripts that come later will work as intended   As someone else pointed out even this page loads jQuery in the head section

User · Answer

Most jquery code executes on document ready  which doesn t happen until the end of the page anyway  Furthermore  page rendering can be delayed by javascript parsing execution  so it s best practice to put all javascript at the bottom of the page

User · Answer

Although almost all web sites still place Jquery and other javascript on header  D   even check stackoverflow com    I also suggest you to put on before end tag of body  You can check loading time after placing on either places  Script tag will pause your webpage to load further    and after placing javascript on footer  you may get unusual looks of your webpage until it loads javascript  so place css on your header section

[jquery] Should Jquery code go in header or footer?

Examples related to jquery

Examples related to header

Examples related to footer