+ 11

What is difference between using JavaScript in head and body?

I am quite confused with using JavaScript in head and body tag.

6th Nov 2016, 3:25 PM
Namas Thapa
Namas Thapa - avatar
16 ответов
+ 16
actually their is no significant difference but for a real life website it is very much. when you keep the script at the very beginning users will be waiting for something even the loader to appear as browser will be downloading the heavy scripts. again unless you add load event listeners the script after downloading wouldn't run because in that there will be reference of elements that has not been seen yet. the page is still loading even if they add listeners they will load wait and run that delay can cost you loss of visitors. however if your just learning to code you can ignore that neither your web page is real life nor do you have heavy scripts running. oh yes Ezak and kukoyi said it right you can place the scripts in one place at head without mixing with the conten of the webpage if they contain event driven functions.
6th Nov 2016, 4:04 PM
Sandeep Chatterjee
+ 4
W3Schools have a nice article http://www.w3schools.com/js/js_whereto.asp Scripts in <head> 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 <body> 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.
6th Nov 2016, 4:01 PM
ezak ezat
ezak ezat - avatar
+ 4
it says so in beginning of java script or html course
6th Dec 2016, 4:30 PM
Joshua M
Joshua M - avatar
+ 4
it is a better practice to place <script> right before </body>
7th Dec 2016, 10:59 AM
Yadagalla Jaswanth Kumar
Yadagalla Jaswanth Kumar - avatar
+ 4
Always remember to avoid rendering blocking JS. If it isn't needed on the initial load, then consider placing it before the closing body tag. I genuinely place JS that requires activating or triggering inside the head, and with the standalone async or defer.
11th Dec 2016, 4:44 AM
Mark Foxx
Mark Foxx - avatar
+ 4
Head scripts start loading really early, before the DOM gets to main processing; you want libraries here so they have time to get going. Body scripts are loaded WHILE the DOM is building. There is NO guarantee the DOM will finish before your scripts run, even placed at </body>...because pages load asynchronously (to satisfy a pesky thing called user experience). But it's even worse than this: Not every browser finishes the same way, and <body onload="function()"> isn't reliable. I even have a web sample in my profile that suffered from a SoloLearn timing issue because it ran too early (but worked elsewhere). This is why jquery has: $(document).ready( function() { // things to do (like load data, insert elements, add events) when the DOM is really ready and won't crash on you in a spectacular way. }) ...and guess what? That can go *anywhere*.
13th Dec 2016, 10:00 AM
Kirk Schafer
Kirk Schafer - avatar
+ 3
Actually the difference is not easy to notice in local but online we can notice that a script in head will run before the page actually loads while on in body may leave som elements to load before proceeding .So online users will have events listeners loaded before the page starts loading and may some procedures etc... While in the body tag elements will be loaded before our script functions
9th Dec 2016, 4:08 PM
Ditrix 36
Ditrix 36 - avatar
+ 2
You mainly write the title in head, and the main code in body. There really isn't much of a difference, but the body can help you organise and store elements better.
4th Dec 2016, 7:28 PM
Möbius
Möbius - avatar
+ 2
Javascript in head is only called when an event is triggered while in the body called when a page loads every refreshing
9th Dec 2016, 5:41 PM
Prof Oyondi
Prof Oyondi - avatar
+ 2
It's affects to page loading speed. You can check it with Google Pagespeed.
11th Dec 2016, 11:37 AM
LoooooooL
LoooooooL - avatar