Difference Between Internal & External Javascripts

Techwalla may earn compensation through affiliate links in this story.

In the mid-1990s, developers at Netscape created a simple scripting language to use as a tool to make websites more interactive and engaging. This language would eventually be known as Javascript. Many users today are unaware that the features of the email client or social-networking website they depend upon are the result of thousands of lines of clever and complex Javascript programming.


Internal Javascript

In order for Javascript code to work its magic, it must somehow be incorporated in the proper location on a particular web page as the page is loaded. Internal Javascript code is code that's placed anywhere within the web page between the HTML tags . Many web developers choose to place their Javascript code before the tag.

Video of the Day

External Javascript

Javascript code placed in a file separate from the HTML code is called external Javascript. External Javascript code is written and used in the same way as internal Javascript. The file should have the ".js" extension, although virtually any other extension works with modern browsers. One important difference: The external code must not be placed between the tags, or the code will not work.


The web browser must know that it needs to load external code. The web page must have the following HTML tags referencing the script:

The URL tells the web server where to locate and load the Javascript code.

Advantages to Internal Javascript

If the number of lines of Javascript is relatively small, a web page with internal Javascript loads faster than pages that must reference external code. This is because, as the web browser loads the page and encounters the reference to the external code, it must make a separate request to the web server to fetch the code.


Advantages of External Javascript

If identical code is used on several pages of a website, external Javascript files are beneficial. You only need to include a reference to the external code in those pages that actually require that code. If the Javascript code changes, only one file has to be edited; changes are instantly available to all pages needing the code. Storing Javascript in external files also makes it easier to maintain websites: The pages are less cluttered, and the web developer has fewer lines of code to wade through to make necessary edits. Fewer lines of HTML code may also help search engine spiders more thoroughly index your site and find important keywords.


Finally, if a visitor moves to another page containing the same external Javascript references, the second page will load faster, because the user's browser will have cached or stored the Javascript file locally.


references & resources