Webworker

React Example

const items = new Array(100).fill(null);

const workerScript = `
  function waitSync(milliseconds) {
    const start = Date.now();
    while (Date.now() - start < milliseconds) {}
  }

  self.onmessage = function(e) {
    waitSync(50);
    self.postMessage('Process complete!');
  }
`;

const blob = new Blob([workerScript], {type: "text/javascipt"});
const worker = new Worker(window.URL.createObjectURL(blob));

for (const i of items) {
    worker.postMessage(items);

    await new Promise((resolve) => {
        worker.onmessage = function (e) {
            loopCount.innerText = Number(loopCount.innerText) + 1;
            resolve();
        };
    });
}

Scheduler

Unfortunately, the entire Scheduler interface comes with a bummer: it’s not that well-supported across all browsers yet. But it is easy enough
to polyfill with existing
asynchronous APIs. So, at least a strong portion of users would benefit from it.

const items = new Array(100).fill(null);

for (const i of items) {
    loopCount.innerText = Number(loopCount.innerText) + 1;

    await new Promise((resolve) => scheduler.postTask(resolve));

    waitSync(50);
}

Yield
The yield() method of the Scheduler interface is used for yielding to the main thread during a task and continuing execution later, with the continuation scheduled as a
prioritized task… This allows long-running work to be broken up so the browser stays responsive.
```
  const items = new Array(100).fill(null);
    
  for (const i of items) {
  loopCount.innerText = Number(loopCount.innerText) + 1;
    
  await scheduler.yield();
    
  waitSync(50);
  }
```

Webworker

Scheduler

Yield