JavaScript异步加载的三种解决方案：defer、async与动态创建

JavaScript同步加载的阻塞问题

默认情况下，JavaScript脚本以同步方式加载，这意味着脚本加载过程是阻塞的。后续页面元素的渲染必须等待JavaScript加载完成后才能进行。对于那些对页面内容贡献不大的脚本，若放置在页面头部，会导致加载缓慢，严重影响用户体验。

方案一：使用defer属性延迟执行

defer属性的定义和用法（我摘自w3school网站）

defer 属性规定是否对脚本执行进行延迟，直到页面加载为止。

有的 javascript 脚本 document.write 方法来创建当前的文档内容，其他脚本就不一定是了。

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

示例：

 
<script type="text/javascript" defer="defer">
alert(document.getElementById("p1").firstChild.nodeValue);
</script>

方案二：使用async属性异步执行

async的定义和用法(是HTML5的属性)

async 属性规定一旦脚本可用，则会异步执行。

示例：

 
<script type="text/javascript" src="demo_async.js" async="async"></script>

注释：async 属性仅适用于外部脚本（只有在使用 src 属性时）。

注释：有多种执行外部脚本的方法：

•如果 async="async"：脚本相对于页面的其余部分异步地执行（当页面继续进行解析时，脚本将被执行）

•如果不使用 async 且 defer="defer"：脚本将在页面完成解析时执行

•如果既不使用 async 也不使用 defer：在浏览器继续解析页面之前，立即读取并执行脚本

方案三：动态创建Script标签实现回调

，加载完毕后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);
}