Make sure a Javascript script is first to run?

Question

I've noticed some scripts seem to be called before others on a certain page, I was wondering, what is the specific order for scripts to load? In-page before referenced .js scripts? Are they run in order from first <script> mentioned to last in page, or Is this browser-dependent? How can one make sure that a specific script is first to run in a page?

Adalai

Answer 1

I've noticed some scripts seem to be called before others on a certain page. I was wondering, what is the specific order for scripts to load?

This is set by W3C in their language specifications. For the HTML 4.01 Specification, for instance, it's defined in Section 18.2.4 Dynamic modification of documents, item 1.

In-page before referenced .js scripts?

See above. No, inline and linked scripts are handled identically.

Are they run in order from first mentioned to last in page, or is this browser-dependent?

The specifications call for them to be run sequentially from top to bottom. You'll have to find a browser that implements the language according to specification. I can't think of any right now that handle SCRIPT tags differently, but I'm sure that is possible.

Another thing to consider is the definition of "run." That may sound like semantic parsing, but it's not. JavaScript, like any programming language, is itself designed to behave according to standards. JavaScript is specified in the ECMA-262 5.1 Edition / June 2011 standard to evaluate from left-to-right in Section 7 Lexical Conventions. (Line endings are treated as the left-most character of the next line.) This document also provides conventions for the order in which statements and other operations are evaluated, such as WHILE or FOR statements.

How can one make sure that a specific script is first to run in a page?

(1) Put it at the top, and (2) choose a browser that implements the language specification.

However, I feel there may be something more behind this question. If you're trying to stop unexpected code from executing, you'll have to block it until the ONLOAD event handler registers that the page is complete. (Simply enclose your operations in a function or surround them with an IF to check for a boolean flag, i.e. isLoaded being set true by ONLOAD.) Then, when the ONLOAD event handler fires off, you can kick off operations on your own schedule without having to worry about things like uninstantiated DOM objects.

Immolation

Answer 2

As long as no scripts are dynamically loaded or marked as async or defer, scripts are run or evaluated in the order encountered in the page. So, the first scripts encountered run first.

An externally referenced script file that must be loaded will cause all further javascript execution to wait until that externally referenced file is loaded and parsed and runs.

So, the evaluation order of normal (non-async, non-defer) javascript is 100% determinate as the order it is encountered in the page.

Disputant

Please provide a reference for that from ECMA-262 edition 5+ that declares this is the specified behavior according to standards. Are you certain it works this way across all browsers and platforms and is not just a fluke? – Immolation

@Immolation - I don't know where there's a reference on it, not do I have the time to look right now. This is the WAY javascript works - if you have some reason to challenge that, please state that reason. Javascript executes from top/down. It absolutely has to be consistent across browsers or lots of pages would break because people rely on javascript executing from top to bottom all the time. Pretty much any language has to offer guaranteed execution order among different parts of code because that is often required to make your logic work. – Disputant

The only place I'm aware of differences in browser behavior from one browser to another is when scripts are inserted dynamically via javascript which this answer specifically excludes and I don't believe the question is asking about. – Disputant

One thing I disagree with in the answer is the phrasing "run order" as I would prefer "evaluation order" since some code specifies functions or other entities that are invoked at a later time. The load order is specified (at least) in W3Cs HTML 4.01 Specification, Section 18.2.4 Dynamic modification of documents. The execution order of JavaScript lexicon is specified in ECMA-262 5.1 Edition / June 2011. – Immolation

Answer 3

By default, script tags are downloaded and evaluated sequentially as they are encountered in an HTML document.

However if you use the async or defer attributes, the execution happens either after the script finishes downloading (async) or after the page is done loading (defer).

Element

Don't count on the defer attribute stalling execution until after parsing (otherwise it would be a good alternative to the load and ready events). In HTML 4, defer was only a hint that the script didn't create content so the browser could continue loading while executing it. In HTML5, defer means "wait until parsing has finished". HTML5 is not sufficiently well supported that the specified behaviour can be relied upon, perhaps not for some years yet. – Overcompensation

Answer 4

Scripts are run in the order they are evaluated in the html file, just as you would read it from the top down.

However, async and defer can override this for browsers that have those implemented.

Bourgeon