script标签中的async和defer

async VS defer

1. <script>

浏览器在解析HTML的时候，如果遇到一个没有任何属性的script标签，就会暂停解析HTML，开始执行这个script标签中的脚本。当代码执行完毕，浏览器会继续解析HTML。

script阻塞了浏览器对HTML的解析，如果获取脚本的网络请求迟迟得不到相应，或者JS脚本执行时间过长，都会导致白屏，用户看不到页面内容

2. <script async>  

当浏览器遇到带有 async 属性的 script 时，请求该脚本的网络请求是异步的，不会阻塞浏览器解析 HTML，一旦网络请求回来之后，如果此时 HTML 还没有解析完，浏览器会暂停解析，先让 JS 引擎执行代码，执行完毕后再进行解析。如果在 JS 脚本请求回来之前，HTML 已经解析完毕了，那就立即执行 JS 代码

async 是不可控的，因为执行时间不确定，如果在异步 JS 脚本中获取某个 DOM 元素，有可能获取到也有可能获取不到。

如果存在多个 async ，它们之间的执行顺序也不确定，完全依赖于网络传输结果，谁先到执行谁。

3. <script defer>

当浏览器遇到带有 defer 属性的 script 时，获取该脚本的网络请求也是异步的，不会阻塞浏览器解析 HTML，一旦网络请求回来之后，如果此时 HTML 还没有解析完，浏览器不会暂停解析并执行 JS 代码，而是等待 HTML 解析完毕再执行 JS 代码

如果存在多个 defer script 标签，浏览器（IE9及以下除外）会保证它们按照在 HTML 中出现的顺序执行，不会破坏 JS 脚本之间的依赖关系。