Javascript execution order when the page loads (reprint)

Original: http: //dancewithnet.com/2007/03/22/order-of-execution-of-javascript-on-web/

A, embedded in HTML Method Javasript

Javascript code in the tag directly to the <script> and </ script> between
The <script /> tag src attribute the development of external js file
In the event handler, such as:<p onclick="alert('我是由onclick事件执行的Javascript')">点击我</p>
As the main URL, this URL using special Javascript: protocols, such as:<a href="javascript:alert('我是由javascript:协议执行的javascript')">点击我</a>
Itself using javascript document.write () method writes a new javascript code
Use Ajax asynchronous get the javascript code and then execute

Javascript A third and fourth method of writing required to be triggered to perform, so unless set otherwise not be executed when the page loads.

Second, the order of execution of Javascript in the page

Javascript code on the page is part of the HTML document, so that the order is executed when Javascript page loading is the order they appear introduced tag <script />, the <script /> tag inside or outside by JS src introduced are in accordance the order in which statements arising from the implementation, and the implementation process is part of the document loaded.
Global variables and functions defined in each script, the script can be called to perform later.

Call variable must already stated otherwise, the variable value obtained is undefined.

<script type="text/javscrpt">//<![CDATA[
alert(tmp);  //输出 undefined
var tmp = 1;
alert(tmp);  //输出 1
//]]></script>

With a script, the function definition can appear after the function call, but if you are in two pieces of code and function calls in the first paragraph of the code, the function undefined error will be reported.

<script type="text/javscrpt">//<![CDATA[
aa();            //浏览器报错
//]]></script>
<script type="text/javscrpt">//<![CDATA[
aa();            //输出 1 
function aa(){alert(1);}
//]]></script>

After the document.write () will write the output to the location where the script file, the browser parses finished documemt.write (where the content of the document), continue to resolve document.write () output of content, and then continue parsing HTML documents.
```
<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("我是" + tmpStr);');
    document.write('<\/script>');
    //]]></script>
  <script type="text/javascript">//<![CDATA[
    alert(3);
    //]]></script>
```
test.js contents are:
```
was tmpStr = 1 ; 
alert (tmpStr);
```
- Pop values in the order of Firefox and Opera are: 1,2, I 1,3
- Sequence in IE pop values are: 2,1,3, while the browser error: Undefined tmpStr
The reason may be in the IE document.write, did not wait after loading the SRC Javascript code is completed before the next line, resulting in 2 to pop up, and execution to document.write ( 'document.write ( "I am" + tmpStr) ') when calling tmpStr, tmpStr not defined, so that error.

To solve this problem, you can use HTML parsing is done parsing an HTML tag, and then execute the next principle, the code split is implemented:
```
<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("我是" + tmpStr);');
    document.write('<\/script>');
    //]]></script>
  <script type="text/javascript">//<![CDATA[
    alert(3);
    //]]></script>
```
IE and other sequences such browsers have the output value are: the 1,2, I 1,3.

Third, how to change the order of execution of Javascript in the page

1. Use onload
```
<script type="text/javascript">//<![CDATA[
window.onload = f;
function f(){alert(1);}
alert(2);
//]]></script>
```
  Output value sequence is 2,1.
  
  Note that, if there are multiple winodws.onload then, only the most into force a solution to this would be to:
```
window.onload = function(){f();f1();f2();.....}
```
  Level 2 DOM using the event type
```
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 be utilized defer, defer action down loading code is not performed immediately, and other documents then performed after completion of the loading, window.onload somewhat similar, but not as limitations window.onload, can be reused, but only in IE effective, 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("我是" + tmpStr);');
document.write('<\/script>');
//]]></script>
<script type="text/javascript">//<![CDATA[
alert(3);
//]]></script>
```
  This IE is not given, the sequence of output values becomes: 3,2, I 1
  When the HTML parser encounters a script, it must terminate parsing of the document as usual and wait for script execution. To solve this problem HTML4 standard defines defer. By defer to prompt the browser can continue parsing HTML documents, and 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 after all external files loaded before continuing execution, can effectively improve performance. IE is the only browser supported defer property, but IE does not correctly implement the defer attribute, because the script is always delayed delayed until the end of the document, rather than just delay the script to the next non delayed. This means that the delay in the execution order of IE script quite confusing, and can not define any non-delay behind the script and the functions and variables required. In IE script execution time should defer all HTML document tree after all established before window.onload.
3. The use of Ajax.
  Because xmlhttpRequest can determine the state of the external document is loaded, it is possible to change the order of loading the code.

Reproduced in: https: //www.cnblogs.com/JoannaQ/archive/2012/09/18/2690090.html