首页 / JAVASCRIPT / js异步加载的三种解决方案

js异步加载的三种解决方案

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了js异步加载的三种解决方案，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1796字，纯文字阅读大概需要3分钟。

内容图文

默认情况javascript是同步加载的，也就是javascript的加载时阻塞的，后面的元素要等待javascript加载完毕后才能进行再加载，对于一些意义不是很大的javascript，如果放在页头会导致加载很慢的话，是会严重影响用户体验的。

(1) defer，只支持IE
defer属性的定义和用法（我摘自w3school网站）
defer 属性规定是否对脚本执行进行延迟，直到页面加载为止。
有的 javascript 脚本 document.write 方法来创建当前的文档内容，其他脚本就不一定是了。

如果您的脚本不会改变文档的内容，可将 defer 属性加入到 <script> 标签中，以便加快处理文档的速度。因为浏览器知道它将能够安全地读取文档的剩余部分而不用执行脚本，它将推迟对脚本的解释，直到文档已经显示给用户为止。
示例：
代码如下:

<script type="text/javascript" defer="defer"> 
alert(document.getElementById("p1").firstChild.nodeValue); 
</script> 
 
(2) async： 
async的定义和用法(是HTML5的属性) 
async 属性规定一旦脚本可用，则会异步执行。 
示例： 
 代码如下:

<script type="text/javascript" src="demo_async.js" async="async"></script> 
 
注释：async 属性仅适用于外部脚本（只有在使用 src 属性时）。 
注释：有多种执行外部脚本的方法： 
?如果 async="async"：脚本相对于页面的其余部分异步地执行（当页面继续进行解析时，脚本将被执行） 
?如果不使用 async 且 defer="defer"：脚本将在页面完成解析时执行 
?如果既不使用 async 也不使用 defer：在浏览器继续解析页面之前，立即读取并执行脚本 

(3) 创建script，插入到DOM中，加载完毕后callBack，见代码： 
 代码如下:

function loadScript(url, callback){ 
var script = document.createElement_x("script") 
script.type = "text/javascript"; 
if (script.readyState){ //IE 
script.onreadystatechange = function(){ 
if (script.readyState == "loaded" || 
script.readyState == "complete"){ 
script.onreadystatechange = null; 
callback(); 
} 
}; 
} else { //Others: Firefox, Safari, Chrome, and Opera 
script.onload = function(){ 
callback(); 
}; 
} 
script.src = url; 
document.body.appendChild(script); 
}

内容总结

以上是互联网集市为您收集整理的js异步加载的三种解决方案全部内容，希望文章能够帮你解决js异步加载的三种解决方案所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/367176.html

来源：【匿名】