打个比方：假如你想让四个手下分别去执行四个不同的任务，如果用“同步”的方法，就要先让第一个人去执行任务，这期间你和另外三个手下就呆呆地等，什么也不干，直到第一个人完成任务回来报告后再让第二个人去执行任务，依此类推；而如果用“异步”的方法，就可以把四个手下同时派出去执行任务，然后自己就可以去喝酒唱歌泡妞了，手下完成任务后只需要用手机向你汇报结果即可。
关于JavaScript脚本加载的问题，相信大家碰到很多。主要在几个点——1>同步脚本和异步脚本带来的文件加载、文件依赖及执行顺序问题
2>同步脚本和异步脚本带来的性能优化问题
深入理解脚本加载相关的方方面面问题，不仅利于解决实际问题，更加利于对性能优化的把握并执行。
先看随便一个script标签代码——
复制代码代码如下:
<script src="js/myApp.js"></script>
如果放在<head>上面，会阻塞所有页面渲染工作，使得用户在脚本加载完毕并执行完毕之前一直处于“白屏死机”状态。而<body>末尾的打脚本只会让用户看到毫无生命力的静态页面，原本应该进行客户端渲染的地方却散布着不起作用的控件和空空如也的方框。拿一个测试用例——
代码如下:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>异步加载script</title>
<script src="js/test.js"></script>
</head>
<body>
<div>我是内容</div>
<img src="img/test.jpg">
</body>
</html>
其中,test.js中的内容——
代码如下:
alert('我是head里面的脚本代码，执行这里的js之后，才开始进行body的内容渲染!')
我们会看到,alert是一个暂停点，此时，页面是空白的。但是要注意，此时整个页面已经加载完毕，如果body中包含某些src属性的标签(如上面的img标签)，此时浏览器已经开始加载相关内容了。总之要注意——js引擎和渲染引擎的工作时机是互斥的（一些书上叫它为UI线程）。
因此,我们需要——那些负责让页面更好看、更好用的脚本应该立即加载，而那些可以待会儿再加载的脚本稍后再加载。
一般的script标签（不带async等属性）加载时会阻塞浏览器，也就是说，浏览器在下载或执行该js代码块时，后面的标签不会被解析，例如在head中添加一个script，但这个script下载时网络不稳定，很长时间没有下载完成对应的js文件，那么浏览器此时一直等待这个js文件下载，此时页面不会被渲染，用户看到的就是白屏（网页文件已下载好，但浏览器不解析）而使用async属性，浏览器会下载js文件，同时继续对后面的内容进行渲染
通常如果js不需要改变DOM结构时可以使用async进行异步加载（比如一些统计代码可以异步加载，因为此代码与页面执行逻辑无关，不会改变DOM结构）
