深入解析JavaScript在HTML中的加载执行顺序与jQuery ready机制
本文详细解析JavaScript在HTML文档中的加载与执行顺序，涵盖script标签引入顺序、函数声明提升、document.write的动态输出行为以及跨浏览器差异。同时探讨多个$(document).ready()的执行逻辑及同名函数的覆盖规则，提供解决IE浏览器下JS加载时序问题的实用方案。
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执行顺序的解析到此结束，希望能为读者提供参考。
AOS.js 动画不触发怎么办？排查 DOM 加载与移动端兼容问题
2026-11-05 17:02:26
sigma.js 怎么实现节点点击、拖拽与悬停提示交互
2026-11-05 15:03:27
Matter.js 与 PixiJS/Three.js 集成：分离物理计算与渲染
2026-11-05 13:43:48
主流JS弹幕库选型指南：Danmaku.js等库的功能与体积对比
2026-11-05 09:28:19
JavaScript点击事件监听与交互效果实例
2026-11-05 09:10:19