When Should I Use Inline Vs. External JavaScript

Javascript - inline vs external script - what's the difference?

There is little difference in using one or the other way. The real difference comes from the advantages/disadvantages that each one has.

Inline scripts

  • Are loaded in the same page so is not necessary to trigger another request.
  • Are executed immediately.
  • The async and defer attributes have no effect
  • Can be helpful when you are using a server-side dynamic rendering.

External scripts

  • Gives better separation of concerns and maintainability.
  • The async and defer attributes have effect so if this attributes are present the script will change the default behavior. This is not possible with inline scripts.
  • Once a external script is downloaded the browser store it in the cache so if another page reference it no additional download is required.
  • Can be used to load client code on demand and reduce overall download time and size.

When should I use Inline vs. External Javascript?

At the time this answer was originally posted (2008), the rule was simple: All script should be external. Both for maintenance and performance.

(Why performance? Because if the code is separate, it can easier be cached by browsers.)

JavaScript doesn't belong in the HTML code and if it contains special characters (such as <, >) it even creates problems.

Nowadays, web scalability has changed. Reducing the number of requests has become a valid consideration due to the latency of making multiple HTTP requests. This makes the answer more complex: in most cases, having JavaScript external is still recommended. But for certain cases, especially very small pieces of code, inlining them into the site’s HTML makes sense.

Javascript - inline vs include - Is there a difference in loading or running?

No matter how you include it, in both cases, code will be treated the same way and will have the same effect.

The only implications are maintenance and performance wise.

While it's clear that maintaining JS code which is in separate file is easier, when it comes to the performance, there are two things to consider:

  1. If you have a separate file, browsers will be able to cache it.
  2. If you have it in a same file as html, download will be somewhat faster due to TCP slow start.

My personal preference is to alway keep the JS separately.

Is there any good reason for javascript to be inline

No. Write Unobtrusive Javascript.

Cons of external JavaScript file over inline JavaScript

The only downside that I am aware of is the extra HTTP request needed. That downside goes away as soon as the Javascript is used by two pages or the page is reloaded by the same user.

Different results from inline and external JS return confirm

you are missing the return . Change the click event same as before onclick="return requestDangerConfirm()"

If the javascript is inline or external javascript file .without return in onclick .They not perform the decision from your function.