Does failing to load a remote javascript file stop javascript execution in any browsers?

Question

I've got a stand alone script file that I want to load from a 3rd party server:

<script type="text/javascript" src="//some_server/logger.js"></script> 

There's a small chance the remote script won't be there sometimes (404), and I want to be sure that including this script doesn't affect how my app operates, since my app doesn't require the script to be loaded to work (it's an analytics tracker of sorts)

Can I include this script safely without it blocking or causing javascript errors in my app that stops other javascript from running?

I was thinking of adding the async and defer attributes to make the script load lazily. Is this enough? My app needs to work on IE8 and above.

Here's what I'm thinking right now:

<script async defer type="text/javascript" src="//some_server/logger.js"></script> 

<script type="text/javascript">
console.log("I want this to always execute, no matter if the above script 404's or not!");
</script>

Answer 1

Can I include this script safely without it blocking or causing javascript errors in my app that stop other javascript from running?

YES you can

A 404 does not halt execution of javascript in any way, only errors do.
As long as the server responds with a 404, and doesn't hang, the script not loading won't cause any noticeable delay.

This can be tested in different browsers by logging the time it takes to check a 404 or broken link.
Just the fact that the browser logs the time, shows that such scripts does not halt execution of javascript, the thread always continues on to the next script tag unless the parser encounters an error in a script, if the URL isn't found, no browser will throw an error, it just goes on as soon as the URL is not resolved.

<script>console.time('Test');</script>
<script type="text/javascript" src="http://www.broken.url/file.js"></script>
<script>console.timeEnd('Test');</script>

FIDDLE

Testing in IE, Chrome, Firefox and Opera shows that all browsers use less than 0.0002 seconds to resolve a broken link, and the time it takes to resolve a 404 depends on how fast the server responds, but for Google's servers it seems to consistently be less than 0.2 seconds in all browsers before the 404 status code is returned, and the browser keeps executing the next scripts.

Even adding up 20 scripts that all return a 404 takes generally less than half a second for the server to resolve and move on

FIDDLE

In other words, you can safely add any script that has a broken link or returns a 404, it won't break anything, and it won't hang the browser in any way, it only takes a few milliseconds for modern browser to determine that the script can't be loaded, and move on.

What you can't do, is include scripts that actually load, and contain fatal errors, as that will stop the entire thread, and any execution of scripts that comes after the error is encountered.

Answer 2

Define all functions you use (which are in //some_server/logger.js) as empty functions before loading the script and you'll have no exceptions even if you use them without the script being loaded.

<script type="text/javascript">
   functionInLogger = function() {
   };
   functionInLogger2 = function() {
   };
   ...
</script>
<script type="text/javascript" src="//some_server/logger.js"></script> 

<script type="text/javascript">
   functionInLogger(); 
   functionInLogger2();
   console.log("This will always work");
</script>

And when the script is loaded, it'll override the empty functions.

I could not find any popular browser that will stop execution upon a 404. And W3 standard only states this; (W3)

When the user agent is required to execute a script block, it must run the following steps:

...

If the load resulted in an error (for example a DNS error, or an HTTP 404 error) Executing the script block must just consist of firing a simple event named error at the element.