动态加载脚本需遵循可控、可追踪、可销毁原则：通过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 方法。
