本文详细解析JavaScript异步加载的四种常见方案：jQuery的$(document).ready、HTML5的async属性、defer属性以及动态创建script标签。通过对比各方案在兼容性、执行顺序及浏览器支持方面的差异，帮助开发者根据实际需求选择最优加载策略。
本文将对JavaScript异步加载的四种主要实现方式进行详细点评与分析。
jQuery ready方案
第一种方案：使用$(document).ready方法。
<!DOCTYPE html>
<html>
<head>
<script src="http://common.cnblogs.com/script/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
alert("加载完成！");
});
</script>
</head>
<body>
<img src="http://images.cnitblog.com/i/121863/201405/222202573569862.jpg" />
</body>
</html>
对该方案的点评如下：
第一，该方法依赖于jQuery库的引用。
第二，其优势在于兼容所有主流浏览器。
HTML5 async属性方案
第二种方案：在<script>标签中使用async="async"属性。
关于async属性的定义与用法说明：它是HTML5标准中新增的属性。
async属性的作用是规定脚本一旦加载完成，即可异步执行，无需等待后续文档解析。
具体示例代码如下：
<script type="text/javascript" src="xxxxxxx.js" async="async"></script>
对该方案的点评如下：
第一，这是HTML5新增属性，Chrome、Firefox及IE9及以上版本均提供支持（IE6至IE8不支持）。需要注意的是，此方法无法保证多个脚本的执行顺序。
第二，async属性仅适用于外部脚本文件，即必须同时使用src属性指定脚本路径。
HTML5 defer属性方案
第三种方案：在<script>标签中使用defer="defer"属性。
defer属性的作用是规定脚本执行将被延迟，直到整个页面加载完毕后才执行。
部分JavaScript脚本可能通过document.write方法动态生成当前文档内容，而其他脚本则未必如此。
若您的脚本不涉及修改文档内容，建议将defer属性加入<script>标签中，以提升文档处理速度。因为浏览器知晓无需执行脚本即可安全读取剩余文档，故会推迟脚本解析，直至文档完全呈现给用户。
具体示例代码如下：
<script type="text/javascript" defer="defer">
alert(document.getElementById("p1").firstChild.nodeValue);
</script>
对该方案的点评如下：该方案兼容所有浏览器，且能确保所有标记为defer的脚本严格按照代码顺序执行。
动态创建script标签方案
第四种方案：通过动态创建<script>标签实现异步加载。
具体示例代码如下：
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
(function(){
var s = document.createElement('script');
s.type = 'text/javascript';
s.src = "http://code.jquery.com/jquery-1.7.2.min.js";
var tmp = document.getElementsByTagName('script')[0];
tmp.parentNode.insertBefore(s, tmp);
})();
</script>
</head>
<body>
<img src="http://images.cnitblog.com/i/121863/201405/222202573569862.jpg" />
</body>
</html>
对该方案的点评如下：该方案兼容所有浏览器。
以上是对JavaScript异步加载四种方式的区分介绍，希望能为学习JS异步加载的读者提供帮助。