详解JS异步加载的三种方式
本文深入解析JavaScript异步加载的三种核心方式：同步加载、异步加载及延迟加载。详细对比了Script DOM Element、onload触发、XHR注入、iframe执行及HTML5新增的async与defer属性等具体实现机制，并探讨了通过模拟下载与执行耗时来优化页面响应的延迟加载策略，旨在帮助开发者根据浏览器兼容性需求选择最优加载方案。
同步加载模式
一：同步加载
这是日常开发中最常见的加载模式。
<script src="http://yourdomain.com/script.js"></script>
<script src="http://yourdomain.com/script.js"></script>同步模式，也被称为阻塞模式，会暂停浏览器的后续处理流程，停止HTML解析，直到当前脚本加载并执行完毕后才继续。因此，默认情况下同步执行是安全的。然而，如果脚本中包含输出document内容、修改DOM结构或进行重定向等操作，会导致页面渲染阻塞。为了尽量减少这种阻塞效应，通常建议将<script>标签放置在<body>标签的末尾处。
异步加载实现方式
二：异步加载
异步加载，即非阻塞加载，允许浏览器在下载和执行JavaScript的同时，继续解析和处理后续页面内容。主要包含以下几种实现方式。
方法一：Script DOM Element（动态创建脚本元素）
(function(){
var scriptEle = document.createElement("script");
scriptEle.type = "text/javasctipt";
scriptEle.async = true;
scriptEle.src = "http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js";
var x = document.getElementsByTagName("head")[0];
x.insertBefore(scriptEle, x.firstChild);
})();
<async>属性是HTML5中新增的异步支持。此方法被称为Script DOM Element 方法。Google Analytics 和 Google+ Badge 都使用了这种异步加载代码
(function(){;
var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
})();需要注意的是，这种加载方式在脚本执行完成前会阻止onload事件的触发。由于许多页面在onload事件中执行额外的渲染工作，这仍可能导致部分页面初始化处理的阻塞。
方法二：在onload事件中异步加载
(function(){
if(window.attachEvent){
window.attachEvent("load", asyncLoad);
}else{
window.addEventListener("load", asyncLoad);
}
var asyncLoad = function(){
var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
}
)();该方法将插入<script>标签的逻辑封装在一个函数中，并将该函数绑定到window的onload事件上执行。这种方式有效解决了阻塞onload事件触发的问题。
注：需区分DOMContentLoaded与load事件。前者在document解析完成后触发，此时DOM元素可用，但图片、视频、音频等资源可能尚未加载完毕，其作用类似于jQuery中的ready事件；而load事件则是在页面所有资源全部加载完毕后触发。
方法三：其他异步加载方法
得益于JavaScript的动态特性，还存在多种异步加载技巧：XHR Injection（XHR注入）、XHR Eval、Script In Iframe、Script defer属性以及document.write(script tag)。
XHR Injection（XHR注入）：通过XMLHttpRequest对象获取JavaScript代码，随后创建一个script元素并将其插入到DOM结构中。在ajax请求成功后，将返回的responseText赋值给script.text属性。
//获取XMLHttpRequest对象，考虑兼容性。
var getXmlHttp = function(){
var obj;
if (window.XMLHttpRequest)
obj = new XMLHttpRequest();
else
obj = new ActiveXObject("Microsoft.XMLHTTP");
return obj;
};
//采用Http请求get方式;open()方法的第三个参数表示采用异步(true)还是同步(false)处理
var xmlHttp = getXmlHttp();
xmlHttp.open("GET", "http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js", true);
xmlHttp.send();
xmlHttp.onreadystatechange = function(){
if (xmlHttp.readyState == 4 && xmlHttp.status == 200){
var script = document.createElement("script");
script.text = xmlHttp.responseText;
document.getElementsByTagName("head")[0].appendChild(script);
}
}
XHR Eval：与XHR Injection对responseText的执行方式不同，直接把responseText放在eval()函数里面执行。
//获取XMLHttpRequest对象，考虑兼容性。
var getXmlHttp = function(){
var obj;
if (window.XMLHttpRequest)
obj = new XMLHttpRequest();
else
obj = new ActiveXObject("Microsoft.XMLHTTP");
return obj;
};
//采用Http请求get方式;open()方法的第三个参数表示采用异步(true)还是同步(false)处理
var xmlHttp = getXmlHttp();
xmlHttp.open("GET", "http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js", true);
xmlHttp.send();
xmlHttp.onreadystatechange = function(){
if (xmlHttp.readyState == 4 && xmlHttp.status == 200){
eval(xmlHttp.responseText);
//alert($);//可以弹出$,表明JS已经加载进来。click事件放在其它出会出问题，应该是还没加载进来
$("#btn1").click(function(){
alert($(this).text());
});
}
} Script In Iframe：在父窗口中插入一个iframe元素，然后在iframe内部执行JS加载操作。
var insertJS = function(){alert(2)};
var iframe = document.createElement("iframe");
document.body.appendChild(iframe);
var doc = iframe.contentWindow.document;//获取iframe中的window要用contentWindow属性。
doc.open();
doc.write("<script>var insertJS = function(){};<\/script><body onload='insertJS()'></body>");
doc.close();GMail Mobile：业内常见做法是将JS内容置于注释中以防止直接执行，在需要时获取script标签内的text内容，去除注释后调用eval()函数执行。
<script type="text/javascript">
/*
var ...
*/
</script>HTML5新属性：async和defer属性
defer属性：早在IE4.0版本中就已出现。defer声明脚本中不会包含document.write调用或DOM修改操作。浏览器会并行下载其他带有defer属性的script文件，而不会阻塞页面的后续处理。注意：所有带有defer属性的脚本必须保证按顺序执行。
<script type="text/javascript" defer></script>async属性：这是HTML5引入的新属性。脚本将在下载完成后尽快执行，其作用与defer类似，但不能保证脚本按顺序执行。它们将在onload事件之前完成执行。
<script type="text/javascript" defer></script>Firefox 3.6、Opera 10.5、IE 9以及最新的Chrome和Safari浏览器均支持async属性。同时使用async和defer属性，可确保IE 4之后的所有IE版本都支持异步加载。
若没有async属性，script标签将立即获取（下载）并执行，期间会阻塞浏览器的后续处理。如果包含async属性，script将被异步下载并执行，同时浏览器继续处理后续内容。
总结：对于支持HTML5的浏览器，实现JS异步加载只需在script元素中添加async属性；为了兼容老版本IE，还需额外添加defer属性。对于不支持HTML5的浏览器（IE可通过defer实现），可采用上述几种方法。其原理大致相同：向DOM中写入script标签，或通过eval函数执行JS代码。你可以将其封装在匿名函数中执行，或在onload事件中执行，也可通过XHR注入实现，或创建iframe元素并在其中执行插入JS代码。
延迟加载策略
三：延迟加载
某些JS代码仅在特定场景下使用，并非页面初始化时就需要。延迟加载旨在解决这一问题。它将JS代码拆分为多个模块，页面初始化时仅加载需要立即执行的JS，其余JS的加载则延迟到首次需要使用的时候。这与图片的延迟加载原理类似。JS的加载分为两个部分：下载和执行。异步加载仅解决了下载问题，但代码在下载完成后会立即执行，执行过程中浏览器处于阻塞状态，无法响应其他需求。
解决思路：为了解决JS延迟加载问题，可以利用异步加载机制将代码缓存起来，但不立即执行，仅在需要时再执行。如何进行缓存？将JS内容作为Image或Object对象加载并缓存，因此不会立即执行，然后在第一次需要时再执行。
1：模拟较长的下载时间：
利用thread使其sleep一段时间后再执行下载操作。
2：模拟较长的JS代码执行时间
var start = Number(new Date());
while(start + 5000 > Number(new Date())){//执行JS}这段代码将使JS执行5秒才完成！
JS延迟加载机制(LazyLoad)：简单来说，就是在浏览器滚动到特定位置时触发相关函数，实现页面元素的加载或某些动作的执行。如何实现浏览器滚动位置的检测？可以通过定时器来实现，通过比较某一时刻页面目标节点位置与浏览器滚动条高度来判断是否需要执行函数。
以上所述是小编给大家介绍的详解JS异步加载的三种方式，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对本站网站的支持！
JS创建数组的两种方式：字面量[]与new Array()的区别
2026-11-05 18:02:28
JavaScript异步发送HTTP请求时怎么优雅地处理错误
2026-11-05 17:10:44
5款主流JS在线运行工具对比：CodePen、JSFiddle与StackBlitz怎么选
2026-11-05 17:04:04
JavaScript入门书籍避坑：这些书不适合初学者
2026-11-05 16:31:15
JS使用Math.round实现保留两位小数的原理与代码
2026-11-05 15:35:55