1

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?

Shreyas
  • 86
  • 7
  • 2
    [It is already answered here, click the text to go the link][1] [1]: http://stackoverflow.com/questions/2451417/whats-pros-and-cons-putting-javascript-in-head-and-putting-just-before-the-body – Sadique Jul 03 '15 at 05:49

4 Answers4

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.

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.

winhowes
  • 7,845
  • 5
  • 28
  • 39
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.

Bhavin Solanki
  • 4,740
  • 3
  • 26
  • 46
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.

Susantha7
  • 898
  • 1
  • 20
  • 38