asyncLoop is not working as intended

[ChALkeR]

noble-hashes/src/utils.ts

Lines 183 to 205 in 9140c49

	/**
	* There is no setImmediate in browser and setTimeout is slow.
	* Call of async fn will return Promise, which will be fullfiled only on
	* next scheduler queue processing step and this is exactly what we need.
	*/
	export const nextTick = async (): Promise<void> => {};
	/** Returns control to thread each 'tick' ms to avoid blocking. */
	export async function asyncLoop(
	iters: number,
	tick: number,
	cb: (i: number) => void
	): Promise<void> {
	let ts = Date.now();
	for (let i = 0; i < iters; i++) {
	cb(i);
	// Date.now() is not monotonic, so in case if clock goes backwards we return return control too
	const diff = Date.now() - ts;
	if (diff >= 0 && diff < tick) continue;
	await nextTick();
	ts += diff;
	}
	}

This still hangs the page, try it out it devtools:

const nextTick = async () => {};
async function asyncLoop(iters, tick, cb) {
  let ts = Date.now();
  for (let i = 0; i < iters; i++) {
    cb(i)
    const diff = Date.now() - ts;
    if (diff >= 0 && diff < tick) continue;
    await nextTick();
    ts += diff;
  }
}
asyncLoop(1e5,10, () => {for (let j=0;j<1e7;j++);})

Instead, use await globalThis.scheduler?.yield() when available
Support: https://caniuse.com/mdn-api_scheduler_yield
Doc: https://developer.mozilla.org/en-US/docs/Web/API/Scheduler/yield

Demo:

const nextTick = async () => {};
async function asyncLoop(iters, tick, cb) {
  let ts = Date.now();
  for (let i = 0; i < iters; i++) {
    cb(i)
    console.log('tick', i, Date.now())
    if (globalThis.scheduler?.yield) {
      await globalThis.scheduler.yield()
    } else {
      const diff = Date.now() - ts;
      if (diff >= 0 && diff < tick) continue;
      await nextTick();
      ts += diff;
    }
  }
}
asyncLoop(1e5,10, () => {for (let j=0;j<1e7;j++);})

[ChALkeR]

This seems fast enough actually as a fallback: console.time();await new Promise(x=>setTimeout(x, 0));console.timeEnd()}
Doing that every 10ms should slow down the perf by a few percents max, if nothing else is scheduling stuff

So:

const { scheduler } = globalThis
const nextTick = scheduler?.yield ?
  () => scheduler.yield() :
  () => new Promise((accept) => setTimeout(accept, 0))

async function asyncLoop(iters, tick, cb) {
  let ts = Date.now();
  for (let i = 0; i < iters; i++) {
    cb(i)
    const diff = Date.now() - ts;
    if (diff >= 0 && diff < tick) continue;
    await nextTick();
    ts += diff;
  }
}

Will add perf results separately

[ChALkeR]

Using the implementation from the previous post, timing results on 100 iterations and 2ms per callback

Browsers seem to be significantly slower than Node.js on setTimeout, so that fallback is not very viable...

scheduler.yield comes with no performance hit though, even when called on every iteration without Date.now checks

// Chrome
do we have scheduler.yield? YES
new, tick=20ms: 200.09999990463257 ms
new, tick=10ms: 200 ms
new, tick=5ms: 200 ms
new, tick=10ms: 200 ms
new, tick=5ms: 200 ms
new, tick=2ms: 200 ms
new, tick=1ms: 200 ms
new, tick=0ms: 200 ms
old, tick=20ms: 200.29999995231628 ms
old, tick=10ms: 200 ms
old, tick=5ms: 200 ms
old, tick=10ms: 200 ms
old, tick=5ms: 200 ms
old, tick=2ms: 200 ms
old, tick=1ms: 200 ms
old, tick=0ms: 200 ms

// Firefox
do we have scheduler.yield? NO
new, tick=20ms: 232 ms
new, tick=10ms: 333 ms
new, tick=5ms: 630 ms
new, tick=10ms: 343 ms
new, tick=5ms: 623 ms
new, tick=2ms: 628 ms
new, tick=1ms: 639 ms
old, tick=20ms: 200 ms
old, tick=10ms: 200 ms
old, tick=5ms: 200 ms
old, tick=10ms: 200 ms
old, tick=5ms: 200 ms
old, tick=2ms: 200 ms
old, tick=1ms: 200 ms

