External JavaScript JS File – Advantages, Disadvantages, Syntax, Attributes

You can place your JavaScript code in an external file with .js extension. External scripts are useful for code reuse. When the same code is used in multiple sites or html pages, it makes sense to have the javaScript code separated into its own js file.

External Javascript files

Step 1. Save below code in myScript.js file

// begin myscript.js file
function myFunction() {
   document.getElementById("demo").innerHTML = "Paragraph changed.";
}
// end myscript.js file

Step 2. To use an external script in page, type the path of the script file in the src attribute of <script> tag as below. The src attribute can be a relative path if the file is hosted on the same server where the html file is. Or it can be a fully qualified url if the js file is hosted on a different web server.

<html>
	<body>
		<p id="div_id">Welcome to Javascript</p>
		<script src="/Code-Samples/JavaScript/myScript.js"></script>
	</body>
</html>

Download the code Run the code
Just like inline scripts, you can place an external script anywhere in page between <head> or <body> tags. The script executes exactly the same no matter where it is located on the page.

External JavaScript Advantages

Placing JavaScript code in external js files has some advantages over inline scripts:

  • Separating HTML and JavaScript code will help manage the code base better
  • Designers can work along with coders parallel without code conflicts
  • Works well with modern source code version control systems such as GIT and SVN.
    • Each of these files will maintain history
    • Can be checked in, checked out by multiple programmers.
  • Code as well as HTML is easily readable
  • External JavaScript files are cached by browsers and can speed up page load times
  • With these small js files, you can use Google closure or YUI Compressor or other minifying tools to reduce the size and make it not readable by humans.
  • Many popular JavaScript packages are available as hosted on content delivery networks (cdn) and you can simply point to them using the URL in the src, thus avoiding copying the js file to local folder.
  • Take advantage of advanced tools such as CommonJS or RequireJS to load these scripts logically and modularly.

Disadvantages of external JavaScript

Typically all programmers use external JavaScript these days and it’s very safe and is a best practice. There are very few issues (not really disadvantages) with external js files as listed below:

  • The browser has to make an extra http request to get the js code.
  • Code can be downloaded using the url of the js file. This can help coders to steal your code easily.
  • Dependency: If script1.js relies on script2.js and for some reason the script1.js download fails, then your application will break/crash, though the chances of this happening is very slim.
  • Order of these includes must be maintained, otherwise you get into scope errors.
  • A small change to a common js file may cause unexpected results in some of the HTML files that use this js. Example, if you add document.load() in a common js since a certain HTML1 that uses this common js needs it, that may fix the issue in HTML1 but what about the other HTML files which also happen to include the same js?
  • When many HTML pages are using a common js file, you need to be extra careful to change the common js. You will need to test all the HTML files that depend on this common js, every time you make a change to the js file.
  • Stackoverflow has few great insights on this topic.

Script tag Attributes

Normal HTML page execution starts line by line. When an external JavaScript <script> element is encountered, HTML parsing is stopped until a JavaScript is download and ready for execution. This normal page execution can be changed using defer and async attribute.

HTML defer attribute

When a defer attribute is used, JavaScript is downloaded parallelly with HTML parsing but  will be execute only after full HTML parsing is done.

<script src="/local-js-path/myScript.js" defer></script>

HTML async attribute

When async attribute is used,  JavaScript is downloaded as soon as the script is encountered and after the download, it will be executed asynchronously (parallelly) along with HTML parsing.

<script src="/local-js-path/myScript.js" async></script>

When to use which attributes

  • If your script is  independent of other scripts and is modular, use async.
    • If you are loading script1 and script2 with async, both will run parallelly along with HTML parsing, as soon as they are downloaded and available.
  • If your script depends on another script then use defer for both 
    • When script1 and script2 are loaded in that order with defer, then script1 is guaranteed to execute first
    • Then script2 will execute after script1 is fully executed
    • Must do this if script2 depends on script1
  • If your script is small enough and is depended by by another script  of type async then use your script with no attributes and place it above all the async scripts.
<<< Adding JavaScript to htmlJavaScript Syntax >>>
Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .