script 标签中的 async 和 defer 属性

<script>

      浏览器在 html解析过程中，遇到scripe，会阻塞html页面渲染，发送页面请求，过去js脚本代码，然后交给js引擎去执行代码，当执行完毕后，浏览器会继续解析html。可以看出，script阻塞了HTML解析，如果此时js脚本内容收到网络波动，迟迟未得到相应，或者JS解析时间过长，会导致页面白屏。

图解：

 <script async>

      浏览器解析HTML时，当遇到有async属性的script标签，此时异步请求JS脚本内容，不会阻塞HTML解析。当请求完成之后，如果此时HTML还未解析完，浏览器会暂停解析，先执行js代码，执行完毕后再解析HTML，当请求完成之后，HTLM已经解析完成完成，那就直接执行JS代码即可。
应用场景：脚本不关心页面中DOM元素。

图解：

 <script defer>

     当遇到有defer>属性的script标签，不会阻塞浏览器解析，异步执行请求脚本内容，请求完成后，如果页面还没渲染完成，也不会阻塞页面渲染，会继续HTML渲染，指导HTML渲染完成，再去执行JS脚本内容。
应用场景：脚本代码依赖于页面DOM,或者被其他脚本依赖。（掘金源码）

图解：

图片原文地址：async vs defer attributes - Growing with the Web