// WebKit
do we have scheduler.yield? NO
new, tick=20ms: 231 ms
new, tick=10ms: 331 ms
new, tick=5ms: 593 ms
new, tick=10ms: 330 ms
new, tick=5ms: 607 ms
new, tick=2ms: 604 ms
new, tick=1ms: 613 ms
old, tick=20ms: 202 ms
old, tick=10ms: 202 ms
old, tick=5ms: 201 ms
old, tick=10ms: 222 ms
old, tick=5ms: 202 ms
old, tick=2ms: 201 ms
old, tick=1ms: 202 ms

// Node.js
do we have scheduler.yield? NO
new, tick=20ms: 212.69475 ms
new, tick=10ms: 224.01233399999998 ms
new, tick=5ms: 256.46191699999997 ms
new, tick=10ms: 223.50345800000002 ms
new, tick=5ms: 257.4900829999999 ms
new, tick=2ms: 315.3378329999998 ms
new, tick=1ms: 317.16483300000004 ms
old, tick=20ms: 200.27150000000006 ms
old, tick=10ms: 200.08745799999997 ms
old, tick=5ms: 200.15837499999998 ms
old, tick=10ms: 200.1066249999999 ms
old, tick=5ms: 200.52120799999966 ms
old, tick=2ms: 200.21612499999992 ms
old, tick=1ms: 200.17029200000025 ms

[ChALkeR]

Here, this unblocks the loop on everything modern and falls back to blocking async () => {}:

// Do not use process.nextTick here, it will also block the loop
// Ref: https://nodejs.org/en/learn/asynchronous-work/event-loop-timers-and-nexttick#understanding-processnexttick
// We use scheduler.yield if available, then try best-effort to get a macrotask tick
// Ref: https://developer.mozilla.org/en-US/docs/Web/API/Scheduler/yield
// Ref: https://github.com/YuzuJS/setImmediate
// Then fall back to effectively blocking
function getMacrotick() {
  const { scheduler, setImmediate, MessageChannel } = globalThis
  if (scheduler?.yield) return () => scheduler.yield()
  if (setImmediate) return () => new Promise((accept) => setImmediate(accept))
  if (MessageChannel) {
    const tasks = [], channel = new MessageChannel()
    channel.port1.onmessage = () => tasks.shift()()
    return () => new Promise((accept) => channel.port2.postMessage(tasks.push(accept)))
  }
  return async () => {}
}
const macrotick = getMacrotick()
async function asyncLoop(iters, tick, cb) {
  let ts = Date.now();
  for (let i = 0; i < iters; i++) {
    cb(i)
    const diff = Date.now() - ts;
    if (diff >= 0 && diff < tick) continue;
    await macrotick();
    ts += diff;
  }
}

Test results on 100 iterations and 2ms per callback:

// Chrome
APIs: { scheduler.yield: Yes, scheduler: Yes, setImmediate: no, MessageChannel: Yes }
new, tick=20ms: 200 ms
new, tick=10ms: 200 ms
new, tick=5ms: 200 ms
new, tick=10ms: 200.10000014305115 ms
new, tick=5ms: 200 ms
new, tick=2ms: 200 ms
new, tick=1ms: 200 ms
new, tick=0ms: 200 ms
old, tick=20ms: 200.09999990463257 ms
old, tick=10ms: 200 ms
old, tick=5ms: 200 ms
old, tick=10ms: 200 ms
old, tick=5ms: 200 ms
old, tick=2ms: 200 ms
old, tick=1ms: 200 ms
old, tick=0ms: 200 ms

// Firefox
APIs: { scheduler.yield: no, scheduler: no, setImmediate: no, MessageChannel: Yes }
new, tick=20ms: 200 ms
new, tick=10ms: 200 ms
new, tick=5ms: 200 ms
new, tick=10ms: 200 ms
new, tick=5ms: 200 ms
new, tick=2ms: 200 ms
new, tick=1ms: 200 ms
old, tick=20ms: 200 ms
old, tick=10ms: 200 ms
old, tick=5ms: 200 ms
old, tick=10ms: 200 ms
old, tick=5ms: 200 ms
old, tick=2ms: 200 ms
old, tick=1ms: 200 ms

