Question

62

Should JavaScript go inside the < body> for performance, rather than the < head>?

rated 0 times [ 65] [ 3] / answers: 1 / hits: 10251 / 11 Years ago, fri, december 27, 2013, 12:00:00

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>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

pranavrorys

Add To Favorites

Follow

Total Points: 466

Total Questions: 87

Total Answers: 115

Location: Barbados

Member since Sun, Nov 27, 2022

2 Years ago

answered 11 Years ago bryonk · Accepted Answer

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.