script标签中的async与defer属性

为什么要用async和defer（作用）

同步在javaScript里面是一个很重要的概念，因为当浏览器记载HTML的时候，一旦遇到了script标签，就会停下来先把script标签里面的内容给执行掉。

如果script标签里面有外部文件，那就必须等待下载和执行的步骤，这样浏览器才会继续往下加载；如果外部文件刚好是在一个网络情况比较差的服务器上，这样整个网页的加载都会受到很大的影响，这就是同步带来的阻塞弊端。async和defer都是可以解决整个问题的。

async

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

如果我们使用async，那就是异步执行：浏览器在加载页面的时候，如果遇到了async属性，浏览器就会立即进行下载，与此同时继续加载页面，这样就解决了阻塞的问题。

虽然没有阻塞的情况，但是async下的脚本具体什么时候执行就说不定了，有时页面还没加载完就执行了，也有可能页面加载后才会执行。因为这种不确定性，因为脚本是需要修改DOM的，那么DOM 还没有加载好，脚本就进行操作，会造成错误。因此async比较适合一些第三方的脚本。

defer

<script type="text/javascript" src="example.js" defer="defer"></script>

浏览器在加载页面的时候，如果遇到了defer属性，浏览器就会立即进行下载，与此同时继续加载页面但是不管脚本是否下载完了，都会等到浏览器解析完HTML以后再执行脚本。因此defer比较适合与DOM有关联的脚本

注：不管是async还是defer，两者都只适用于外部脚本，而且还要注意兼容性的问题

        如果浏览器不能识别这两个属性，那还是把script内容放在页面底部比较好

总结:都用于外部脚本

        async异步下载完立即执行

        defer异步下载完等dom加载完成后执行

        兼容性问题script标签放最底下