On the load execution sequence of JS in HTML, multiple jquery ready execution sequence _javascript tips

JQuery $ (document). Ready () Order of execution:

Executes when the page DOM element is fully loaded. Ready (). $ (document). Ready () is executed after the DOM structure has been drawn and does not have to wait until the load has finished.

If JavaScript code exists before. Ready (), how does JavaScript execute?

The answer is to execute the JavaScript code before. Ready (), and then execute. Ready ().

Multiple $ (document). The order of execution of the Ready () is not a simple sequential execution, and it has a certain relationship with the nesting level.

--------------------JS load Execution order-----------------------

1. Loading order: Introduce the order of <script/>,

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.

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> 
 
 

2. The global variables and functions defined by each script can be invoked by scripts that are executed later.

The call to the variable must be previously declared, otherwise the variable value obtained is undefined.

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

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

<script type= "Text/javscrpt" >//<! [cdata[
 AA ();      Browser error//]]>
</script>
<script type= "Text/javscrpt" >//<![ cdata[
 AA ();  Output 1 
 function aa ()
 {
  alert (1);
 } ]]>
</script>

4.document.write () writes the output to the location of the script document, and after the browser resolves documemt.write () the contents of the document, it continues to parse the contents of the document.write () output.
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 ("I am" + tmpstr);  
 document.write (' <//script> ');  ]]>
</script> 

<script type= "Text/javascript" >//<![ cdata[  
 alert (3);
the contents of]]> </script> test.js are: 
var tmpstr = 1;  

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 the document.write, did not wait to load the JavaScript code in SRC after the completion of the next line, so that caused 2 to eject first,

and execution to document.write (' document.write ("I am" + tmpstr) ') calls Tmpstr, TMPSTR is not defined, and thus 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 ("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

Summary:ie, using the document.write method to refer to the JS file, JS file will appear without loading on the direct call of the situation, it is recommended to refer to the JS file alone in a script block. To ensure that the referenced JS file is fully loaded, and then continue to perform the following document.write content

5, the same name JS function execution Order

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> 
 
 

Click on "Botton" execution result: last AA

In JS, after the same name function, you call in the Web page to change the JS function, always call the last load on the page function.

The above article discusses JS in the HTML load execution order, several jquery ready execution order is small series to share to everybody's content, hoped can give everybody a reference, also hoped that everybody supports the cloud habitat community.