Why is data received from main process to renderer of new window not being updated often enough?

I am building an electron app to send serial logs data from a main process to a renderer and displaying that data in a textarea element.

The relevant code in renderer.js is:

    const debugLog = document.getElementById("id_DebugBox");
    ipcRenderer.on('ipc_debugBox', function (e, msg) {
        debugLog.value += msg;
        debugLog.scrollTop += msg.length;
    });

and in main.js:

    serialPort.on('data', function (chunk) {
        debugLogsWin.webContents.send('ipc_debugBox', chunk);
    });

For longer data, the delay keeps on increasing (the logs in the renderer window show data arrival at the right time, but rendering takes too much time, i.e. 5-10 seconds).

I was not able to speed up rendering with the div or textarea elements because my data goes up to 1MB and above, so I tried the following two methods:

1. Using xterm (only to show data, no user inputs). But I don't know if I used it correctly. There was a huge improvement (no lag/delay) but it only displayed the last ~1KB data, earlier data was hidden (or removed).

2. Using iframe, I saved the logs of the main process in a file, and accessed and refreshed that file in the renderer's iframe element at regular intervals. The delay was gone, with the only drawback of flickering while reloading. So far it works, but from the user's perspective, it still needs to be improved.

Any suggestion or help is highly appreciated.

Software versions are:

• electron v20.1.3,
• node v16.17.0,
• npm v8.15.0,
• Windows 10.