Inline vs external script - what's the difference?

Question

I have several javascript fragments scattered across my pages - many of them are contained in my own .js files, however some things that I found online are directly on the page.

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

Answer 1

There are few differences in using one or the other. The real difference is related to the advantages / disadvantages that everyone has.

Inline scripts

• They load on one page, so there is no need to run another request.
• Executed immediately.
• Asynchronous and pending attributes have no effect
• It may be useful when you use dynamic server-side rendering.

External scripts

• Better separation of problems and maintainability.
• Asynchronous and pending attributes have an effect, so if these attributes are present, the script will change the default behavior. This is not possible for inline scripts.
• After loading an external script, the browser will save it in the cache, therefore, if the link to another page does not require additional loading.
• It can be used to download client code on demand and reduce the overall time and size of the download.

Answer 2

External script files

• It is much easier to analyze so that you can debug and read more efficiently. It makes life a lot easier for us as programmers.
• Download time is reduced as the external file is cached, so it can be downloaded from the website.
• Instead of writing the same script multiple times, the external file can be called and executed anywhere in the code

External files slow down the page rendering speed because the browser must stop parsing and load the external file. This adds a round-trip network, which will slow down everything. In addition, since external files are cached, it is difficult to delete them if they have been updated.

Inline code

• Embedded code reduces the number of HTTP requests, improving web page performance. This is because the code loads on the same page, so no request is required.
• Inline script runs immediately

Although inline code is much harder to read and parse, it just looks like a piece of code put together. It is hard work to find a problem while debugging, making the life of a programmer tough.

Hope this helps you understand a little more :)

Answer 3

Looking at the <script> tag documentation , you can see that you can use the async and defer only with external scripts, which can affect scripts that do not use event listeners as entry points.
Furthermore, inlining makes the browser unable to cache it by itself, so if you use the same script on different pages, the browser cache cannot fire. Therefore, this may affect performance and / or bandwidth usage.
And, of course, splitting code into files is one way to organize it.

Answer 4

As a rule, there is no difference, as indicated in the comments. But, if the fragment is embedded in the middle of the HTML page on the page and is not a function, it is executed immediately. Such script segments may have a difference in behavior when moving to a separate JS file when careful maintenance is not required.