浏览器任务调度：长任务拆分、requestIdleCallback 与优先级

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.log(`长任务 ${entry.duration.toFixed(0)}ms，从 ${entry.name} 开始`);
  }
});
observer.observe({ entryTypes: ['longtask'] });

// 把一个同步循环改造成"每片最多 8ms"的分片处理
interface SliceContext<T> {
  items: T[];
  index: number;      // 显式保存进度：下次从这继续
  result: ReturnType<typeof handle>[];
}

function processInSlices<T>(ctx: SliceContext<T>): Promise<void> {
  return new Promise((resolve) => {
    const sliceStart = () => {
      const start = performance.now();
      while (ctx.index < ctx.items.length) {
        handle(ctx.items[ctx.index]);
        ctx.index++;
        if (performance.now() - start > 8) {       // 帧预算内只做 8ms
          setTimeout(sliceStart, 0);                // 新 task：渲染机会来了
          return;
        }
      }
      resolve();
    };
    sliceStart();
  });
}

function* buildRows(rows: RowData[]) {
  for (const row of rows) {
    createRowNode(row); // 逐条 yield，外部调度器控制节奏
    yield;
  }
}

async function run(generator: Generator<void>, budgetMs = 8): Promise<void> {
  let start = performance.now();
  while (true) {
    const { done } = generator.next();
    if (done) return;
    if (performance.now() - start > budgetMs) {
      await nextTask();          // 见下文 MessageChannel 实现
      start = performance.now();
    }
  }
}

const scheduler = (window as any).scheduler;

async function work() {
  for (const item of items) {
    handle(item);
    await scheduler.yield('user-visible'); // 优先级声明：与可见 UI 同级恢复
  }
}

function idleWork(deadline: IdleDeadline): void {
  while (queue.length && deadline.timeRemaining() > 2) {
    doOneUnit(queue.shift()!);      // 每次只做一个"单元"
  }
  if (queue.length) requestIdleCallback(idleWork, { timeout: 2000 }); // 续期
  else finish();
}

function makeYieldToMain(): () => Promise<void> {
  const channel = new MessageChannel();
  const pending = new Set<(v?: never) => void>();
  channel.port1.onmessage = () => {
    const resolvers = [...pending];
    pending.clear();
    for (const resolve of resolvers) resolve();   // 恢复所有等待者
  };
  return () =>
    new Promise<void>((resolve) => {
      pending.add(resolve as never);
      channel.port2.postMessage(null);           // 空 postMessage 只为制造新 task
    });
}

const yieldToMain = makeYieldToMain();

async function chunked(items: Item[]): Promise<void> {
  for (const item of items) {
    heavyStep(item);
    await yieldToMain();                          // 让出一帧：输入与渲染有机会插入
  }
}

const scheduling = (navigator as any).scheduling;

async function inputAwareLoop(items: Item[]): Promise<void> {
  for (const item of items) {
    heavyStep(item);
    const inputPending = scheduling?.isInputPending?.({ includeContinuous: true });
    if (inputPending) await yieldToMain();   // 有输入等着处理：立即让步
    else if (performance.now() - lastYieldAt > 20) await yieldToMain(); // 否则长间隔让步
  }
}

// 坏：每轮迭代都触发强制同步布局（layout thrashing）
for (const el of elements) el.style.height = el.offsetTop + 10 + 'px';

// 好：读写分离，只触发一次布局
const offsets = elements.map((el) => el.offsetTop);
elements.forEach((el, i) => (el.style.height = `${offsets[i] + 10}px`));