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:
- If you have a separate file, browsers will be able to cache it.
- 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.
function requestDangerConfirm() { return confirm('Are you sure?');}
<a href="/danger/" onclick="return requestDangerConfirm()"> Danger </a>
External or Inline JavaScript? - Page Load Time
It very rarely matters for speed purposes unless you're Google. However, for readability and maintainability, it's much better to keep your JavaScript in external files.
If you put your <script>
tags at the end of the page (just before the closing <body>
tag) the JavaScript won't block loading of the page.
Related Topics
Why Does Canvas.Todataurl() Throw a Security Exception
When Do Items in Html5 Local Storage Expire
How to Get the Entire Document HTML as a String
Adding Input Elements Dynamically to Form
Way to Ng-Repeat Defined Number of Times Instead of Repeating Over Array
How to Apply the Required Attribute to ≪Select≫ Fields in Html5
How to Get a Number of Random Elements from an Array
How to Get Numeric Value from a Prompt Box
Electron Require() Is Not Defined
Chrome Extension - Retrieving Global Variable from Webpage
How to Simulate a Hover With a Touch in Touch Enabled Browsers
When Should I Use Inline Vs. External JavaScript
How to Get All Selected Values of a Multiple Select Box
Open Url in Same Window and in Same Tab
Html Text-Overflow Ellipsis Detection