模块顶层await阻止onload事件触发的原因及调试方法

问题原因分析 #

核心问题出在IndexedDB的open操作（含upgrade回调）与Firefox中模块顶层await的交互逻辑上：

• 模块的顶层await会暂停当前模块的执行，直到await的Promise完成，依赖该模块的其他代码（比如你的ui_index.js）也会同步等待。
• 当await的是openDB（尤其是触发upgrade时），Firefox的IndexedDB实现会持有相关资源/事务，导致页面加载流程的事件循环被阻塞，最终让window.load事件要么延迟到事务完成后触发，要么干脆错过触发时机——而你在ui_index.js里的load监听是在模块等待完成后才添加的，这时候可能事件已经触发过了，自然不会执行回调。
• 换成Promise.resolve(42)时，这个Promise会立即resolve，模块很快执行完毕，load监听能在事件触发前被添加，所以正常工作；去掉await时，模块不会等待openDB完成，load监听提前添加，也能正常捕获事件。

调试与解决方法 #

• 确认load事件是否真的没触发
  在index.html里添加一个同步的非模块脚本，提前监听load事件：

  <script>
    window.addEventListener('load', () => console.log('同步脚本捕获到load'));
  </script>
  

  如果这个日志能输出，说明是你在模块里的监听添加太晚；如果也没输出，说明Firefox确实没触发load事件，问题出在openDB与页面加载的底层交互。

• 避免在模块顶层await IndexedDB操作
  把数据库初始化逻辑封装成异步函数，导出后在页面加载完成后再调用：

  • 修改database.js：

    import { openDB } from "lib/idb";
    let db;
    export async function initDB() {
      if (!db) {
        db = await openDB("my-database-name", 4, {
          upgrade(db, old_ver, new_ver, tx) {
            console.log(`db.upgrade ${old_ver}→${new_ver}`);
          }
        });
        console.log('db:', db);
      }
      return db;
    }
    

  • 修改ui_index.js：

    import { initDB } from "database";
    window.addEventListener('load', async () => {
      console.log('onload');
      await initDB(); // 页面加载完成后再初始化数据库
    });
    console.log('ui');
    

  这种方式能保证load监听优先添加，不会错过事件。

• 排查upgrade回调的影响
  尝试打开一个已存在的数据库版本（不触发upgrade），看load事件是否正常触发：

  // database.js里修改版本号为已存在的版本
  const db = await openDB("my-database-name", 3); // 假设3是已存在的版本
  

  如果此时load事件正常，说明问题是upgrade回调中的操作导致的，可以进一步检查upgrade里的逻辑是否有阻塞性操作。

• 用Firefox性能面板分析事件流
  打开Firefox开发者工具的「性能」面板，记录页面加载的完整流程，查看load事件的触发状态、模块执行时间线、IndexedDB操作的耗时，能直观看到哪里出现了阻塞。

内容的提问来源于stack exchange，提问作者atzz