异步SubtleCrypto.generateKey调用导致Window Load事件无法触发的原因及解决方法

我来帮你梳理这个问题的前因后果和可行的解决思路～你遇到的情况是：当你在页面初始化阶段用await window.crypto.subtle.generateKey()生成密钥时，window.load事件居然没触发了，而且只有在Chrome 128.0.6613.138这个版本里能复现这个问题。你还发现把密钥生成逻辑塞进嵌套IIFE里降低执行优先级能修复，但你又需要提前拿到密钥，这个矛盾确实挺闹心的。

问题原因 #

这个现象本质是Chrome在该版本里的事件循环与页面加载流程的交互bug：当你在**顶级上下文（或非嵌套的顶级IIFE）**里使用await调用subtle.generateKey时，这个异步操作会抢占页面加载事件的队列优先级，甚至会让浏览器误以为页面初始化脚本还在执行，从而跳过load事件的触发。毕竟subtle.generateKey虽然是异步API，但它的底层执行会占用主线程部分资源，干扰了浏览器判断页面加载完成的时机。

解决方法 #

如果你既想提前拿到密钥，又不想阻塞load事件，有几个更合理的方案：

方案1：用.then()替代顶级await，避免阻塞加载流程

把密钥生成的异步操作改成链式调用，这样不会让页面初始化脚本的执行暂停，浏览器就能正常触发load事件，同时密钥生成也能在后台进行（本地生成ECDSA密钥速度很快，基本能在load事件触发前完成）：

// 提前发起密钥生成请求，不阻塞主线程
window.crypto.subtle.generateKey(
    {
        name: "ECDSA",
        namedCurve: "P-256"
    },
    true,
    ["sign", "verify"]
).then(keys => {
    // 把密钥存到全局变量，方便后续使用
    window.appKeys = keys;
    console.log("密钥已生成");
});

window.addEventListener("load", () => {
    debugger;
    console.info("Load事件触发了！");
    // 这里可以直接使用window.appKeys
    if (window.appKeys) {
        console.log("可用密钥：", window.appKeys);
    }
});

方案2：在DOMContentLoaded事件里生成密钥，兼顾时机和加载流程

如果你的密钥不需要在页面最早期就拿到，可以把生成逻辑放在DOMContentLoaded事件里，这样既不会干扰load事件，也能在页面DOM准备好后立即生成密钥：

window.addEventListener("DOMContentLoaded", async () => {
    const keys = await window.crypto.subtle.generateKey(
        { name: "ECDSA", namedCurve: "P-256" },
        true,
        ["sign", "verify"]
    );
    window.appKeys = keys;
});

window.addEventListener("load", () => {
    debugger;
    console.info("Load事件触发了！");
    // 这里大概率已经能拿到密钥了
});

关于你提到的嵌套IIFE方案 #

你说把generateKey放进嵌套IIFE里能修复，本质是因为嵌套IIFE会让这个异步操作的执行优先级被降低，不会和页面加载事件抢占队列，但这种方法确实会延迟密钥的生成时间，不符合你“提前拿到密钥”的需求，所以不太推荐。

复现代码（问题版本） #

你提到的复现方式是这样的（顶级await会阻塞load事件）：

(async () => {
    const keys = await window.crypto.subtle.generateKey(
        {
            name: "ECDSA",
            namedCurve: "P-256"
        },
        true,
        ["sign", "verify"]
    );

    window.addEventListener("load", () => {
        debugger;
        console.info("Fired..."); // 这里不会执行
    });
})();

备注：内容来源于stack exchange，提问作者vladimir_1969_2