JS中的async与defer的作用和使用场景（简洁易懂）

作用

（PS：文中的图是借鉴网络上的）
正常情况下，浏览器在加载指定脚本的时候，会暂停解析HTML源文件，然后去发送请求下载外部的script脚本，在下载完成并执行之后才会继续解析DOM。

那么通常情况下，为了解决加载脚本时阻塞页面渲染，导致出现空白页的现象，就用到了async/defer。

async表示异步，它会使浏览器异步下载脚本后立即同步执行，即：脚本下载是异步行为，并不影响DOM的加载，一旦下载完成暂停DOM的加载后执行脚本，再加载DOM

defer与async也是异步下载，不同的是script脚本下载完成后并不立即执行，而是等DOM解析完成之后执行脚本，相比async的粗暴，defer明显更加实用。

使用场景

一般情况下，如果有多个脚本，需要优先加载的脚本可以加上async，其他的则用defer
若无先后要求，更推荐用defer

<script src="https://www.google.com/recaptcha/api.js" async></script>
<script src="demo.js" defer></script>