动态创建script标签并插入DOM完成按需异步加载的编码规范

动态加载脚本需遵循可控、可追踪、可销毁原则：通过URL缓存防重复；监听load/error并及时清理；设置async/defer控制执行；统一插入head；支持unload清理与降级fallback；推荐返回带cancel的Promise。

动态创建 script 标签并插入 DOM 是前端按需加载脚本的常用手段，但若不遵循规范，容易引发执行顺序错乱、重复加载、错误捕获缺失等问题。核心原则是：可控、可追踪、可销毁。

确保唯一性与防重复加载

同一脚本多次插入会导致重复执行，尤其在模块被多次请求时。应维护一个全局缓存记录已加载的脚本 URL。

• 用 Map 或 Set 存储已发起请求的 script src（注意区分带查询参数的 URL）
• 插入前先检查是否已存在对应 <script src="xxx"> 元素，或是否已在缓存中
• 避免仅靠 script 标签 id 判断——id 可能缺失或冲突；优先以 src 字符串为键

正确处理加载生命周期

必须监听 load 和 error 事件，不能只依赖 onload 属性，且需及时清理监听器。

• 使用 addEventListener 绑定事件，便于后续 removeEventListener 解绑
• load 回调中应触发业务逻辑（如 resolve Promise），error 中需 reject 并可选上报
• 脚本插入后若超时未响应（如 10s），应主动 abort 并清理资源（移除标签、清除定时器）

插入位置与执行上下文控制

script 默认在插入点执行，但行为受 async / defer 属性影响，需明确意图。

• 按需加载通常设 async = true，保证非阻塞；若依赖执行顺序，改用 defer 或手动串行加载
• 统一插入到 document.head，避免因插入位置不同导致 CSSOM/JS 执行时机差异
• 避免直接操作 document.body —— 页面未 ready 时 body 可能为 null，head 更可靠

支持清理与降级能力

动态脚本应具备“可卸载”意识，尤其在 SPA 路由切换或组件销毁时。

• 保存创建的 script 元素引用，提供 unload() 方法移除标签并清空缓存项
• 对不支持 ES 模块或现代 API 的环境（如旧版 IE），fallback 到 JSONP 或 document.write（慎用）
• 加载失败时提供备用路径（如 CDN 备源、本地 fallback 文件）

不复杂但容易忽略：每次创建都应有明确的加载标识、错误兜底和资源回收路径。写成函数时建议返回 Promise，并暴露 cancel 方法。