Appropriate location to load/call javascript in HTML

Question

I observed that there is a generic behavior to declare the javascript within head tag of HTML followed by the body and rest of the content. This is mostly practiced when we have jQuery or any other library files that we want to refer in our project,

Why do we need to add the javascript in the head tag of the HTML?

and

What difference would it make, If we add it within the body tag, whether there will be any change in page rendering performance of the browser?

For instance, I would like to understand following scenario. Consider my javascript contains following one line,

$(SomeHTMLTag).replace("%data%, NewName);

Now, if I add this javascript in a header tag, my HTML page will be rendered with newName.

Secondly, if I add javascript at the end of HTML after SomeHTMLTag has been rendered, then in such case whether there would be a duplication of rendering SomeHTMLTag with default name first and then with the new name?

[It is already answered here, click the text to go the link][1] [1]: stackoverflow.com/questions/2451417/… — Sadique
– Sadique, Commented Jul 3, 2015 at 5:49

user5038678 · Accepted Answer · 2015-07-03 05:33:53Z

2

Javascript references can be added in last statement of body tag. Most of the javascripts are need to execute after html rendered, so that JS should not be in head tag. If it is in head tag and considered the referred JS is 1MB, then the JS will download by browser first, then the html will render, so it take some time. If it is in bottom of the content, then the html will render first and the user see the response as soon as.

answered Jul 3, 2015 at 5:33

user5038678

Sign up to request clarification or add additional context in comments.

Comments

winhowes · Accepted Answer · 2015-07-03 05:33:51Z

1

The reason you put it in your head tag is to load whatever you need right away and to keep your non-DOM (your JS and your CSS) separated.

However, unless the scrips are loaded with async tag, they block the page from loading. So it's actually not bad practice to put the script tags at the end of the body tag, and as an added bonus, you don't have to wait for the DOMReady event to begin manipulating DOM as the elements are already loaded. I work on high performance pages, and I often put my script tags at the end of the body.

answered Jul 3, 2015 at 5:33

winhowes

8,1255 gold badges31 silver badges41 bronze badges

Comments

Bhavin Solanki · Accepted Answer · 2015-07-03 05:32:51Z

0

You can place any number of scripts in an HTML document.

Scripts can be placed in the , or in the section of an HTML page, or in both.

Note : Keeping all code in one place, is always a good habit.

answered Jul 3, 2015 at 5:32

Bhavin Solanki

4,8143 gold badges28 silver badges47 bronze badges

Comments

Susantha7 · Accepted Answer · 2015-07-03 05:49:02Z

0

In Javascript, SCRIPT tags can be inserted into as

in between the two BODY tags,
in between the two HEAD tags,

*in between the two HEAD tags - * Browsers work top-to-bottom therefore script will be parsed before any HTML or CSS elements are loaded .it means Your page will render slow if you move the script tags to between the two head tags (top as far as possible )

*in between the two BODY tags - * Browsers work top-to-bottom in this incident web page itself will have loaded before the script is read. this can also increase rendering performance. For best results, render html,css early and script last.

so if you have some slow script at the top, it could delay or block the rest of the page from rendering.

edited Jul 3, 2015 at 5:49

answered Jul 3, 2015 at 5:39

Susantha7

9363 gold badges20 silver badges40 bronze badges

Collectives™ on Stack Overflow

Appropriate location to load/call javascript in HTML

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related