The sequence of JavaScript code in the execution of the page load Introduction _ Basics

A method of embedding Javasript in HTML
1. Place the JavaScript code directly between the tag pair <script> and </script>
2. The <script/> Mark src attribute to make the external JS file
3. In the event handler, for example: <p onclick= "alert (' I was JavaScript ' executed by onclick event)" > Click me </p>
4. As the subject of the URL, this URL uses a special javascript: protocol, such as: <a href= "Javascript:alert (' I Am JavaScript by javascript: Protocol execution ')" > click me < /a>
5. Write new JavaScript code using the document.write () method of JavaScript itself
6. Get JavaScript code asynchronously using AJAX, and then execute

The 3rd and 4th methods write JavaScript that needs to be triggered to execute, so the page loads will not execute unless specifically set.

Second, JavaScript in the order of the execution of the page
1. JavaScript code on the page is part of an HTML document, so the order in which JavaScript executes when the page is loaded is the order in which the/> of the markup <script is introduced, <script/> tags inside or through the introduction of SRC outside JS, are executed in the order in which the statements appear, and the execution process is part of the document load.
2. The global variables and functions defined by each script can be invoked by scripts that are executed later.
3. The invocation of the variable must be previously declared, otherwise the obtained variable value is undefined.

Copy Code code as follows:

<script type= "Text/javscrpt" >//<! [cdata[
Alert (TMP); Output undefined
var tmp = 1;
Alert (TMP); Output 1
]]></script>

4. The same script, the function definition can appear after the function call, but if it is in two pieces of code, and the function call in the first paragraph of code, then the report function undefined error.

Copy Code code 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.document.write () writes the output to the location of the script document, after the browser resolves the contents of the Documemt.write (), continues to parse the contents of the document.write () output, and then continues parsing the HTML document.

Copy Code code 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 ("I am" + tmpstr);
document.write (' <\/script> ');
]]></script>
<script type= "Text/javascript" >//<! [cdata[
Alert (3);
]]></script>

The contents of Test.js are:

Copy Code code as follows:

var tmpstr = 1;
alert (TMPSTR);

• The order of pop-up values in Firefox and opera is: 1, 2, I'm 1, 3.
* in IE, the order of pop-up values are: 2, 1, 3, while the browser error: Tmpstr undefined
The reason may be that ie in document.write, did not wait to load the JavaScript code in SRC after the completion of the next line, so that the 2 eject first, and execution to document.write (' document.write "+ TMPSTR) ' When calling Tmpstr, the TMPSTR is not defined to make an error.

To solve this problem, you can use HTML parsing to parse out an HTML tag and then execute the next principle, splitting the code to achieve:

Copy Code code 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 ("I am" + tmpstr);
document.write (' <\/script> ');
]]></script>
<script type= "Text/javascript" >//<! [cdata[
Alert (3);
]]></script>

In this way, ie and other browsers output values are always the order: 1, 2, I am 1, 3.

How to change the order in which JavaScript is executed on the page
1. Use the onload

Copy Code code as follows:

<script type= "Text/javascript" >//<! [cdata[
Window.onload = f;
function f () {alert (1);}
Alert (2);
]]></script>

The order of output values is 2, 1.

It should be noted that if there are multiple winodws.onload, only one of the most effective, the solution is:

Copy Code code as follows:

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

Using Level 2 DOM event types

Copy Code code 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.IE can use the Defer,defer function is to load the code down, do not immediately execute, and so on after the document loaded and then executed, A bit like window.onload, but there is no window.onload such limitations, can be reused, but only in IE effective, so the above example can be modified to

Copy Code code 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 ("I am" + tmpstr);
document.write (' <\/script> ');
]]></script>
<script type= "Text/javascript" >//<! [cdata[
Alert (3);
]]></script>

So IE will not complain, the order of output values become: 1, 3, 2, I am 1

When the HTML parser encounters a script, it must terminate the parsing of the document as usual and wait for the script to execute. In order to solve this problem the HTML4 standard defines the defer. The defer prompts the browser to continue parsing the HTML document and to delay execution of the script. This delay is useful when the script is loaded from an external file, so that the browser does not have to wait for the external file to be fully loaded before continuing, effectively improving performance. IE is the only browser that currently supports the defer attribute, but IE does not implement the Defer property correctly because the deferred script is always deferred until the end of the document, rather than just delaying to the next non-deferred script. This means that the execution order of the deferred scripts in IE is quite confusing and does not define any functions and variables that need to be followed by any subsequent non delay scripts. In IE all defer script execution time should be after the HTML document tree is established, window.onload.

3. Use Ajax.
Because XMLHttpRequest can judge the state of the external document loading, you can change the order in which the code is loaded