// WebKit
APIs: { scheduler.yield: no, scheduler: no, setImmediate: no, MessageChannel: Yes }
new, tick=20ms: 210 ms
new, tick=10ms: 203 ms
new, tick=5ms: 202 ms
new, tick=10ms: 205 ms
new, tick=5ms: 201 ms
new, tick=2ms: 200.00000000000023 ms
new, tick=1ms: 201.99999999999977 ms
old, tick=20ms: 201.00000000000023 ms
old, tick=10ms: 201.99999999999977 ms
old, tick=5ms: 211 ms
old, tick=10ms: 202 ms
old, tick=5ms: 201 ms
old, tick=2ms: 202 ms
old, tick=1ms: 201 ms

// Node.js
APIs: { scheduler.yield: no, scheduler: no, setImmediate: Yes, MessageChannel: Yes }
new, tick=20ms: 200.744417 ms
new, tick=10ms: 200.41316700000002 ms
new, tick=5ms: 201.289042 ms
new, tick=10ms: 200.5026670000001 ms
new, tick=5ms: 201.21170800000004 ms
new, tick=2ms: 202.22012499999983 ms
new, tick=1ms: 202.1395 ms
old, tick=20ms: 200.15779199999997 ms
old, tick=10ms: 200.33529099999987 ms
old, tick=5ms: 200.10295900000006 ms
old, tick=10ms: 200.23795899999982 ms
old, tick=5ms: 200.09233399999994 ms
old, tick=2ms: 200.17666599999984 ms
old, tick=1ms: 200.3257920000001 ms

Test code:

import { test } from '@exodus/test/node'

// Do not use process.nextTick here, it will also block the loop
// Ref: https://nodejs.org/en/learn/asynchronous-work/event-loop-timers-and-nexttick#understanding-processnexttick
// We use scheduler.yield if available, then try best-effort to get a macrotask tick
// Ref: https://developer.mozilla.org/en-US/docs/Web/API/Scheduler/yield
// Ref: https://github.com/YuzuJS/setImmediate
// Then fall back to effectively blocking
function getMacrotick() {
  const { scheduler, setImmediate, MessageChannel } = globalThis
  if (scheduler?.yield) return () => scheduler.yield()
  if (setImmediate) return () => new Promise((accept) => setImmediate(accept))
  if (MessageChannel) {
    const tasks = [], channel = new MessageChannel()
    channel.port1.onmessage = () => tasks.shift()()
    return () => new Promise((accept) => channel.port2.postMessage(tasks.push(accept)))
  }
  return async () => {}
}
const macrotick = getMacrotick()
async function asyncLoop(iters, tick, cb) {
  let ts = Date.now();
  for (let i = 0; i < iters; i++) {
    cb(i)
    const diff = Date.now() - ts;
    if (diff >= 0 && diff < tick) continue;
    await macrotick();
    ts += diff;
  }
}

const nextTick = async () => {};
async function asyncLoopOld(iters, tick, cb) {
  let ts = Date.now();
  for (let i = 0; i < iters; i++) {
    cb(i)
    const diff = Date.now() - ts;
    if (diff >= 0 && diff < tick) continue;
    await nextTick();
    ts += diff;
  }
}

const N = 100
const cbTime = 2

const now = globalThis.performance ? () => performance.now() : () => Date.now()
const cb = () => {
  const start = now()
  while (now() < start + cbTime);
}

test('asyncLoop', async () => {
  const { scheduler, setImmediate, MessageChannel } = globalThis
  const apis = { 'scheduler.yield': scheduler?.yield, scheduler, setImmediate, MessageChannel }
  console.log(
    `APIs: { ${Object.entries(apis).map(([k, v]) => `${k}: ${v ? 'Yes' : 'no'}`).join(', ')} }`
  )

  const times = [20, 10, 5, 10, 5, 2, 1]
  if (scheduler?.yield) times.push(0)

  for (const stop of times) {
    const start = now()
    await asyncLoop(N, stop, cb)
    console.log(`new, tick=${stop}ms: ${now() - start} ms`)
  }

  for (const stop of times) {
    const start = now()
    await asyncLoopOld(N, stop, cb)
    console.log(`old, tick=${stop}ms: ${now() - start} ms`)
  }
})

[ChALkeR]

Ok, the code above is problematic as it doesn't close the messagePort.
But even spawning a new one and closing it instantly gives a good perf.
Will update this