Should I write script in the body or the head of the html

Question

I have seen both ways  both implementation work just the structures are a bit different  In your experience  which work better and why

User · Answer

Head  or before closure of body tag  When DOM loads JS is then executed  that is exactly what jQuery document ready does

User · Answer

W3Schools have a nice article on this subject   Scripts in  lt head gt      Scripts to be executed when they are   called  or when an event is triggered    are placed in functions       Put your functions in the head   section  this way they are all in one   place  and they do not interfere with   page content    Scripts in  lt body gt      If you don t want your script to be   placed inside a function  or if your   script should write page content  it   should be placed in the body section

User · Answer

The problem with writing scripts at the head of a page is blocking  The browser must stop processing the page until the script is download  parsed and executed  The reason for this is pretty clear  these scripts might insert more into the page changing the result of the rendering  they also may remove things that dont need to be rendered  etc    Some of the more modern browsers violate this rule by not blocking on the downloading the scripts  ie8 was the first  but overall the download isn t the majority of the time spent blocking   Check out Even Faster Websites  I just finished reading it and it goes over all of the fast ways to get scripts onto a page  Including putting scripts at the bottom of the page to allow rendering to complete  better UX

User · Answer

I always put my scripts in the header  My reasons    I like to separate code and  static  text I usually load my script from external sources The same script is used from several pages  so it feels like an include file  which also goes in the header

User · Answer

I would answer this with multiple options actually  the some of which actually render in the body    Place library script such as the jQuery library in the head section  Place normal script in the head unless it becomes a performance page load issue  Place script associated with includes  within and at the end of that include   One example of this is  ascx user controls in asp net pages - place the script at the end of that markup  Place script that impacts the render of the page at the end of the body  before the body closure   do NOT place script in the markup such as  lt input onclick  myfunction     gt  - better to put it in event handlers in your script body instead  If you cannot decide  put it in the head until you have a reason not to such as page blocking issues    Footnote    When you need it and not prior  applies to the last item when page blocking  perceptual loading speed   The user s perception is their reality   if it is perceived to load faster  it does load faster  even though stuff might still be occurring in code    EDIT  references    asp net discussion  http   west-wind com weblog posts 154797 aspx and here  http   msdn microsoft com en-us library 3hc29e2a aspx jQuery document ready discussion  http   encosia com 2010 08 18 dont-let-jquerys-document-ready-slow-you-down  utm source feedburner amp utm medium email amp utm campaign Feed 3A Encosia  28Encosia 29 the other answers on this question present valid information as well  use www google com and www bing com to search for related information  there are a lot of references    Side note  IF you place script blocks within markup  it may effect layout in certain browsers by taking up space  ie7 and opera 9 2 are known to have this issue  so place them in a hidden div  use a css class like   hide   display  none  visibility  hidden    on the div   Standards  Note that the standards allow placement of the script blocks virtually anywhere if that is in question   http   www w3 org TR 1999 REC-html401-19991224 sgml dtd html and http   www w3 org TR xhtml11 xhtml11 dtd html  EDIT2  Note that whenever possible  always   you should put the actual Javascript in external files and reference those - this does not change the pertinent sequence validity

[javascript] Should I write script in the body or the head of the html?

Examples related to javascript

Examples related to html