Question

I’ve just learned an important fact about the execution of Javascript in case of an error being thrown. Before I start making conclusions of this I’d better verify whether I am right.

Given an HTML page including 2 scripts:

<script src="script1.js" />
<script src="script2.js" />

script1:

doSomething();

script2:

doSomeOtherThing();

This effectively results in a single script being processed as one unit:

doSomething();
doSomeOtherThing();

In particular, if doSomething throws an error, the execution is broken. ‘script2’ is never being executed.

This is my "Lesson 1" – one might think since it is a separately included file it is not affected by script1. But it is. => see "late update" below

---

Now, if we change script2 as follows (presuming we have jQuery included somewhere above):

$(document).ready({ doSomeOtherThing(); });

and place the script before script2:

<script src="script2.js" />
<script src="script1.js" />

The order of execution is effectively still ‘doSomething()’ followed (sometime) by ‘doSomeOtherThing()’.

However it is executed in two "units":

• doSomething is executed early as part of the document’s java script
• doSomeOtherThing is executed when the document.ready event is processed.

If doSomeOtherThing throws an exception, it will not break the second processing "unit".

(I refrain from using the term thread because I reckon that all script is usually executed by the same thread, or more precisely this may depend on the browser.)

So, my Lession 2: Even though a JavaScript error may prevent any subsequent scripts from executing, it does not stop the event loop.

---

Conclusion 1

$(document).ready() does a great job in defining chunks of JavaScript code that should be executed independent on any other scripts in succeeding.

Or, in other words: If you have a piece of JavaScript and want to make sure it gets executed even if other scripts fail, place it within a $(document).ready().

This would be new to me in that I would only have used the event if the script depends on the document being fully loaded.

---

Conclusion 2

Taking it a step further it might be a good architecture decision to wrap all scripts within a $(document).ready() to make sure that all scripts are "queued" for execution. In the second example above, if script2.js was included after script1.js as in example 1:

<script src="script1.js" />
<script src="script2.js" />

An error in script1.js would prevent the doSomeOtherThing() from even being registered, because the $(document).ready() function would not be executed.

However, if script1.js used $(document).ready(), too, that would not happen:

$(document).ready(function() { doSomething(); });
$(document).ready(function() { doSomeOtherThing(); });

Both lines would be executed. Then later the event loop would execute doSomething which would break, but doSomeOtherThing would not be affected.

One more reason to do so would be that the thread rendering the page can return as soon as possible, and the event loop can be used to trigger the code execution.

---

Critique / Questions:

• Was I mistaken?
• What reasons are there that make it necessary to execute a piece of code immediately, i.e. not wrapping it into the event?
• Would it impact performance significantly?
• Is there another/better way to achieve the same rather than using the document ready event?
• Can the execution order of scripts be defined if all scripts just register their code as an event handler? Are the event handlers executed in the order they were registered?

Looking forward to any helpful comments!

Late Update:

Like Briguy37 pointed out correctly, my observation must have been wrong in the first place. ("Was I mistaken – yes!"). Taking his simple example I can reproduce that in all major browsers and even in IE8, script2 is executed even if script1 throws an error.

Still @Marcello’s great answer helps get some insight in the concepts of execution stacks etc. It just seems that each of the two scripts is executed in a separate execution stack.

Answer 1

Your first assumption that they run as one script is incorrect. Script2 will still execute even if Script1 throws an error. For a simple test, implement the following file structure:

-anyFolder
--test.html
--test.js
--test2.js

The contents of test.html:

<html>
   <head>
       <script type="text/javascript" src="test.js"></script>
       <script type="text/javascript" src="test2.js"></script>
   </head>
</html>

The contents of test.js:

console.log('test before');
throw('foo');
console.log('test after');

The contents of test2.js:

console.log('test 2');

The output when you open test.html (in the console):

test before test.js:1
Uncaught foo test.js:2
test 2 

From this test, you can see that test2.js still runs even though test.js throws an error. However, test.js stops executing after it runs into the error.