How do I load external javascript?

Question

I was going through bootstrap site, where they mention this snippet to load bootstrap: http://getbootstrap.com/getting-started/

Essentially, the bootstrap javascript and JQuery are loaded just before the body tag. Is this the recommended way to load any external javascript.
Are there any scenarios in which external javascript must be loaded in head tag? Because, I have seen many such examples.
This google page has its own technique of loading javascript just before body tag https://developers.google.com/speed/docs/best-practices/payload?csw=1#MinifyHTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Aamir Shahzad · Accepted Answer · 2014-07-29 12:54:05Z

<Script></Script> can be added any where in the document but its usually good practice to add all resources like JavaScript , CSS , Fonts and other resources before closing of </head>.

You can notice;

1) All meta tags & document rendering tags are on the top
Because, browser first render the document properly and meta tags do their job first.
2) CSS is added after meta tags
Because, as soon web page is render it may look good as style is loaded earlier in the document.
3) Scripts are loaded after styles in the header or before closing of </body> tag
Its common practice to add them before closing of </head>. But some developers (i do as well) add them before closing of </body> tag so that all styles and HTML render first so that user may see properly styled page first and heavy loading scripts may load in the end. Therefore, page will load fast and other heaving scripts load in the last.

Swetha · Accepted Answer · 2014-07-30 05:27:00Z

1

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

Scripts can be placed in the body or in the head section of HTML, and/or in both.

Often you will see scripts at the bottom of the body section of a web page. This can reduce display time.

Sometimes you will see all JavaScript functions in the head section.

Anyway, separating HTML and JavaScript, by putting all the code in one place, is always a good habit.

It is a good idea to place scripts at the bottom of the body element. This improves page load, because HTML loading is not blocked by scripts loading.

Note : You can place an external script reference in head or body as you like.The script will behave as if it was located exactly where you put the reference in the HTML document.

edited Jul 30, 2014 at 5:27

answered Jul 29, 2014 at 11:45

Swetha

74610 silver badges19 bronze badges

Comments

xxbinxx · Accepted Answer · 2014-07-30 05:46:39Z

1

usually javascript files are loaded after your page is fully loaded.. because any end user doesn't want to wait for too long for the webpage to appear So avoid extra and long requests that delay loading. inline jScript files and small scripts are included within head tag. Bootstrap also places js files at the bottom after jquery.js.

Hope you understand what I am trying to say.

answered Jul 30, 2014 at 5:46

xxbinxx

1,55111 silver badges18 bronze badges

Collectives™ on Stack Overflow

How do I load external javascript?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related