One advantage of inline JavaScript is that as it is in the same HTML file as most of the rest of the page, the number of requests triggered to call other external elements is reduced. This speeds up loading times and is a direct result of the request loading one file at once. Another advantage is very much like the previous one; the script is loaded at the same time as the rest of the page, meaning it is immediately available when the rest of the page is. In addition to general performance advantages overall, simpler one-line scripts would be better within the HTML file – the performance advantages combined with the simplicity of implementation makes inline the best choice in these cases. Along with page-specific scripts, the reduced loading times from execution times and traffic. This specifically benefits smaller scripts, taking up about as much space as a reference within <script> tags otherwise might.
However, there are many issues with using JavaScript inline. The key issue is on the programmer’s side of things, as inline scripts consisting of multiple lines can cause difficulty in handling HTML files. This is due to the structure of inline JavaScript – using <script> tags to enclose the entire script results in a more cluttered HTML file which is harder to read, edit, and check for mistakes at a glance. Additionally, use of inline JavaScript makes using the same script somewhat of a hassle. A repeated inline script would have to be handled either by copying or pasting the script from the <script> tags of one page to the next, or by rewriting the scripts from scratch each time. This is a time-consuming and irritating task for the web developer that should only ever present itself when coding page-specific scripts, rather than repeated ones.
On the other hand, there are many advantages to external JavaScript. Repeat users to a webpage will be able to load JavaScript elements faster than if they were inline, as external files are saved in the user’s cache. This reduces load times as the computer doesn’t have to redownload the script in order to display it. Another key advantage for the programmer is that external script references make the code far less cluttered. This is because calling an external script is as easy as enclosing the location of the file within <script> tags in the HTML file – this makes the code far less difficult to read than if the entire script was within the tags. In addition to this, using the same script between multiple pages is easier with an external script.
Despite this, there are some drawbacks to external JavaScript files. Firstly, they are slower to initially load as they are loaded separately from the rest of the webpage. This can result in some JavaScript elements having a delay in loading compared to the rest of the page. Additionally, storing files separately from the HTML can be difficult when the script needs tweaking for a specific page, as a new external file would need to be created with the changes; this makes the other advantages somewhat irrelevant in such a case. Beyond that, external JavaScript becomes an unnecessary step to take when using very small scripts. One or two-line scripts being stored externally is more trouble than it’s worth, as the benefits for external scripts rely on it being longer.