scheduler.yield()を使い長いタスクに割り込む

Chrome 129 Betaでscheduler.yield()が使えるようになった。

※Chrome 115でフラグ付きで実装されていた。

長い処理を実行しているときは、その処理が終わるまで他のイベントを受け付けなくなってしまう。

  +-------------------+   +---------+
--|     long task     |---| onclick |--->
  +-------------------+   +---------+
    ↑
    このあたりでクリックしてもlong taskが終わるまで反応しない

scheduler.yield()を使うことで、長い処理の中に割り込むことができる。

  +----+  +----+  +---------+  +----+  +----+
--| lo |--| ng |--| onclick |--| ta |--| sk |-->
  +----+  +----+  +---------+  +----+  +----+
                    ↑
    ここでクリックするとlong taskの途中でも実行できる

Before: ブロックされる

サンプルコード

<button id="click" type="button">Click</button>
<button id="start" type="button">Start</button>

function longTask() {
  // 長い処理
  for(let i = 0; i < 10_000_000; i++) {
    const el = document.querySelector('dummytask')
  }
}

function run() {
  console.group('Blocking')
  let i = 0
  longTask()
  console.log(i++)

  longTask()
  console.log(i++)

  longTask()
  console.log(i++)

  longTask()
  console.log(i++)

  longTask()
  console.log(i++)

  console.groupEnd('Blocking')
}


const click = document.querySelector('#click')
click.addEventListener('click', () => console.log('Clicked'))

const start = document.querySelector('#start')
start.addEventListener('click', () => run())

実行結果

> Blocking
> 0
> 1
> 2
> 3
> 4
> Clicked
> Clicked
> ...

After: ブロックされない（scheduler.yield()）

サンプルコード

...
async function run() {
  console.group('Scheduler Yield')
  let i = 0
  longTask()
  console.log(i++)
  await scheduler.yield()

  longTask()
  console.log(i++)
  await scheduler.yield()

  longTask()
  console.log(i++)
  await scheduler.yield()

  longTask()
  console.log(i++)
  await scheduler.yield()

  longTask()
  console.log(i++)
  await scheduler.yield()

  console.groupEnd('Scheduler Yield')
}
...

実行結果

> Scheduler Yield
> 0
> Clicked
> 1
> Clicked
> Clicked
> 2
> Clicked
> 3
> Clicked
> 4
> Clicked
> ...

デモ

実行結果はConsoleに出力されます。