JS加载执行顺序详解：document.write、jQuery ready及同名函数处理

jQuery ready执行机制

关于jQuery中$(document).ready()的执行时机：

该方法在DOM结构绘制完成后立即执行，无需等待图片等资源加载完毕。相比之下，window.onload需等待所有元素加载完成。

若.ready()之前存在原生JavaScript代码，其执行优先级如何判定？

浏览器会优先执行.ready()之前的原生JavaScript代码，随后再触发.ready()中的回调函数。

多个$(document).ready()并非严格按书写顺序执行，其实际行为与嵌套层级存在关联。

JavaScript加载执行顺序详解

-------------------JavaScript加载执行顺序-----------------------

1. 加载顺序：取决于<script />标签在HTML文档中的出现顺序。

JavaScript代码作为HTML文档的一部分，其执行顺序严格遵循<script />标签的声明顺序。无论是内联脚本还是通过src引入的外部JS文件，均按语句出现顺序执行，且属于文档解析过程的一部分。


<!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('3-最后执行');"> 
<script>
  alert("2-接着执行"); 
</script> 
</body> 
</html>

2. 每个脚本中定义的全局变量和函数，均可被后续执行的脚本调用。

变量调用必须确保其已在前面声明，否则获取的值将为undefined。


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

3. 在同一段脚本中，函数定义可位于调用语句之后（因存在函数声明提升）；但若函数定义与调用分属两段代码，且调用在前，则会报错提示函数未定义。


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

4. document.write()会将输出内容直接写入当前脚本所在的文档位置。浏览器在解析完document.write()所在的内容后，会继续解析其输出的内容，随后再恢复对HTML文档的解析。


<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的内容是： 
var tmpStr = 1;  
alert(tmpStr);

在Firefox和Opera浏览器中，上述操作的弹出值顺序为：1、2、我是1、3。

在IE浏览器中，弹出值顺序为：2、1、3，同时浏览器报错：tmpStr未定义。

原因可能是IE在遇到document.write时，并未等待src引用的JS代码加载完毕便执行下一行，导致2先弹出。

当执行到document.write('document.write("我是" + tmpStr)')调用tmpStr时，由于tmpStr尚未定义，从而引发错误。

解决此问题可利用HTML解析机制：解析完一个HTML标签后再执行下一个。具体做法是将代码拆分实现：


<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及其他浏览器的输出顺序均保持一致：1、2、我是1、3。

document.write与浏览器兼容性问题

总结：在IE浏览器环境中，若通过Document.Write方法引用JS文件，可能出现JS文件尚未加载完毕即被调用的情况。建议将引用的JS文件置于独立的script块中，以确保JS文件完全加载后再执行后续的Document.Write内容。 5、同名ＪＳ函数执行顺序


<!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('First aa')
  }  
</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('Second aa');
  }
  function aa(s) {
    alert('Last aa');
  }
</script>
</html>

同名函数执行顺序

5、同名JS函数执行顺序

点击“botton”执行结果： Last aa。在JS中出现同名函数后，调用该函数时，总是执行页面中最后一个加载的函数定义。

以上关于JavaScript在HTML中的加载执行顺序及多个jQuery ready执行顺序的解析到此结束，希望能为读者提供参考。

深入解析JavaScript在HTML中的加载执行顺序与jQuery ready机制

jQuery ready执行机制

JavaScript加载执行顺序详解

document.write与浏览器兼容性问题

同名函数执行顺序

实用工具推荐