作者 JavaScript引用外部脚本的时候，可以使用两个属性 async和defer , 两个选项都很有用。 async表示异步方式，不阻塞页面的其他的部分。 defer表示延迟执行。这里用仪式示例说明一下。
准备两个js脚本文件
文件1： file1: js.js
alert('js.js')
文件2： file2: js2.js
alert('js2.js')
准备一个 html文件
文件3： file1: index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width">
<script src="/js.js" ></script>
</head>
<body>
liuhaolin.com
</body>
</html>
如果执行这个页面，弹出js.js,这个时候页面是空白的，点击确定后页面显示内容。
修改 <script src="/js.js" ></script> 为 <script async src="/js.js" ></script>
这个时候，首先是显示内容，然后弹出对话框。
如果使用的是 defer ,同样也是先显示内容。 从显示的顺序看，两者差不多。其实这是执行的晚了一会。其实他们的运行方式完全不同。
async 不会造成阻塞
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width">
<script async src="/js.js" ></script>
<script src="/js2.js" ></script>
</head>
<body>
liuhaolin.com
</body>
</html>
可以看到首先是弹出了 js2.js,然后弹出 js.js,后输出了内容。js脚本的文件是没有被阻塞的。
不用async 导致的阻塞
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width">
<script src="/js.js" ></script>
<script src="/js2.js" ></script>
</head>
<body>
liuhaolin.com
</body>
</html>
async 和 defer
async -- 异步的加载，加载后执行，加载结束前不影响页面的其他部分。
defer -- 页面显示后执行