html5动态加载脚本需用localstorage/sessionstorage/indexeddb协同管理执行顺序：localstorage标记加载状态防重复，sessionstorage维护会话级依赖队列，indexeddb处理复杂元数据；须注意同源限制，推荐同源托管或postmessage代理。
在HTML5中，动态加载脚本时保证执行顺序不能依赖 <script async></script> 或 <script defer></script> 的默认行为，而需结合浏览器存储机制（如 localStorage、sessionStorage）做状态标记与协调。核心思路是：用存储记录已加载/已执行的脚本状态，避免重复加载，同时按需触发后续依赖脚本。
用 localStorage 标记脚本加载状态
每次动态插入脚本前，先查 localStorage 中对应脚本的标识键（如 "script:utils.js:loaded"），若存在且值为 "true"，跳过加载；否则创建 <script></script> 元素，加载完成后写入该键。
- 键名建议包含脚本路径或哈希值，避免命名冲突
- 写入时机必须在
onload回调中（非onreadystatechange，因后者兼容性差且状态判断复杂） - 失败时可写入
"error"值，便于调试和重试控制
用 sessionStorage 管理单会话内的加载队列
sessionStorage 适合临时维护脚本依赖链。例如将待加载脚本路径存为 JSON 数组：["a.js", "b.js", "c.js"]，每成功执行一个，就从数组头部移除并更新存储。页面刷新后仍可按序恢复加载。
- 初始化时读取数组，若非空则取出第一个路径加载
- 脚本执行完毕后，更新数组并保存回
sessionStorage - 配合
Promise链可实现串行加载，避免竞态
结合 IndexedDB 处理大型脚本元数据
当脚本数量多、依赖关系复杂（如模块化系统），localStorage 容量限制（通常 5–10MB）和同步 API 成为瓶颈。此时可用 IndexedDB 存储脚本的 URL、版本号、依赖列表、加载状态等结构化信息。
- 建立对象仓库（Object Store），主键为脚本 URL
- 查询时支持索引查找（如按
status = "ready"找就绪脚本） - 更新状态、插入新脚本、检查循环依赖均可原子化操作
注意跨域与存储访问限制
若脚本来自不同源（如 CDN），动态创建的 <script></script> 标签本身不受同源策略限制，但 localStorage 和 IndexedDB 严格按源隔离。这意味着 a.com 页面无法读取 b.com 脚本的存储标记。
- 解决方案：所有动态脚本应托管在同一源下，或通过
postMessage由 iframe 代理存储操作 - Service Worker 可作为统一缓存调度层，绕过页面级存储限制
- 开发阶段可用
location.origin+ 路径哈希生成唯一存储前缀，提升多项目共存安全性
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
