script tag's location in an HTML document makes a lot difference in terms of performance. script tag is parser blocking. So when an HTML document encounters a script tag, it stops parsing the rest of the HTML and starts downloading the JS file.
script in head:
When you load a website, it creates a great impact on UX how soon the UI appears on the screen. When you put your script tag inside head tag (or in the upper side of the HTML doc), the user will be late to see the UI and as a result the user could see a blank screen for a certain period of time.
script at the end:
So if it goes at the end, the HTML is already parsed and the UI will be shown to user before JS file starts downloading. Though, to interact with the UI, the JS file need to be downloaded first.
async, defer in script tag:
When you set async, defer in a script tag, this file is considered as less important for the UI, so the file won't block the HTML file from parsing. It will be downloaded asynchronously. So it does not create any effect where you put this kind of script.
But still I think it's better to put it at the end as HTTP/1 can only make 6 requests at a time, so there is no use of start downloading a less important (async, defer-ed) script at the first place.
The scripts get downloaded as and when the parser encounters them. So having them in head will start downloading them earlier. Scripts that is important for user interaction can be put in the head with async or defer. Scripts like analytics etc. can be included at the end as it could take up potential download bandwidth needed for other important resources like CSS etc. if included earlier.
@siddiqnx
already explained nicely, Thanks buddy. I already added some point in article. If you have some super important script(like API request) that really need to inject in head you can inject them in head. There is always some scripts those are less important to load at the beginning you can put them in end of the body that will assist you to load your DOM without any unexpected behavior. I hope you got it, Thanks.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Is there an advantage of having the script at the end of the body over using
defer
orasync
in the head?The basic:
script
tag's location in an HTML document makes a lot difference in terms of performance.script
tag is parser blocking. So when an HTML document encounters ascript
tag, it stops parsing the rest of the HTML and starts downloading the JS file.script
inhead
:When you load a website, it creates a great impact on UX how soon the UI appears on the screen. When you put your
script
tag insidehead
tag (or in the upper side of the HTML doc), the user will be late to see the UI and as a result the user could see a blank screen for a certain period of time.script
at the end:So if it goes at the end, the HTML is already parsed and the UI will be shown to user before JS file starts downloading. Though, to interact with the UI, the JS file need to be downloaded first.
async
,defer
inscript
tag:When you set
async
,defer
in ascript
tag, this file is considered as less important for the UI, so the file won't block the HTML file from parsing. It will be downloaded asynchronously. So it does not create any effect where you put this kind of script.But still I think it's better to put it at the end as HTTP/1 can only make 6 requests at a time, so there is no use of start downloading a less important (
async
,defer
-ed) script at the first place.awesome! explained in-details. Your effort is admirable, love you man <3
The scripts get downloaded as and when the parser encounters them. So having them in head will start downloading them earlier. Scripts that is important for user interaction can be put in the head with async or defer. Scripts like analytics etc. can be included at the end as it could take up potential download bandwidth needed for other important resources like CSS etc. if included earlier.
@siddiqnx already explained nicely, Thanks buddy. I already added some point in article. If you have some super important script(like API request) that really need to inject in head you can inject them in head. There is always some scripts those are less important to load at the beginning you can put them in end of the body that will assist you to load your DOM without any unexpected behavior. I hope you got it, Thanks.