异步加载技巧：ASYNC提升渲染效率

async脚本加载并非万能提速方案——它虽能避免下载阻塞HTML解析，却可能在下载完成后立即执行，打断DOM构建、引发重排、破坏执行顺序，甚至导致依赖错误；真正高效的选择取决于脚本特性：完全独立无DOM依赖的统计或监控脚本才适合async，而需操作DOM或存在依赖关系的代码应优先使用defer；动态插入脚本默认具备async行为，但需注意设置顺序与CSP限制；最终性能提升的关键不在加载方式，而在于脚本自身的执行效率——若内部逻辑耗时过长，async只会把瓶颈从加载阶段转移到执行阶段，首屏优化必须兼顾“怎么加载”和“怎么运行”。

script 标签加 async 就一定能提升首屏速度？

不一定。加了 async 只是让脚本下载不阻塞 HTML 解析，但执行时机不可控——它一旦下载完就立即执行，可能打断 DOM 构建、触发重排，甚至覆盖还没初始化的全局变量。尤其当多个 async 脚本之间有依赖（比如先加载 jQuery，再加载插件），顺序无法保证，ReferenceError 很常见。

适用场景很明确：独立、无依赖、不操作 DOM 或不修改 window 上关键状态的脚本，比如统计埋点、广告 SDK、错误监控上报。

• ✅ 推荐：
• ❌ 避免：（执行顺序不确定）
• ⚠️ 注意：async 对内联脚本无效，只对带 src 的外部脚本起作用

async 和 defer 到底该选哪个？

核心区别在执行时机：async 是“下载完立刻执行”，defer 是“等 HTML 解析完、DOMContentLoaded 之前按顺序执行”。如果你的脚本需要访问完整 DOM（比如 document.getElementById），又不想阻塞渲染，defer 更稳妥。

• 用 async：脚本完全自包含，不依赖 DOM，也不被其他脚本依赖（如 hotjar.js）
• 用 defer：脚本需读取或修改 DOM，且存在多个、有执行顺序要求（如框架 + 初始化逻辑）
• 两者都设时，async 优先级更高，defer 会被忽略
• defer 不支持动态插入的 script（document.createElement('script')），而 async 支持

动态插入 script 时如何模拟 async 行为？

通过 JS 动态创建