Javascript - inline vs external script - what's the difference?
Solution 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.
Solution 2:
External script files
- Much easier to analyse so you can debug more efficiently and read it. This makes life much easier for us as programmers
- Download time is reduced as the external file is cached so it can be downloaded with the website
- Instead of writing the same script numerous times, an external file can be called and executed anywhere in the code
External files decrease page rendering speed as the browser has to stop parsing and download the external file. This adds a network round trip which will slow everything down. Also because external files are cached it makes it tough to delete them if the have been updated
Inline code
- Inline code reduces the number of HTTP requests making improving the performance of the webpage. This because the code is loaded in the same page so a request is not needed
- Inline script is executed immediately
Although inline code is much harder to read and analyse as it just looks like a lump of code chucked together. It is hard work having to find the problem when debugging, making life as a programmer tough
Hope this helps you understand a bit more :)