NWJS，Electron-长时间运行过程中DOM不更新 [英] NWJS, Electron - DOM not updating during long-running process

问题描述

就像在这个未回答的问题中一样，我有一个长期运行的过程，在此过程中，我希望更新该应用程序唯一窗口的HTML，但是直到上述过程完成后，DOM才会更新.

Just as in this unanswered question, I have a long-running process, during which I wish to update an the HTML of the app's only window -- but the DOM does not get updated until after the above process has completed.

NW和Electron都是这种情况.

This is the case with both NW and Electron.

之所以调用代码 ，是因为同一例程也记录到console-通过传递给该进程的window实例进行访问，该实例位于Node模块中.

The code is getting called, because the same routine also logs to the console - which is access through a window instance passed to the process, which is in a Node module.

我找不到引用此类问题的文档，也找不到可能有用的Chromium标志.

I can find no documentation that references such issues, and no Chromium flag which might help.

使用setInterval每秒填充一次元素的innerText时，更新将在长时间运行的文件分析过程中停止.

When using setInterval to populate the innerText of an element with the time every second, the updates stop during the long-running file-parsing process.

这个问题是我在Google搜索"NWJS not update DOM"时的第一个结果....

this question is my first result on a Google search for 'NWJS not updating DOM'....

推荐答案

阻塞Chromium主进程的长时间运行的进程也会阻塞渲染器.

Long-running processes that block the Chromium main process will also block the renderer.

解决方案是创建一个单独的进程，并使其通过IPC将状态更新发送回渲染器:

The solution is to create a separate process, and have it send status updates back to renderer via IPC:

        this._service = fork(
            path.join(__dirname, 'service'),
            [],
            { stdio: ['inherit', 'inherit', 'inherit', 'ipc'] }
        );

        this._service.on('error', (err) => {
            console.log('child error', err);
        });

        this._service.on('message', msg => {
            console.log('message from child:', msg);
            switch (msg.cmd) {
                case 'hello':
                    console.log('hello from parent');
                    break;
                case 'log':
                    this.parentLog(msg.html);
                    break;
                case 'progress':
                    this.progressBar.update(msg.pc);
                    break;
            }
        });

在产生的子进程(在上面的示例中命名为service.js)中，使用process.send将JSON传输到父级:

In the spawned subprocess (named service.js in the above example), use process.send to transmit JSON to the parent:

const childLog = (html) => {
    process.send({ cmd: 'log', html: html });
}

请注意，如果您的父母不是电子渲染器，则可能是通过从渲染器传递的window访问DOM.

Note that if your parent is not the Electron renderer, it could be accessing the DOM via a window passed from the renderer.

这篇关于NWJS，Electron-长时间运行过程中DOM不更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！