search

Home  >  Article  >  Web Front-end  >  A brief discussion on the loading and execution order of js in html and the execution order of multiple jquery ready

A brief discussion on the loading and execution order of js in html and the execution order of multiple jquery ready

高洛峰
高洛峰Original
2016-12-05 10:38:071281browse

jQuery $(document).ready() execution sequence:

Execute .ready() after all DOM elements of the page have been loaded. $(document).ready() is executed after the DOM structure is drawn, without waiting until it is loaded.

If there is javascript code before .ready() is executed, how will javascript be executed?

The answer is to execute the javascript code before .ready() first, and then execute .ready().

The execution order of multiple $(document).ready() is not a simple sequential execution, it also has a certain relationship with the nesting level.

--------------------js loading execution sequence--------------------------

1. Loading order: the order in which the introduction tags b97cb247ad0c0836255176e480ef452b appear.

The Javascript code on the page is part of the HTML document, so the order in which Javascript is executed when the page is loaded is the order in which the introduction tags b97cb247ad0c0836255176e480ef452b The order in which they appear, external JS inside the b97cb247ad0c0836255176e480ef452b tag or imported through src are executed in the order in which their statements appear, and the execution process is part of the document loading. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>无标题 3</title> 
<script>
  alert("1-最先执行"); 
</script> 
</head> 
<body onload="alert(&#39;3-最后执行&#39;);"> 
<script>
  alert("2-接着执行"); 
</script> 
</body> 
</html>

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

The call to a variable must have been declared previously, otherwise the obtained variable value will be undefined. 

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

3. In the same script, the function definition can appear after the function call. However, if it is in two pieces of code and the function call is in the first piece of code, an undefined function error will be reported. 

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

4.document.write() will write the output to the location of the script document. After the browser parses the content of the document where documemt.write() is located, it will continue to parse the content output by document.write() ,
Then continue to parse the HTML document. 

<script type="text/javascript">//<![CDATA[ 
 document.write(&#39;<script type="text/javascript" src="test.js"><//script>&#39;);
 document.write(&#39;<script type="text/javascript">&#39;); 
 document.write(&#39;alert(2);&#39;) 
 document.write(&#39;alert("我是" + tmpStr);&#39;); 
 document.write(&#39;<//script>&#39;);  //]]>
</script>
 
<script type="text/javascript">//<![CDATA[ 
 alert(3);  //]]>
</script> test.js的内容是：
var tmpStr = 1; 
alert(tmpStr);

The order of the pop-up values ​​in Firefox and Opera is: 1, 2, I am 1, 3

The order of the pop-up values ​​in IE is: 2, 1, 3, and the browser reports an error: tmpStr is undefined

The reason may be that when IE is document.write, it does not wait for the Javascript code in SRC to be loaded before executing the next line, so 2 pops up first,

and executes to document.write('document. When write("I am" + tmpStr)') calls tmpStr, tmpStr is not defined and an error is reported.

To solve this problem, you can use the principle of HTML parsing to parse one HTML tag and then execute the next one, and split the code to achieve this: 

<script type="text/javascript">//<![CDATA[
  document.write(&#39;<script type="text/javascript" src="test.js"><//script>&#39;);
    //]]>
</script>
<script type="text/javascript">//<![CDATA[ 
  document.write(&#39;<script type="text/javascript">&#39;); 
  document.write(&#39;alert(2);&#39;)
  document.write(&#39;alert("我是" + tmpStr);&#39;); 
  document.write(&#39;<//script>&#39;); 
  //]]>
</script>
  
 <script type="text/javascript">//<![CDATA[ 
  alert(3); 
  //]]>
</script>

In this way, the order of output values ​​​​under IE and other browsers is the same It’s the same: 1, 2, I’m 1, 3

Summary: Under IE, when using the Document.Write method to reference a js file, the js file will be called directly before it is loaded, so it is recommended that the referenced JS file be Put it in a separate script block. To ensure that the referenced js file is fully loaded, continue to execute the following Document.Write content

5. JS function execution sequence with the same name 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript">
 
  function aa() {
    alert(&#39;First aa&#39;)
  } 
</script> 
  <title></title>
</head>
<body>
  <form id="form1" runat="server">
 
<br />
<input id="Button1" type="button" value="button" onclick="aa();"/>
  </form>
</body>
<script type="text/javascript">
  function aa(s) {
    alert(&#39;Second aa&#39;);
  }
  function aa(s) {
    alert(&#39;Last aa&#39;);
  }
</script>
</html>

Click "botton" execution result: Ｌast aa

appears in js After the function with the same name, after you call the js function in the web page, the last loaded function in the page will always be called.


Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Detailed explanation of js initialization verification exampleNext article：Detailed explanation of js initialization verification example

Related articles

See more