Execution sequence of javascript when loading webpage pages

1. embedded into HTML

Directly in JavascriptCodeBetween <SCRIPT> and </SCRIPT>
Use the src attribute marked by <script/> to create an external JS file.
Put in Event ProcessingProgramFor example, <p onclick = "alert ('I am the Javascript executed by The onclick event')"> click me </P>
As the subject of the URL, this URL uses special javascript: Protocol, for example: <a href = "javascript: Alert ('I am javascript: The javascript executed by the Protocol ') "> click me </a>
Use the document. Write () method of JavaScript to write new JavaScript code.
Use ajax to asynchronously obtain JavaScript code and then execute

Javascript written in 3rd and 4th methods must be triggered before execution. Therefore, the page will not be executed during loading unless otherwise specified.
Ii. execution sequence of JavaScript on the page

The javascript code on the page is part of the HTML document. Therefore, the order in which Javascript is executed during page loading is the order in which the mark <script/> is introduced, <script/> the external JS inside the tag or introduced through SRC is executed in the order in which the statements appear, and the execution process is part of the document loading.
The global variables and functions defined by each script can be called by the subsequent script.
The call of the variable must have been previously declared; otherwise, the obtained variable value is undefined.

<SCRIPT type = "text/javscrpt"> // <! [CDATA [
Alert (TMP );
// Output undefined
VaR TMP = 1;
Alert (TMP );
// Output 1
//]> </SCRIPT>

In the same script, the function definition can appear after the function call, but if it is in two sections of Code respectively, and the function call is in the first section of code, the function is incorrectly defined.

<SCRIPT type = "text/javscrpt"> // <! [CDATA [
AA ();
// Browser error
//]> </SCRIPT>
<SCRIPT type = "text/javscrpt"> // <! [CDATA [
AA ();
// Output 1
Function AA () {alert (1 );}
//]> </SCRIPT>

Document. write () will write the output to the location where the script file is located, and the browser will finish parsing the documemts. after the content of the write () file is located, parse the document. write () Output content, and then continue parsing the HTML document.

<SCRIPT type = "text/JavaScript"> // <! [CDATA [
Document. Write ('<SCRIPT type = "text/JavaScript" src = "test. js"> <\/SCRIPT> ');
Document. Write ('<SCRIPT type = "text/JavaScript"> ');
Document. Write ('alert (2 );')
Document. Write ('alert ("I am" + tmpstr );');
Document. Write ('<\/SCRIPT> ');
//]> </SCRIPT>
<SCRIPT type = "text/JavaScript"> // <! [CDATA [
Alert (3 );
//]> </SCRIPT>

The content of test. JS is:

VaR tmpstr = 1;
Alert (tmpstr );

The pop-up values in Firefox and opera are as follows: 1, 2, I am 1, 3
In ie, the pop-up values are 2, 1, and 3, and the browser reports an error: tmpstr undefined.

The reason may be that IE is in document. during write, the next line is not executed until the JavaScript code in SRC is loaded. Therefore, 2 pops up first and is executed to document. write ('document. write ("I am" + tmpstr) ') When tmpstr is called, tmpstr is not defined and an error is returned.

To solve this problem, we can use HTML parsing to parse an HTML Tag and then execute the next principle to split the Code:

In this way, the order of output values in IE and other browsers is always: 1, 2, I am 1, 3.

3. How to change the execution sequence of JavaScript on the page

Onload

<SCRIPT type = "text/JavaScript"> // <! [CDATA [
Window. onload = F;
Function f () {alert (1 );}
Alert (2 );
//]> </SCRIPT>

The order of output values is 2 and 1.

Note that if there are multiple winodws. onload, only one of them will take effect. The solution is as follows:

Window. onload = function () {f (); F1 (); F2 ();.....}

Use Level 2 DOM event types

If (document. addeventlistener ){
Window. addeventlistener ('load', F, false );
Window. addeventlistener ('load', F1, false );
...
} Else {
Window. attachevent ('onload', F );
Window. attachevent ('onload', F1 );
...
}

In IE, deferdefer can be used to load the code and do not execute it immediately. After the document is loaded, it will be executed again. It is a bit similar to onload, but it does not have the limitations of onload and can be reused, but it is only valid in IE, so the above example can be modified

<SCRIPT type = "text/JavaScript"> // <! [CDATA [
Document. Write ('<SCRIPT type = "text/JavaScript" src = "test. js"> <\/SCRIPT> ');
Document. Write ('<SCRIPT type = "text/JavaScript" Defer = "Defer"> ');
Document. Write ('alert (2 );')
Document. Write ('alert ("I am" + tmpstr );');
Document. Write ('<\/SCRIPT> ');
//]> </SCRIPT>
<SCRIPT type = "text/JavaScript"> // <! [CDATA [
Alert (3 );
//]> </SCRIPT>

In this way, no error is reported for IE, and the order of output values is: 1, 3, 2, and I am 1.
Use Ajax.
Because XMLHttpRequest can determine the loading status of external documents, it can change the code loading sequence.