在非模块的普通 HTML 脚本中，虽不原生支持顶层 await，但可通过异步立即执行函数表达式（async IIFE）安全、简洁地模拟该行为，使后续逻辑保持全局作用域语义，避免嵌套回调或作用域污染。
在非模块的普通 html 脚本中，虽不原生支持顶层 `await`，但可通过异步立即执行函数表达式（async iife）安全、简洁地模拟该行为，使后续逻辑保持全局作用域语义，避免嵌套回调或作用域污染。
在 ES2022 及现代浏览器中，顶层 await 仅对 <script type="module"> 生效</script>——这是语言规范明确限定的。而传统 <script>（即“standard script”）仍运行在同步全局上下文中，直接书写 await 会抛出 SyntaxError: await is only valid in async functions and the top level bodies of modules。</script>
但实际开发中（尤其在模板预处理、CMS 嵌入脚本或渐进式增强场景），我们常需“等待异步布局初始化完成，再执行后续 DOM 操作”，且要求这些操作语义上等同于写在全局作用域中：能自由访问全局变量、无需额外闭包作用域、return 不意外退出、this 指向 window，且代码结构线性直观。
✅ 推荐方案：async IIFE（异步立即执行函数）
将整个脚本逻辑包裹在 async () => { ... }() 中，并确保 await 在其内部使用：
<script>
(async () => {
// ✅ 此处可自由使用 await
await new Promise(resolve => setTimeout(resolve, 1000));
// ✅ 后续代码“视觉上”处于全局作用域：
// - 可直接修改 window 全局变量
// - this === window
// - return 仅退出当前 IIFE，不影响外部
console.log('Layout ready — executing post-init logic...');
// 示例：动态插入内容（由模板系统生成）
document.body.innerHTML += '<div class="dynamic-section">Loaded!';
// ✅ 仍可正常定义全局函数或变量（若需暴露）
window.myApp = { status: 'initialized' };
})();
</script>
⚠️ 关键注意事项
- 作用域隔离是优点，不是缺陷：IIFE 创建独立词法作用域，这反而防止变量意外污染全局，符合现代最佳实践；如需全局访问，显式赋值给 window 即可。
- 执行时机：async IIFE 会立即启动，但内部 await 会暂停执行，后续代码在 Promise 解决后继续——效果与模块中顶层 await 高度一致。
- 脚本加载建议：为避免阻塞解析，推荐配合 <script defer> 使用（尤其当脚本位于 <head>）： <pre class="brush:php;toolbar:false;"><script defer> (async () => { await fetch('/api/config').then(r => r.json()); initApp(); // 确保在 DOM 就绪后执行 })(); </script>
-
不推荐替代方案：
❌ eval() 动态执行字符串（安全风险 + 调试困难）
❌ setTimeout(..., 0) 或轮询（无法真正等待异步完成）
❌ 强制转为模块（可能破坏现有构建流程或模板系统兼容性）
? 总结：虽然标准脚本不支持语法级顶层 await，但 async IIFE 是规范、轻量、跨浏览器（Chrome 55+ / Firefox 52+ / Safari 10.1+）的成熟模式。它既保留了线性编码体验，又规避了作用域混乱与回调地狱，在模板化、SSR 补丁、微前端集成等场景中尤为实用。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
