3

General Question

I have been researching how javascript is loaded when a page is being rendered. Particularly, I found this to be very helpful:

Where should I put <script> tags in HTML markup?

However, I can't seem to find any information about the differences between inline javascript vs a javascript include.

Assuming helloWorld.js is using identical code, is there any difference between how these will be loaded or run?

<script language="JavaScript" type="text/javascript" src="helloWorld.js"></script>

<script language="JavaScript" type="text/javascript">alert("hello world");</script>

My Implementation

More specifically, I am implementing Adobe Analytics. The implementation guide recommends putting the code on the page as follows:

<script language="JavaScript" type="text/javascript">
    var s_code=s.t();if(s_code)document.write(s_code)
</script>

Would having this as an include rather than inline have any implications?

<script language="JavaScript" type="text/javascript" src="sCall.js"></script>

edit: I believe my question ended up being different because no one in the 'Similar Question' thread mentioned blocking.

Mladen Ilić answered my question.

Scripts without async or defer attributes, as well as inline scripts, are fetched and executed immediately, before the browser continues to parse the page.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script

Thank you for your responses!

MBeezy
  • 33
  • 4
  • Possible duplicate of [When should I use Inline vs. External Javascript?](https://stackoverflow.com/questions/138884/when-should-i-use-inline-vs-external-javascript) – Radonirina Maminiaina Mar 30 '18 at 22:19

2 Answers2

1

No matter how you include it, in both cases, code will be treated the same way and will have the same effect.

The only implications are maintenance and performance wise.

While it's clear that maintaining JS code which is in separate file is easier, when it comes to the performance, there are two things to consider:

  1. If you have a separate file, browsers will be able to cache it.
  2. If you have it in a same file as html, download will be somewhat faster due to TCP slow start.

My personal preference is to alway keep the JS separately.

Mladen Ilić
  • 1,667
  • 1
  • 17
  • 21
  • Izio's answer seems to suggest that inline will not block page load but an include will block. You're saying that you believe that is incorrect? – MBeezy Mar 30 '18 at 22:29
  • There are `async` and `defer` properties which can be added to script to change the way browser treat them, however they were not used in the script tags in your question. You can read more about async and defer on MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script – Mladen Ilić Mar 30 '18 at 22:33
  • Thanks for your response. I believe that I understand `async` and `defer` properties and they may be helpful to my situation. However, my question is, without them, is inline javascript handled differently than javascript that is included? – MBeezy Mar 30 '18 at 22:36
  • You are welcome. :) Without the `async` and `defer` they are handled the same way. Quote from MDN: "Scripts without async or defer attributes, as well as inline scripts, are fetched and executed immediately, before the browser continues to parse the page.". – Mladen Ilić Mar 30 '18 at 22:38
  • 1
    Yes, this is exactly what I was looking for! Thank you so much. I wish I could mark your comment as the correct answer. – MBeezy Mar 30 '18 at 22:40
  • Hmm..You can't? :) – Mladen Ilić Mar 30 '18 at 22:41
  • Haha, I just realized you were the one that initially posted this answer. Marked as correct answer. Thanks again :) – MBeezy Mar 30 '18 at 22:45
0

<script language="JavaScript" type="text/javascript" src="sCall.js"></script> will block the loading page while <script language="JavaScript" type="text/javascript"> var s_code=s.t();if(s_code)document.write(s_code) </script> will be non-bloquant

But, you could set async attribute to the inline declaration too... It's up to you! Where do you prefer to see it?

Izio
  • 378
  • 6
  • 15