+ 11
What is difference between using JavaScript in head and body?
I am quite confused with using JavaScript in head and body tag.
16 Answers
+ 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.
+ 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.
+ 4
it says so in beginning of java script or html course
+ 4
it is a better practice to place <script> right before </body>
+ 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.
+ 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*.
+ 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
+ 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.
+ 2
Javascript in head is only called when an event is triggered while in the body called when a page loads every refreshing
+ 2
It's affects to page loading speed. You can check it with Google Pagespeed.
+ 1
it helps with the syntax in which you want your code to be displayed
+ 1
if the script tag is kept before the content of your webpage, you might get errors because the browser will first run the JavaScript first the move on to the body of the HTML. it is highly recommended to add the script tag immediately before the closing body tag
+ 1
It's best solution to use script in body at the end.
While downloading the files, browser will show html and css, and in the end will show interactive part. That is why we use Javascript code in the end of html page.
0
javascript loads and executes before any part of the body is loaded if the javascript is placed in the head.
0
Why is the Javascript code being placed just before the closing body tag?
That's the only possible way
To let the web page fully load in the browser window
To comply with the standards
0
Why is the Javascript code being placed just before the closing body tag?
!! To let the web page fully load in the browser window
Often have questions like this?
Learn more efficiently, for free:
Hot today
Mission Revive Sololearn
9 Votes
Prime Numbers
0 Votes
Daily revision?
2 Votes
Can anyone solve this?
0 Votes
Rust in Sololearn
1 Votes
Indentation error
1 Votes