The order in which JavaScript is executed when page pages are loaded

javascript| Load | page | page | execute

A method of embedding Javasript in HTML

1. Place the JavaScript code directly between the tag pair <script> and </script>
2. To make the external JS file by the src attribute of <script/> Mark
3. In an event handler, such as: <p >点击我</p>
4. As the principal of the URL, this URL uses a special javascript: protocol, such as: <a href="javascript:alert('我是由javascript:协议执行的javascript')">点击我</a>
5. Write new JavaScript code using the document.write () method of JavaScript itself
6. Use Ajax to get JavaScript code asynchronously, 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

2. The JavaScript code on the page is part of the 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.
4. The global variables and functions defined by each script can be invoked by scripts that are executed later.
6. The call to the variable must be previously declared, otherwise the variable value obtained is undefined.

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

8. In the same script, a function definition can appear after a function call, but if it is in two pieces of code, and the function call is in the first paragraph, the function is not defined incorrectly.

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

9. 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.

   <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>

   The contents of Test.js are:

   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 is: 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:

   <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>

   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

2. use onload

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

   The order of output values is 2, 1.

   Note that if there are multiple winodws.onload, only the most one is in effect, and the workaround is

     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);}  

4. IE can be used deferdefer role is to load the code down, not immediately executed, and so on after the document loaded and then executed, a bit like the onload, but there is no onload such limitations, can be reused, but only in IE effective, so the above example can be modified to become

   <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>

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

6. Use Ajax.
   Because XMLHttpRequest can judge the state of the external document loading, it is possible to change the order in which the code is loaded.