Inline vs External JavaScript Code – Advantages & Disadvantages
Reusability: You can reuse an external JavaScript file in multiple HTML files by simply adding reference to it. Any changes made to that external Ja
vaScript file will affect all HTML files which are having reference of it. In case of inline JavaScript code, you have to write same code in multiple HTML files again and again. This means if there will be any change in your code, then you have to go through all HTML files to apply it.
Maintenance: From maintenance point of view, it’s a good habit to have separate file for each language like JavaScript, HTML, CSS etc. After doing such, you will have 2 files to work on, one will contain only HTML code and another will contain only JavaScript code. In case of inline JavaScript, your whole code file will be messed up with lengthy JavaScript and HTML code. If there will be any errors, it will be extremely time consuming to fix them.
Browser Cache: An external JavaScript file can be cached by browser engine whereas an inline JavaScript cannot. Since inline JavaScript code is placed inside a HTML file, its loading time depends upon where you actually placed the code in the HTML file. If it is in the header section, then it will load first. If it is in the footer section, then it will load at the end.
