Rather rough sketch of using requestIdleCallback to break up JS execution

awaitIdle.js

function idle(action) {
  return new Promise((resolve, reject) => {
    requestIdleCallback(timing => resolve(action(timing)));
  });
}

async function init() {
  criticalPath();
  await idle(lessImportant);
  await idle(nonCritical);
}

function criticalPath() {
  console.log('lots of important stuff');
}

function lessImportant() {
  console.log('less important stuff');
}

function nonCritical() {
  console.log('non-important stuff');
}

window.addEventListener('load', init);

Oh, I never thought about it this way, I always envisioned an approach more like this (the loop is just there for illustration):

async function mySuperLongTask(context) {
  const work = perpareWork();
  await context.idle();
  for(let items of work) {
    work.do();
    await context.idle();
  }
  doRemainingWork();
}

schedular.run(mySuperLongTask);