Javascript – inline vs external script – what’s the difference?

by

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.

More Related Contents:

  1. How to change all elements with the same IDs javascript/html? [duplicate]
  2. how to change localhost from false to true?
  3. How to output numbers with leading zeros in JavaScript? [duplicate]
  4. Find a value in an array of objects in Javascript [duplicate]
  5. async/await always returns promise
  6. Recursive matching with regular expressions in Javascript
  7. HTML5 record audio to file
  8. Detect blocked popup in Chrome
  9. How to linebreak an svg text within javascript?
  10. Changing element style attribute dynamically using JavaScript
  11. Assign variable in if condition statement, good practice or not? [closed]
  12. How to convert CSV to JSON in Node.js
  13. How to detect a long touch pressure with javascript for android and iphone?
  14. How to block for a javascript promise and return the resolved result? [duplicate]
  15. JSON.stringify, change the case of the key
  16. How can I make var a = add(2)(3); //5 work?
  17. What exactly is Hot Module Replacement in Webpack?
  18. Is there a way to have two docs in Docusaurus 2?
  19. How to tell if a JavaScript function is defined
  20. Promise.all with Firebase DataSnapshot.forEach
  21. Change the native confirm/alert [duplicate]
  22. Difference between window.location.assign() and window.location.replace()
  23. How do I get first element rather than using [0] in jQuery?
  24. Backbone View: Inherit and extend events from parent
  25. Loading Javascript Dynamically and how to check if the script exists
  26. Annoying javascript timezone adjustment issue
  27. Knockout JS – How to correctly bind an observableArray
  28. Updating a JSON object using Javascript
  29. Web Audio API, get the output from the soundcard
  30. How to programmatically fill input elements built with React?

Leave a Comment