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

Question

I have a few snippets of javascript scattered about my pages - many are contained in my own .js files, however some of the stuff that I've found online sits directly on the page.

I'm not too familiar with how javascript interacts with a page - is there a difference between adding the script inline or adding a reference to the external file?

Answer 1

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.