defer 和 async 都英语控制脚本的加载和执行，都是一部加载外部的 JS 脚本文件，两者都不会阻塞 HTML 的解析。
绿色代表 HTML 解析，蓝色代表 JS 脚本网络加载时间，红色是 JS 脚本执行时间。
defer 会等 DOM 加载完之后才执行，async 则是脚本一直加载完就立即执行。
<script src="lib.js" defer></script>
<script src="main.js" defer></script>
defer 使用场景主要是确保 DOM 完全加载和多个脚本相互依赖的情况，比如确保上述代码中两个脚本按顺序加载。虽然 js 本来就是从上往下执行，但加上 defer 更严谨，可以阻止页面渲染的阻塞、网络延迟、加载时间不同而导致执行顺序的改变。
async 的使用场景，比如想广告内容，不需要等整个页面加载好就跳出来，还有线上考试，网速慢导致试卷还没加载好，但计时器可能就已经开始计时了。