Electron中调用.show()后BrowserWindow全黑问题及窗口顺序排查

问题描述 #

开发Electron应用时，一个默认隐藏的"Loading..."弹窗会随机出现完全变黑的现象（整个窗口区域显示黑色，无正常加载内容）。一旦出现该问题，会在整个应用生命周期内持续存在；重启应用后有时能正常显示，但大多时候仍会复现。另一个同类弹窗无此问题。

弹窗创建代码：

async function spawnLoadingBlockWindow() {
    loadingWin = new BrowserWindow({
        width: 250,
        height: 75,
        center: true,
        frame: false,
        webPreferences: {
            preload: path.join(__dirname, 'preload.js'),
        },
        parent: mainWindow,
        modal: true,
        show: false
    });

    loadingWin.loadFile('loadingPopup.html');
}

显示弹窗的函数：

function showPopup(popupWin) {
    const winPosition = mainWindow.getPosition();
    const winSize = mainWindow.getSize();
    popupWin.setPosition(winPosition[0] + Math.round(winSize[0] / 2) - Math.round(popupWin.getSize()[0] / 2), winPosition[1] + Math.round(winSize[1] / 2) - Math.round(popupWin.getSize()[1] / 2));

    popupWin.show();
}

调用上下文：

async function saveBlockInTemp(event, block) {
    clearTemp();
    showPopup(loadingWin);
    await sleep(100);
    decompressTexturesAndMoveToTemp(block);
    decompressRecipePreviewAndMoveToTemp(block);
    loadingWin.hide();
    temp = block;
    return true;
}

注：加入100ms延迟是因为后续解压函数调用execSync阻塞程序，不加延迟弹窗仅显示透明边框；尝试过调用reload()无效，将show设为true时弹窗不会变黑，但不符合需求。

补充说明 #

发现问题与窗口创建顺序有关，原创建顺序如下：

app.whenReady().then(() => {
    createWindow();
    spawnLoadingBlockWindow();
    spawnGeneratingBlockWindow();
    

    // iOS specific check. Honestly makes no sense that
    // I have this here as this program doesn't support
    // iOS anyway.
    app.on('activate', () => {
        if (BrowserWindow.getAllWindows().length === 0) createWindow();
    })
});

切换两个弹窗的创建顺序（先调用spawnGeneratingBlockWindow，再调用spawnLoadingBlockWindow）后，问题消失，求解释原因及优化方案。

原因分析 #

这种弹窗变黑的核心是Electron多窗口初始化时的渲染调度优先级冲突，结合你的场景具体原因如下：

1. 模态窗口依赖父窗口状态：主窗口createWindow()执行后，页面可能仍在异步加载中，此时立即创建模态窗口，弹窗无法正确绑定主窗口的完整渲染环境，导致后续显示时渲染上下文丢失，出现黑屏。
2. 后台窗口渲染优先级低：show: false让窗口处于后台初始化状态，Electron对这类窗口的渲染调度优先级远低于可见窗口。连续创建两个模态窗口时，先创建的loadingWin更容易被后创建的窗口抢占渲染资源，导致页面加载不完整。
3. 同步阻塞加剧问题：execSync会阻塞主线程，即使加了100ms延迟，也可能因主线程被阻塞导致弹窗的渲染任务被挂起，无法完成页面绘制。

解决方案与优化建议 #

1. 等待主窗口完全就绪后再创建子窗口 #

不要在app.whenReady()后立即连续创建所有窗口，等主窗口页面加载完成、进入就绪状态后再创建模态弹窗：

app.whenReady().then(async () => {
    const mainWindow = await createWindow(); 
    // 监听主窗口的ready-to-show事件，确保主窗口完全渲染就绪
    mainWindow.on('ready-to-show', () => {
        spawnGeneratingBlockWindow();
        spawnLoadingBlockWindow();
    });

    app.on('activate', () => {
        if (BrowserWindow.getAllWindows().length === 0) createWindow();
    })
});

同时修改createWindow为异步函数，等待主窗口页面加载完成：

async function createWindow() {
    const mainWindow = new BrowserWindow({ /* 你的主窗口配置 */ });
    await mainWindow.loadFile('main.html');
    return mainWindow;
}

2. 确保模态窗口页面加载完成后再操作 #

为模态窗口添加ready-to-show事件监听，确保页面渲染完成后再进行显示操作，避免提前调用show()导致渲染不完整：

async function spawnLoadingBlockWindow() {
    loadingWin = new BrowserWindow({
        // 原有配置
        show: false
    });

    await loadingWin.loadFile('loadingPopup.html');
    // 页面加载完成后再做后续操作
    loadingWin.on('ready-to-show', () => {
        // 可在此提前设置窗口位置等
    });
}

3. 替换execSync为异步方法 #

使用exec异步执行命令，彻底避免阻塞主线程，这样可以去掉100ms的延迟：

const { exec } = require('child_process');

// 将解压函数改为异步Promise风格
function decompressTexturesAndMoveToTemp(block) {
    return new Promise((resolve, reject) => {
        exec('你的解压命令', (error, stdout, stderr) => {
            if (error) reject(error);
            else resolve();
        });
    });
}

async function saveBlockInTemp(event, block) {
    clearTemp();
    showPopup(loadingWin);
    await decompressTexturesAndMoveToTemp(block);
    await decompressRecipePreviewAndMoveToTemp(block);
    loadingWin.hide();
    temp = block;
    return true;
}

4. 优化窗口渲染优先级 #

为模态窗口添加alwaysOnTop: true（配合modal: true使用），确保弹窗的渲染优先级：

loadingWin = new BrowserWindow({
    // 原有配置
    alwaysOnTop: true
});

为什么切换创建顺序能解决问题？ #

当你先创建spawnGeneratingBlockWindow再创建spawnLoadingBlockWindow时，第一个弹窗的初始化过程会让Electron的窗口渲染调度机制完成一次资源分配和状态稳定。等创建第二个弹窗时，主窗口和渲染进程已经处于更稳定的状态，避免了第一个窗口因资源抢占、渲染环境未就绪导致的异常。这本质是规避了Electron在多模态窗口连续创建时的调度bug，但只是临时方案，上面的优化建议能从根本上解决问题。

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