Break up long tasks

How to do it

Do the visible part of a response to a tap first, then yield before the rest. Use scheduler.yield() where it exists, with a setTimeout fallback. Move heavy pure work, such as parsing a large file, to a Web Worker.

Example

const yieldToBrowser = () =>
  globalThis.scheduler?.yield ? scheduler.yield() : new Promise(resolve => setTimeout(resolve));

async function saveAll(items) {
  showSaving();
  for (const item of items) {
    save(item);
    await yieldToBrowser();
  }
}

How to check

A performance trace of a typical click shows no task over 50 ms. Interaction to Next Paint stays under 200 ms in the lab and for visitors.