+ 23

Which is the Best place to put <script> tag?

Responsive place : In the beginning of head tag Or In the beginning of body tag Or At the end of head tag Or At the end of Body tag

30th Apr 2019, 2:54 PM
Rishabh Singh
Rishabh Singh - avatar
44 Answers
+ 11
Just before </body> This is because there are chances that you try to access elements that has not been rendered yet. //Below code snippet will log "div is not rendered" <head> <script> if(document.getElementById("my-div")){ console.log("div is rendered"); } else { console.log("div is not rendered"); } </script> </head> <body> <div id="my-div">Hello World!!</div> </body>
30th Apr 2019, 4:28 PM
Rishi Anand
Rishi Anand - avatar
+ 10
Yes, there seems to be varying preferences. But according to the Stack Overflow post that Rocket Raccoon posted, and which he reiterated in his last post, the current recommendation seems to be at the beginning of the <head> tag with either defer or async attributes. It also seems that which of these attributes to use depends on the type of script. Additionally, it seems that about 6% of browsers don't support the two attributes mentioned.
1st May 2019, 5:24 AM
Sonic
Sonic - avatar
+ 10
حمودي العبد We know you are new here. Lets read some rules of SOLOLEARN before using. Dont be upset that everyone dislike your answer, Actually your answers is quite Awkard here. You can talk with us through message medium of sololearn By the way WELCOME TO THE SOLOLEARN LEARN LANGUAGES AND CREATE YOUR CODE BY YOUR IDEAS. https://www.sololearn.com/discuss/1316935/?ref=app HAPPY CODING. and Guys take A chill pill he is new He doesn't know the rules.
1st May 2019, 11:04 AM
Rishabh Singh
Rishabh Singh - avatar
+ 8
Just before the closing body tag </body>,in addition to what Rishi Anand said quite correctly,it is also because you do not want to delay your page from rendering the necessary html and styling pages while the JS engine processes the script document.
30th Apr 2019, 8:41 PM
ThankGod Imabibo
ThankGod Imabibo - avatar
+ 8
Inside head tag it's better
1st May 2019, 8:25 AM
Bubbly🎀🎀🎀
Bubbly🎀🎀🎀 - avatar
+ 7
In typical good programming in the head. When you're dealing with Sololearn Code Playground, at the end of a body
1st May 2019, 9:53 AM
👑 Prometheus 🇸🇬
👑 Prometheus 🇸🇬 - avatar
+ 7
Best to worst order. Before starting of body tag >at the last part of body tag>anyplace where you want except these two
1st May 2019, 10:45 AM
Ujjawal Raj
Ujjawal Raj - avatar
+ 6
At the end of head tag
1st May 2019, 6:21 PM
Salif Mehmed 🇹🇷🇧🇬
Salif Mehmed  🇹🇷🇧🇬 - avatar
+ 5
Rishi Anand but the question did not specify whether it is inline or external JS, did it?
1st May 2019, 7:21 AM
Sonic
Sonic - avatar
+ 5
Inside the body tag at the last part. Usually the code does not work because the html is not yet rendered. Even though this might slow your performance, this is the recommended way to go. If there are functions however, those are recommended in the head tag
1st May 2019, 9:40 AM
FlameXode
FlameXode - avatar
+ 5
In the beginning of head tag.
3rd May 2019, 2:55 PM
MANUSHI
MANUSHI - avatar
+ 4
in the end of body tag even it's external. edit : ok I was wrong you should put in head, here I just read https://stackoverflow.com/questions/436411/where-should-i-put-script-tags-in-html-markup
30th Apr 2019, 5:56 PM
Bug Slayer
+ 4
ThankGod Imabibo The current state-of-the-art is to put scripts in the <head> tag and use the async or defer attributes. This allows your scripts to be downloaded asap without blocking your browser., There was a time where putting javascript in the end of body tag was a good practice.
1st May 2019, 2:43 AM
Bug Slayer
+ 4
In head tag, but with attribute "defer".
1st May 2019, 3:56 AM
Sujeet Agrahari
Sujeet Agrahari - avatar
+ 4
The best place to put the script tag is at the bottom of the <body> element. That way, you don't have to wrap up your code in a cluttering "window.onload" method
1st May 2019, 8:10 AM
Dlite
Dlite - avatar
+ 4
What actually happens is anything that is part of the DOM, or the part that is rendered is inside of the body element. Usually, the styles and scripts are loaded in the head element. Even though this is true, any script that uses part of the DOM or the html render will not work. So, what I would recommend is to load in any extra scripts and css in the head such as jQuery and Bootstrap and Vue and such inside of the head element. The script that goes in the body is loaded in with the DOM. So, during the time of render of the script of the head element will not be able to use the DOM objects or the html renders until the html is fully loaded. But the script in the body element will be able to use the DOM elements or the html renders. During the time of render that is. So, functions that use the DOM elements can be loaded into the head element if they are not going to be executed in the head element.
1st May 2019, 10:04 AM
FlameXode
FlameXode - avatar
+ 4
That was written on mobile yes, hopefully you appreciate that
1st May 2019, 10:04 AM
FlameXode
FlameXode - avatar
+ 4
Header / Footer IMHO 😎
1st May 2019, 10:07 AM
Sanjay Kamath
Sanjay Kamath - avatar
+ 4
Many web developers recommend loading JavaScript code at the bottom of the page to increase responsiveness, and this is even more important with the HTML service. All scripts you load are scanned and sanitized client-side, which may take a couple of seconds. Moving your tags to the end of your page in body tag will let HTML render all your webpage content before the JavaScript is processed.
2nd May 2019, 9:58 AM
piyush gaikwad
piyush gaikwad - avatar
+ 3
Sonic yes it didn't specify That's why the answer should be in a way that should support for both inline and external
1st May 2019, 7:24 AM
Rishi Anand
Rishi Anand - avatar