JavaScript 脚本延迟加载方式

1. defer属性

用来通知浏览器该脚本将在文档完成解析后，触发 DOMContentLoaded 事件前执行。 有 defer 属性的脚本会阻止 DOMContentLoaded 事件，直到脚本被加载并且解析完成。

defer 属性必须配合 src 属性使用

defer 属性对于模块脚本没有作用

2. async 属性

对于普通脚本，如果存在 async 属性，那么普通脚本会被并行请求，并尽快解析和执行。

对于模块脚本，如果存在 async 属性，那么脚本及其所有依赖都会在延缓队列中执行，因此它们会被并行请求，并尽快解析和执行。

该属性能够消除解析阻塞的 Javascript。

解析阻塞的 Javascript 会导致浏览器必须加载并且执行脚本，之后才能继续解析。

3. 动态创建script 标签

let script = document.createElement("script")
script.src = 'xxx'
document.body.appendChild(script)

4. setTimeout 延迟加载

5. 放在文档底部