一图看懂 script 标签中 defer 和 async 的区别
浏览器渲染过程中遇到 JS 文件怎么处理？
JavaScript 的加载、解析与执行会 阻塞文档的解析，也就是说，在构建 DOM 时，HTML 解析器若遇到了 JavaScript，那么它会暂停文档的解析，将控制权移交给 JavaScript 引擎，等 JavaScript 引擎运行完毕，浏览器再从中断的地方恢复继续解
析文档。
也就是说，如果你想首屏渲染的越快，就越不应该在首屏就加载 JS 文件，这也是都建议将 script 标签放在 body 标签底部的原因。当然在当下，并不是说 script 标签必须放在底部，因为你可以给 script 标签添加 defer 或者 async 属性。
相同：async 和 defer 都能实现 Script 的 异步加载
不同：执行时机不一样， async 在加载 script 后立刻执行，defer 在 DOM 解析完成后执行
因为 是与 HTML 同时异步加载，所以 script 中需要获取 DOM元素还是要在 DOMContentLoaded 事件回调中获取