How does JS achieve traversal progress display without increasing browser IDLE time?

how does JS achieve traversal progress display without increasing browser IDLE time?

is doing a pure front-end log file analysis tool. This process requires two iterations.

initially did not consider the performance problem, the direct use of for, 5w row of sample data will take about 35 seconds to complete, this efficiency is quite worrying. (although it turns out that the performance is extremely poor when you turn on the Chrome debugging tool Performance, which is about 9 seconds if not open.)
generally starts with 30w rows of data (now the Chrome that is loaded directly into 30w rows of logs is dead).

consider adding at least one real-time progress, but you can"t render it in real time with for traversal. Look at the practice on the Internet is to rewrite it into setTimeout to do its own callback. That"s probably what it feels like:

before:

let result = [];
for (let i = 0; i < data.length; iPP) {
    //
    //result.push()
}

after:

let i = 0;
let result = []
let doThing = function(i, data, result) {
    //
    //
    //result.push()
    iPP;
    if (i < data.length) {
        setTimeout(function() {
            generateRawData(i, data, result);
        }, 0);
    } else {
        //
    }
};
generateRawData(0, data, result);

The

function is implemented, but it is found that the speed is very slow (I haven"t written the rendering code yet, so it"s certainly not the problem of slow front-end rendering). I opened the Chrome debugging tool Performance, and found that most of the time is IDLE, that is, the browser is idle, which is no good.

figure 1, Performance diagram traversed with for:

2 setTimeout Performance :

how does JS achieve traversal progress display without increasing browser IDLE time? It seems that the rendering method of setTimeout seems to be a traditional method, is there any new API that can achieve similar things?