Should JavaScript go inside the for performance, rather than the ?

Question

An IBM website talking about rapid web development here mentioned a useful skeleton HTML. In the template, the script inclusion is inside body rather than head. Is it a good practice? Isn't it better to put any library inside head instead?

<html>
  <head>
    <title>Template</title>
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="css/bootstrap-responsive.min.css" rel="stylesheet">
  </head>
  <body>
    <!-- The main HTML will go here -->
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

VS

<html>
  <head>
    <title>Template</title>
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="css/bootstrap-responsive.min.css" rel="stylesheet">
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </head>
  <body>
    <!-- The main HTML will go here -->
  </body>
</html>

Yes, it's good practice. That way you wait for the markup and styles to load first. — elclanrs, Dec 27 '13 at 03:37
yes, please find that link for ease [Yahoo suggestions, here](http://developer.yahoo.com/performance/rules.html#js_bottom). I normally put at the bottom of the document. even after ` — Siva Tumma, Dec 27 '13 at 03:41
@sivatumma no browser will ever give you an error... they're quite forgiving.. — Anshu Dwibhashi, Dec 27 '13 at 03:49

m59 · Accepted Answer · 2018-11-12T05:04:10.950

It is now standard for script tags to be included just before the closing of the body tag so that the script loading does not block the rest of the page loading.

  <script src="myScript.js"></script>
</body>

With this, the user will not have to wait as long to see something on the page, then the javascript functionality is added.

However, there are more and more sites and "web apps" that are javascript/ajax heavy and may require the scripts to be loaded before anything is shown on the page anyway. That is less common, but that is a case where the script could be included in either location, since the visual result would be the same if javascript is responsible for creating/loading the content.

To verify: here is Google's recommendation: https://developers.google.com/apps-script/guides/html/best-practices#load_javascript_last

Also consider loading libraries from a CDN, so that you can take advantage of browser caching.

score 3 · Answer 2 · edited May 23 '17 at 12:31

Yes / No

Yes it is good practice as the page will load faster if the code is in the ending...

It waits for the whole page to load and then loads the scripts.

Here's how:

There was this site i visited, which quickly responded to my browser's request. but when i got the response, it was some white page with some boxes and some text. and it was taking ages for the page to load. After some time some images appeared in the boxes and the text got styled.

Why?

When the page loaded the script was placed in the head. So, the script was loading and the images and the styles were in the queue. So i had to witness an ugly page while the script loads.

Alternative:

If the script was placed in the ending of the page, just before the </body> tag, the styles and images would have loaded faster so i wouldn't have to see an ugly site, then the page would load.

Should JavaScript go inside the for performance, rather than the ?

2 Answers2

Yes / No

Here's how:

References: