18

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?

John Ohara
  • 2,821
  • 3
  • 28
  • 54
  • 3
    its all about separation of concerns and maintainability. – Daniel A. White Apr 28 '15 at 11:31
  • There is no difference, it's just a matter of convenience and convention. In an online example it is easier to show the javascript inline with the HTML. Where as in a big project the convention of having javascript in files helps maintainability and expansion. – Charly Apr 28 '15 at 11:33

5 Answers5

26

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.
devconcept
  • 3,665
  • 1
  • 26
  • 40
8

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 :)

LukeP_8
  • 199
  • 3
  • 5
  • 12
2

Looking at the <script> tag documentation, you can see that you can use the async and defer attributes only with external scripts, which might have an effect on scripts that do not use event listeners as entry points.
Other than that, inlining renders a browser unable to cache it on its own, so if you use the same script on different pages, the browser cache cannot kick in. So it might have an effect on performance and/or bandwidth usage.
And, of course, splitting code up into files is one way of organizing it.

Siguza
  • 21,155
  • 6
  • 52
  • 89
  • About `defer`, from the [MDN](https://developer.mozilla.org/en/docs/Web/HTML/Element/script#Attributes): "Since this feature hasn't yet been implemented by all other major browsers, authors should not assume that the script’s execution will actually be deferred." – Kyll Apr 28 '15 at 11:39
  • CanIUse claims that only Opera Mini and IE<10 don't support [`async`](http://caniuse.com/#feat=script-async) and [`defer`](http://caniuse.com/#feat=script-defer). – Siguza Apr 28 '15 at 12:33
2

Generally there is no difference as indicated in the comments. But, if the snippet is embedded in the middle of the HTML in the page and it is not a function, it is executed immediately. Such script segments may have a difference in behavior when moved to a separate JS file when enough care is not taken.

Krishna
  • 1,871
  • 14
  • 26
-1

Consider this. If you're working in php; WordPress for example. You may need data from some wp functions like pagination, current category, etc and an inline script may be appropriate.

You can do something like:

<script>    
    var currentPageNumber = <?php echo get_query_var('paged'); ?>
</script>

If using a separate js file you'll need to localize a script with all of the backend data (similar to an inline script) then call the variables within your external file

Denver Kunaka
  • 9
  • 4