script 标签中 defer 和 async 的区别

没有 defer 或 async 属性，浏览器会立即加载并执行相应的脚本。也就是说在渲染 script 标签之后的文档之前，不等待后续加载的文档元素，读到就开始加载和执行，此举会阻塞后续文档的加载。

defer

如果 script 标签设置了该属性，则浏览器会异步的下载该文件并且不会影响到后续 DOM 的渲染；

如果有多个设置了 defer 的 script 标签存在，则会按照顺序执行所有的 script；

defer 脚本会在文档渲染完毕后，DOMContentLoaded 事件调用前执行。

async

async 的设置，会使得 script 脚本异步的加载并在允许的情况下执行

async 的执行，并不会按着 script 在页面中的顺序来执行，而是谁先加载完谁执行。