一图解千愁：
先来试个一句话解释仨，当浏览器碰到 script 脚本的时候：
<script src="外部.js"></script>
没有 defer 或 async，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该 script 标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。
<script async src="外部.js"></script>
有 async，加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。
<script defer src="外部.js"></script>
有 defer，加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但是 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。
总之defer、async都告诉浏览器可以继续处理页面，并在“后台”加载脚本，然后在加载时运行脚本。因此脚本不会阻止DOM构建和页面呈现。不同点是如果一个页面中有多个带有defer修饰符的script标签，它们会按照顺序进行加载并且在DOMContentLoaded之前执行；async修饰符则不会遵循顺序，它什么时候加载完成什么时候执行（有可能在DOMContentLoaded之前，也有可能在DOMContentLoaded之后）。defer一般用在脚本相互依赖性的时候，能保证执行顺序；而async比较适用于完全独立的脚本。然后从实用角度来说呢，首先把所有脚本都丢到 之前是最佳实践，因为对于旧浏览器来说这是唯一的优化选择，此法可保证非脚本的其他一切元素能够以最快的速度得到加载和解析。