Introduction to the execution sequence of Javascript code During page loading

1. embedded into HTML
1. Place the Javascript code directly between <script> and </script>
2. Create an external js File Based on the src attribute marked by <script/>.
3. Put it in the event handler, for example: <p onclick = "alert ('I am the Javascript executed by The onclick event')"> click me </p>
4. 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>
5. Use the document. write () method of javascript to write new javascript code.
6. 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
1. 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.
2. The global variables and functions defined by each script can be called by the subsequent script.
3. Call the variable, which must have been previously declared; otherwise, the obtained variable value is undefined.
Copy codeThe Code is as follows:
<Script type = "text/javscrpt"> // <! [CDATA [
Alert (tmp); // output undefined
Var tmp = 1;
Alert (tmp); // output 1
//]> </Script>

4. 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.
Copy codeThe Code is as follows:
<Script type = "text/javscrpt"> // <! [CDATA [
Aa (); // browser error
//]> </Script>
<Script type = "text/javscrpt"> // <! [CDATA [
Aa (); // output 1
Function aa () {alert (1 );}
//]> </Script>

5.doc ument. 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.
Copy codeThe Code is as follows:
<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:
Copy codeThe Code is as follows:
Var tmpStr = 1;
Alert (tmpStr );

• The Order of pop-up values in Firefox and Opera is: 1, 2, I am 1, 3
• The pop-up values in IE 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:
Copy codeThe Code is as follows:
<Script type = "text/javascript"> // <! [CDATA [
Document. write ('<script type = "text/javascript" src = "test. js"> <\/script> ');
//]> </Script>
<Script type = "text/javascript"> // <! [CDATA [
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>

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
1. Use onload
Copy codeThe Code is as follows:
<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:
Copy codeThe Code is as follows:
Window. onload = function () {f (); f1 (); f2 ();.....}

Use Level 2 DOM event types
Copy codeThe Code is as follows:
If (document. addEventListener ){
Window. addEventListener ('load', f, false );
Window. addEventListener ('load', f1, false );
...
} Else {
Window. attachEvent ('onload', f );
Window. attachEvent ('onload', f1 );
...
}

2. in IE, you can use defer. defer is used to load the code and not execute it immediately. It will be executed after the document is loaded, a bit similar to window. onload, but no window. the limitations of onload can be reused, but only valid in IE, so the above example can be modified
Copy codeThe Code is as follows:
<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.

When the HTML Parser encounters a script, it must terminate parsing the document as usual and wait for the script to be executed. To solve this problem, the HTML4 standard defines defer. You can use defer to prompt the browser to continue parsing HTML documents and delay script execution. This delay is very useful when the script is loaded from an external file, so that the browser does not have to wait until all the external files are loaded before execution can effectively improve performance. IE is currently the only browser that supports the defer attribute, but IE does not correctly implement the defer attribute, because delayed scripts are always delayed until the end of the document, instead of waiting for the next non-delayed script. This means that the execution order of delayed scripts in IE is quite chaotic, and it is not possible to define any functions and variables that are not followed by delayed scripts. All defer scripts in IE should be executed after the HTML document tree is created, before window. onload.

3. Use Ajax.
Because xmlhttpRequest can determine the loading status of external documents, it can change the code loading sequence.