Make Sure A Javascript Script Is First To Run?

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?

Solution 1:

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.

Solution 2:

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.

Solution 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).

Solution 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.