JavaScript Load Execution order

The main content of this article

A. Script tag execution order in different locations

Ii. the difference between Document.ready and window.onload

A. Script tag execution order in different locations

The entire loading process starts with parsing the header, such as HTML encoding format, META tag, and so on. When the browser loads the html file and resolves to

For example, write $ (' #AD ') directly in the script tag of head. CSS ("display", "none"); the head is parsed and executed. Elements with an ID of ad will not be displayed on the page.

Head and head introduced script scripts are first loaded and executed, and elements in the body are executed when the page is loaded into his position. And OnLoad is the last to execute.

If you put the DOM operation in the so it's best to put <script> before </body>.

Ii. the difference between Document.ready and window.onload

In jquery, we can see two ways of writing: $ (function () {}) and $ (document). Ready (function () {}). Both of these methods have the same effect, which is to execute a function after the DOM document tree has been loaded (note that the document tree inside does not load all of the files).

Instead, Window.onload executes a function after the DOM document tree has been loaded and all files have been loaded. That is, $ (document). Ready is executed before window.onload.

jquery inside $ (document). The internal structure of the READY function:

Document.ready =function(callback) {///Compatible Ff,google            if(Document.addeventlistener) {Document.addeventlistener (' Domcontentloaded ',function() {Document.removeeventlistener (' domcontentloaded ', Arguments.callee,false);                Callback (); }, false)            }             //compatible with IE            Else if(document.attachevent) {document.attachevent (' onReadyStateChange ',function () {                      if(Document.readystate = = "complete") {document.detachevent ("onReadyStateChange", Arguments.callee);                       Callback (); }                })            }            Else if(Document.lastchild = =document.body) {callback (); }        }

JavaScript Load Execution order