Internal vs external
Both types methods of using scripts have advantages and disadvantages and will be discussed further in this article.
An external script is a script that is not included in the web document and is found in a different file altogether. In relation to a website, this allows a developer to write one script file and reference it on every page on the website.
An external script has the main benefit that it is updated once and it is updated across a whole website. It can also be cached by the user's browser, reducing the number of times it needs to be downloaded by the client's browser. Another major benefit is that the code can be managed much better since it is separate from the content (HTML). As well as this, a fourth benefit of external scripts is that they can be stored on a completely separate server, for instance a content delivery network (CDN) so that it can be downloaded faster.
There are disadvantages to this form of script too. The main issue is that it adds one extra download to every webpage that is visited. This adds one more HTTP request unless the script is cached.
An external script is included in a HTML document as a HTML element, specifically the
<html> <head> <title>Sample</title> <script src="script.js"></script> </head> <body> <p>Hello world</p> </body> </html>
Whilst it is often the case that scripts are included in the
element, it is perfectly normal to include scripts anywhere within the HTML. It is now often the case that
scripts are included at the end of the webpage so not to slow the loading time of the page and to ensure
that they are executed when the page has loaded.
An inline script is a script included directly in a web document. There are two methods of inline scripts, as an inline element and as an inline event on an element.
The main disadvantage of an inline script is that it cannot be cached and therefore must be downloaded each and every time the user visits the page. Inline scripts obviously should be specific to the webpage that they are included on otherwise they are consuming unncessary resources on the client's computer.
<head> or the
This code will be executed when the browser works it's way to the location of the tag.