// setTimeout のネスト制限（HTML 仕様 Section 8.6）
//
// ネストレベルが 5 を超えた場合、最小遅延は 4ms に強制される
 
function demonstrateNestedTimeout() {
  const start = performance.now();
  let count = 0;
 
  function nest() {
    count++;
    const elapsed = performance.now() - start;
    console.log(`Nest ${count}: ${elapsed.toFixed(2)}ms`);
 
    if (count < 10) {
      setTimeout(nest, 0);  // 0ms 指定でもネスト深くなると 4ms+ になる
    }
  }
 
  setTimeout(nest, 0);
}
 
demonstrateNestedTimeout();
// 典型的な出力:
// Nest 1: 0.10ms    ← ほぼ即座
// Nest 2: 0.20ms
// Nest 3: 0.30ms
// Nest 4: 0.40ms
// Nest 5: 0.50ms
// Nest 6: 4.50ms    ← ここからネスト制限発動
// Nest 7: 8.60ms
// Nest 8: 12.70ms
// Nest 9: 16.80ms
// Nest 10: 20.90ms

// 長時間タスクの例（アンチパターン）
button.addEventListener('click', () => {
  // この同期処理が完了するまで UI は固まる
  const result = heavyComputation(); // 200ms かかる処理
  display.textContent = result;
});
 
// 改善例: タスクを分割する
button.addEventListener('click', async () => {
  display.textContent = 'Computing...';
 
  // yieldToMain: 制御をメインスレッドに返す
  await yieldToMain();
 
  const result = heavyComputation();
  display.textContent = result;
});
 
// yieldToMain のシンプルな実装
function yieldToMain() {
  return new Promise(resolve => {
    setTimeout(resolve, 0);
  });
}

// Long Tasks API による監視
const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.warn(
      `Long task detected: ${entry.duration.toFixed(1)}ms`,
      `(name: ${entry.name})`
    );
  }
});
 
observer.observe({ type: 'longtask', buffered: true });

// 危険: マイクロタスクの無限ループ
// 以下のコードはブラウザタブをフリーズさせる
function dangerousInfiniteLoop() {
  queueMicrotask(() => {
    console.log('This will repeat forever');
    dangerousInfiniteLoop();  // 新しいマイクロタスクが即座に実行される
  });
}
// dangerousInfiniteLoop(); // 絶対に実行しないこと！
 
// 対比: setTimeout による再帰は安全
function safeRecursion() {
  setTimeout(() => {
    console.log('This yields to the event loop');
    safeRecursion();  // 次のタスクサイクルまで待機
  }, 0);
}

// Promise チェーンの実行順序を追跡する
console.log('A: sync start');
 
const p = new Promise((resolve) => {
  console.log('B: executor (sync)');  // executor は同期実行
  resolve('done');
  console.log('C: after resolve (still sync)');
});
 
p.then((val) => {
  console.log('D: first then - ' + val);
}).then(() => {
  console.log('E: second then');
});
 
p.then(() => {
  console.log('F: another branch then');
});
 
console.log('G: sync end');
 
// 出力順序:
// A: sync start
// B: executor (sync)
// C: after resolve (still sync)
// G: sync end
// D: first then - done
// F: another branch then    ← D と F は同じ Promise から分岐
// E: second then            ← D の .then() チェーンなので F の後

async function example() {
  console.log('1: before await');
  await Promise.resolve();
  console.log('2: after await');  // マイクロタスクとして実行
  await Promise.resolve();
  console.log('3: after second await');  // 次のマイクロタスクとして実行
}
 
console.log('A: start');
example();
console.log('B: end');
 
// 出力:
// A: start
// 1: before await
// B: end
// 2: after await
// 3: after second await

// queueMicrotask の典型的な使用例:
// バッチ処理の最適化
 
class BatchProcessor {
  #pending = [];
  #scheduled = false;
 
  add(item) {
    this.#pending.push(item);
 
    if (!this.#scheduled) {
      this.#scheduled = true;
      // 同期コードが全て完了した後にバッチ処理
      queueMicrotask(() => {
        this.#flush();
      });
    }
  }
 
  #flush() {
    const batch = this.#pending.splice(0);
    this.#scheduled = false;
    console.log(`Processing batch of ${batch.length} items:`, batch);
    // 実際の処理をここで一括実行
  }
}
 
const processor = new BatchProcessor();
processor.add('item1');
processor.add('item2');
processor.add('item3');
// 同期コード完了後に1回だけ flush される:
// "Processing batch of 3 items: ['item1', 'item2', 'item3']"

const observer = new MutationObserver((mutations) => {
  // ここはマイクロタスクとして実行される
  console.log(`${mutations.length} mutations observed`);
  mutations.forEach(m => {
    console.log(`  Type: ${m.type}, Target: ${m.target.id}`);
  });
});
 
observer.observe(document.getElementById('container'), {
  childList: true,
  subtree: true,
  attributes: true,
});
 
// 以下の3つの DOM 変更は、同じマイクロタスクチェックポイントで
// 1回のコールバックにまとめて通知される
const container = document.getElementById('container');
container.appendChild(document.createElement('div'));
container.setAttribute('data-count', '1');
container.firstChild.textContent = 'Hello';

// コード例1: タスクとマイクロタスクの実行順序（基礎）
console.log('1: sync');
 
setTimeout(() => {
  console.log('2: timeout');
}, 0);
 
Promise.resolve().then(() => {
  console.log('3: promise');
});
 
queueMicrotask(() => {
  console.log('4: queueMicrotask');
});
 
console.log('5: sync');
 
// 出力:
// 1: sync
// 5: sync
// 3: promise
// 4: queueMicrotask
// 2: timeout
//
// 解説:
// (a) 同期コード: 1, 5
// (b) マイクロタスク: 3, 4 （Promise.then と queueMicrotask は同列）
// (c) タスク: 2 （setTimeout は次のタスクサイクル）

// コード例2: タスク内で生成されるマイクロタスク（中級）
setTimeout(() => {
  console.log('timeout 1');
  Promise.resolve().then(() => console.log('promise in timeout 1'));
}, 0);
 
setTimeout(() => {
  console.log('timeout 2');
  Promise.resolve().then(() => console.log('promise in timeout 2'));
}, 0);
 
Promise.resolve().then(() => {
  console.log('promise 1');
  queueMicrotask(() => console.log('nested microtask'));
});
 
// 出力:
// promise 1
// nested microtask     ← promise 1 のマイクロタスク内で追加されたもの
// timeout 1
// promise in timeout 1 ← timeout 1 完了後のマイクロタスクチェックポイント
// timeout 2
// promise in timeout 2 ← timeout 2 完了後のマイクロタスクチェックポイント

// コード例3: rAF によるスムーズアニメーション
function animateElement(element, targetX, duration) {
  const startX = parseFloat(getComputedStyle(element).transform.split(',')[4]) || 0;
  const distance = targetX - startX;
  let startTime = null;
 
  function frame(currentTime) {
    if (startTime === null) startTime = currentTime;
    const elapsed = currentTime - startTime;
    const progress = Math.min(elapsed / duration, 1);
 
    // イージング関数: ease-out-cubic
    const eased = 1 - Math.pow(1 - progress, 3);
 
    element.style.transform = `translateX(${startX + distance * eased}px)`;
 
    if (progress < 1) {
      requestAnimationFrame(frame);
    }
  }
 
  requestAnimationFrame(frame);
}
 
// 使用例
const box = document.getElementById('animated-box');
animateElement(box, 300, 1000);  // 300px の位置まで 1000ms かけて移動

// アンチパターン: 読み取りと書き込みの交互実行
// → 強制同期レイアウトが発生する
function badLayout(elements) {
  elements.forEach(el => {
    const height = el.offsetHeight;    // 読み取り（Layout を強制）
    el.style.height = height * 2 + 'px'; // 書き込み（Layout を無効化）
    // 次の読み取りで再び Layout 計算が必要になる
  });
}
 
// 推奨パターン: 読み取りと書き込みを分離
function goodLayout(elements) {
  // Phase 1: 全ての読み取りを先に行う
  const heights = elements.map(el => el.offsetHeight);
 
  // Phase 2: rAF 内で全ての書き込みを行う
  requestAnimationFrame(() => {
    elements.forEach((el, i) => {
      el.style.height = heights[i] * 2 + 'px';
    });
  });
}

// rAF のキャンセル方法
let animationId = null;
 
function startAnimation() {
  function frame(timestamp) {
    // アニメーション処理
    updatePosition(timestamp);
    animationId = requestAnimationFrame(frame);
  }
  animationId = requestAnimationFrame(frame);
}
 
function stopAnimation() {
  if (animationId !== null) {
    cancelAnimationFrame(animationId);
    animationId = null;
  }
}
 
// ページ可視性の変化に応じた制御
document.addEventListener('visibilitychange', () => {
  if (document.hidden) {
    stopAnimation();  // タブが非表示になったら停止
  } else {
    startAnimation(); // タブが表示されたら再開
  }
});

// rAF 内での rAF 登録は次フレームになる
requestAnimationFrame(() => {
  console.log('Frame 1');
  requestAnimationFrame(() => {
    console.log('Frame 2');  // Frame 1 の次のフレームで実行
  });
});

// コード例4: rIC による段階的なデータ処理
class IdleProcessor {
  #queue = [];
  #isProcessing = false;
 
  enqueue(items) {
    this.#queue.push(...items);
    this.#scheduleProcessing();
  }
 
  #scheduleProcessing() {
    if (this.#isProcessing) return;
    this.#isProcessing = true;
 
    requestIdleCallback((deadline) => {
      this.#process(deadline);
    }, { timeout: 5000 });  // 最大 5 秒待っても実行されない場合は強制実行
  }
 
  #process(deadline) {
    // アイドル時間が残っている間、またはタイムアウトした場合に処理
    while (
      this.#queue.length > 0 &&
      (deadline.timeRemaining() > 1 || deadline.didTimeout)
    ) {
      const item = this.#queue.shift();
      this.#processItem(item);
    }
 
    if (this.#queue.length > 0) {
      // まだ残りがある場合、次のアイドル期間に継続
      requestIdleCallback((deadline) => {
        this.#process(deadline);
      }, { timeout: 5000 });
    } else {
      this.#isProcessing = false;
    }
  }
 
  #processItem(item) {
    // 個々のアイテムの処理
    console.log(`Processing: ${item}`);
  }
}
 
// 使用例: 1000件のアイテムをアイドル時間で段階的に処理
const processor = new IdleProcessor();
processor.enqueue(Array.from({ length: 1000 }, (_, i) => `item-${i}`));

// 推奨: rIC + rAF の組み合わせ
requestIdleCallback((deadline) => {
  // アイドル時間中に計算を行う
  const results = performCalculations(deadline);
 
  // DOM 変更は rAF に委譲する
  requestAnimationFrame(() => {
    updateDOM(results);
  });
});

// rIC のポリフィル（簡易版）
const requestIdleCallbackCompat =
  window.requestIdleCallback ||
  function(callback, options) {
    const start = Date.now();
    return setTimeout(() => {
      callback({
        didTimeout: false,
        timeRemaining() {
          return Math.max(0, 50 - (Date.now() - start));
        },
      });
    }, 1);
  };
 
const cancelIdleCallbackCompat =
  window.cancelIdleCallback ||
  function(id) {
    clearTimeout(id);
  };

// scheduler.postTask() の使用例
async function demonstrateScheduler() {
  // user-blocking: ユーザー操作に影響する処理（最高優先度）
  scheduler.postTask(() => {
    console.log('user-blocking task');
  }, { priority: 'user-blocking' });
 
  // user-visible: 表示に影響するが即時でなくてよい処理
  scheduler.postTask(() => {
    console.log('user-visible task');
  }, { priority: 'user-visible' });
 
  // background: バックグラウンド処理（最低優先度）
  scheduler.postTask(() => {
    console.log('background task');
  }, { priority: 'background' });
}
 
// AbortController によるキャンセル
const controller = new AbortController();
 
scheduler.postTask(
  () => { console.log('cancellable task'); },
  { priority: 'background', signal: controller.signal }
);
 
controller.abort();  // タスクをキャンセル

// コード例5: 全スケジューリング API の実行順序
console.log('1: sync');
 
setTimeout(() => console.log('2: setTimeout'), 0);
 
Promise.resolve().then(() => console.log('3: promise'));
 
queueMicrotask(() => console.log('4: queueMicrotask'));
 
requestAnimationFrame(() => console.log('5: rAF'));
 
requestIdleCallback(() => console.log('6: rIC'));
 
console.log('7: sync end');
 
// 保証される順序:
// 1: sync
// 7: sync end
// 3: promise         ← マイクロタスク（Promise）
// 4: queueMicrotask  ← マイクロタスク（queueMicrotask）
//
// 以下はブラウザの判断による（相対順序は変わりうる）:
// 2: setTimeout      ← タスク
// 5: rAF             ← レンダリング前（レンダリングが発生する場合）
// 6: rIC             ← アイドル時間（余裕がある場合）
//
// 典型的な出力:
// 1, 7, 3, 4, 5, 2, 6
// または
// 1, 7, 3, 4, 2, 5, 6

// 複合的な実行順序の例
console.log('A');
 
setTimeout(() => {
  console.log('B');
  queueMicrotask(() => console.log('C'));
}, 0);
 
requestAnimationFrame(() => {
  console.log('D');
  Promise.resolve().then(() => console.log('E'));
});
 
queueMicrotask(() => {
  console.log('F');
  queueMicrotask(() => console.log('G'));
});
 
Promise.resolve().then(() => console.log('H'));
 
console.log('I');
 
// トレース:
// Step 1 (同期): A, I
// Step 2 (マイクロタスク): F → G（F 内で追加された G も同じチェックポイント）, H
//   ※ F と H の順序は登録順で F → H、G は F の中で追加されるので F → G → H
//   正確な出力: F, G, H
// Step 3 (レンダリング判断):
//   レンダリングする場合: D → E（rAF 内の Promise）
//   レンダリングしない場合: D, E は次のレンダリングまで遅延
// Step 4 (タスク): B → C（B 内で追加された C はマイクロタスクチェックポイントで実行）
//
// 典型的な出力: A, I, F, G, H, D, E, B, C

// MessageChannel を使った高速タスクスケジューリング
function scheduleTask(callback) {
  const channel = new MessageChannel();
  channel.port1.onmessage = () => callback();
  channel.port2.postMessage(null);
}
 
// 速度比較
async function benchmark() {
  const iterations = 100;
 
  // setTimeout(fn, 0) の場合
  const startTimeout = performance.now();
  let countTimeout = 0;
  await new Promise(resolve => {
    function next() {
      countTimeout++;
      if (countTimeout < iterations) {
        setTimeout(next, 0);
      } else {
        resolve();
      }
    }
    setTimeout(next, 0);
  });
  const timeoutDuration = performance.now() - startTimeout;
 
  // MessageChannel の場合
  const startChannel = performance.now();
  let countChannel = 0;
  await new Promise(resolve => {
    const channel = new MessageChannel();
    channel.port1.onmessage = () => {
      countChannel++;
      if (countChannel < iterations) {
        channel.port2.postMessage(null);
      } else {
        resolve();
      }
    };
    channel.port2.postMessage(null);
  });
  const channelDuration = performance.now() - startChannel;
 
  console.log(`setTimeout x${iterations}: ${timeoutDuration.toFixed(1)}ms`);
  console.log(`MessageChannel x${iterations}: ${channelDuration.toFixed(1)}ms`);
  // 典型的な結果（Chrome）:
  // setTimeout x100: ~450ms（ネスト制限で各 4ms+ に）
  // MessageChannel x100: ~15ms（ネスト制限なし）
}

// 重い処理の途中でプログレスバーを更新する
async function processWithProgress(data, progressCallback) {
  const total = data.length;
  const chunkSize = 100;
 
  for (let i = 0; i < total; i += chunkSize) {
    const chunk = data.slice(i, i + chunkSize);
 
    // チャンクを処理
    for (const item of chunk) {
      processItem(item);
    }
 
    // プログレスを更新（DOM 操作）
    const progress = Math.min((i + chunkSize) / total, 1);
    progressCallback(progress);
 
    // メインスレッドに制御を返してレンダリングを許可
    await new Promise(resolve => {
      requestAnimationFrame(() => {
        // rAF 内で resolve することで、レンダリング後に次のチャンクが実行される
        resolve();
      });
    });
  }
 
  progressCallback(1);
}
 
// 使用例
const progressBar = document.getElementById('progress-bar');
const data = generateLargeDataset(10000);
 
processWithProgress(data, (progress) => {
  progressBar.style.width = `${progress * 100}%`;
  progressBar.textContent = `${Math.round(progress * 100)}%`;
});

// マイクロタスクベースのデバウンス（同一タスク内の複数呼び出しを統合）
function microtaskDebounce(fn) {
  let scheduled = false;
  let latestArgs = null;
 
  return function(...args) {
    latestArgs = args;
    if (!scheduled) {
      scheduled = true;
      queueMicrotask(() => {
        scheduled = false;
        fn.apply(this, latestArgs);
      });
    }
  };
}
 
// rAF ベースのデバウンス（フレーム単位で統合）
function rafDebounce(fn) {
  let frameId = null;
  let latestArgs = null;
 
  return function(...args) {
    latestArgs = args;
    if (frameId === null) {
      frameId = requestAnimationFrame(() => {
        frameId = null;
        fn.apply(this, latestArgs);
      });
    }
  };
}
 
// タスクベースのデバウンス（従来型、ms 指定）
function taskDebounce(fn, delay = 300) {
  let timerId = null;
 
  return function(...args) {
    clearTimeout(timerId);
    timerId = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  };
}
 
// 使い分け:
// microtaskDebounce: 同一同期コンテキスト内の重複排除
// rafDebounce: スクロールやリサイズなどフレーム単位の処理
// taskDebounce: ユーザー入力（検索ボックスなど）の待機

// NG: マイクロタスクの大量キューイング
function processAllWithMicrotasks(items) {
  items.forEach((item, index) => {
    // 10000個の Promise チェーンがマイクロタスクキューに積まれる
    Promise.resolve().then(() => {
      processItem(item);
      if (index % 100 === 0) {
        updateProgressUI(index / items.length);
        // この UI 更新はレンダリングされない！
        // 全てのマイクロタスクが完了するまでレンダリングはブロックされる
      }
    });
  });
}
 
// OK: タスクに分割してレンダリング機会を確保
async function processAllWithYield(items) {
  const chunkSize = 50;
  for (let i = 0; i < items.length; i += chunkSize) {
    const chunk = items.slice(i, i + chunkSize);
    chunk.forEach(item => processItem(item));
 
    updateProgressUI(Math.min((i + chunkSize) / items.length, 1));
 
    // setTimeout でメインスレッドに制御を返す
    await new Promise(resolve => setTimeout(resolve, 0));
  }
}

// NG: rAF 内での重い処理
requestAnimationFrame(() => {
  // 大量のデータをソート（数十ms かかる可能性）
  const sorted = hugeArray.sort((a, b) => complexComparison(a, b));
 
  // ソート結果を DOM に反映
  sorted.forEach(item => {
    const el = document.createElement('div');
    el.textContent = item.name;
    container.appendChild(el);  // DOM 操作も重い
  });
  // フレーム予算（16.67ms）を大幅に超過 → ジャンク発生
});
 
// OK: 計算は事前に行い、rAF では DOM 操作のみ
const sorted = hugeArray.sort((a, b) => complexComparison(a, b));
 
// DOM 更新は DocumentFragment を使ってバッチ処理
requestAnimationFrame(() => {
  const fragment = document.createDocumentFragment();
  sorted.forEach(item => {
    const el = document.createElement('div');
    el.textContent = item.name;
    fragment.appendChild(el);
  });
  container.appendChild(fragment);  // 1回の DOM 操作で済む
});

// NG: setInterval で正確なタイミングを期待
let lastTime = performance.now();
setInterval(() => {
  const now = performance.now();
  const drift = now - lastTime - 1000;
  console.log(`Drift: ${drift.toFixed(1)}ms`);
  lastTime = now;
  // 長時間実行するとドリフトが蓄積する
}, 1000);
 
// OK: setTimeout の再帰呼び出しで自己補正
function accurateInterval(callback, interval) {
  let expected = performance.now() + interval;
 
  function step() {
    const now = performance.now();
    const drift = now - expected;
    callback(drift);
 
    expected += interval;
    // ドリフトを補正して次のタイマーを設定
    setTimeout(step, Math.max(0, interval - drift));
  }
 
  setTimeout(step, interval);
}
 
accurateInterval((drift) => {
  console.log(`Drift: ${drift.toFixed(1)}ms`);
}, 1000);

// ケース A: executor 内の同期例外 → reject として捕捉可能
const p1 = new Promise((resolve, reject) => {
  throw new Error('sync error');
});
p1.catch(err => console.log('Caught:', err.message));
// 出力: Caught: sync error
 
// ケース B: executor 内の非同期例外 → 捕捉不可
const p2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    throw new Error('async error');
    // この例外は Promise チェーンでは捕捉できない
    // window.onerror または unhandledrejection で検出される
  }, 0);
});
p2.catch(err => console.log('This will NOT be called'));
 
// ケース C: resolve 後の例外は無視される
const p3 = new Promise((resolve, reject) => {
  resolve('done');
  throw new Error('after resolve');
  // resolve 後の throw は無視される（Promise の状態は不変）
});
p3.then(val => console.log('Value:', val));
// 出力: Value: done

// 「次のフレームまで待つ」テクニック
function afterNextPaint(callback) {
  requestAnimationFrame(() => {
    // この rAF は現在のフレームのレンダリング前に実行
    requestAnimationFrame(() => {
      // この rAF は次のフレームのレンダリング前に実行
      // つまり、前のフレームのレンダリング（Paint）完了後
      callback();
    });
  });
}
 
// 使用例: DOM 変更後に「描画完了」を検知
element.style.display = 'block';
afterNextPaint(() => {
  // ここでは element が画面上に描画されていることが期待できる
  const rect = element.getBoundingClientRect();
  console.log('Element is now visible at:', rect);
});

// async 関数内での this の挙動
class Timer {
  name = 'MyTimer';
 
  async start() {
    console.log(this.name);    // 'MyTimer' （同期部分）
 
    await Promise.resolve();
    console.log(this.name);    // 'MyTimer' （this は保持される）
 
    // しかし、コールバックとして渡した場合は異なる
    setTimeout(function() {
      // console.log(this.name); // undefined （this が失われる）
    }, 0);
 
    setTimeout(() => {
      console.log(this.name);   // 'MyTimer' （arrow function で this 保持）
    }, 0);
  }
}
 
// await 前後でマイクロタスクの実行順序が変わるケース
async function tricky() {
  console.log('1');
  await null;           // マイクロタスク境界
  console.log('2');
  await null;           // マイクロタスク境界
  console.log('3');
}
 
console.log('A');
tricky();
console.log('B');
Promise.resolve().then(() => console.log('C'));
 
// 出力: A, 1, B, C, 2, 3
// 解説:
// 同期: A, 1（await null まで）, B
// マイクロタスク: C（Promise.then）, 2（await null の継続）
//   ※ await null の継続は Promise.resolve(null).then(() => ...) と等価
//   C と 2 の順序は、C が先に登録されているため C が先
// 次のマイクロタスク: 3（2の await null の継続）

// 問題1
console.log('start');
 
setTimeout(() => console.log('timeout'), 0);
 
Promise.resolve()
  .then(() => console.log('promise 1'))
  .then(() => console.log('promise 2'));
 
queueMicrotask(() => console.log('microtask'));
 
console.log('end');

// 演習2のスケルトン
function createCountdown(element, from, onComplete) {
  let startTime = null;
  let currentCount = from;
  let animationId = null;
 
  function tick(timestamp) {
    // ここを実装せよ
  }
 
  animationId = requestAnimationFrame(tick);
 
  // キャンセル関数を返す
  return () => {
    if (animationId !== null) {
      cancelAnimationFrame(animationId);
      animationId = null;
    }
  };
}

// 演習3のスケルトン
class PriorityTaskScheduler {
  #queues = { high: [], normal: [], low: [] };
  #isRunning = false;
  #frameBudget;
 
  constructor(frameBudgetMs = 8) {
    this.#frameBudget = frameBudgetMs;
  }
 
  schedule(task, priority = 'normal') {
    // ここを実装せよ
    // task は { id: string, run: () => void } の形式
  }
 
  cancel(taskId) {
    // ここを実装せよ
  }
 
  #processQueue() {
    // ここを実装せよ
  }
}

console.log('1: 同期コード');
 
setTimeout(() => console.log('2: マクロタスク'), 0);
 
Promise.resolve().then(() => {
  console.log('3: マイクロタスク');
  Promise.resolve().then(() => console.log('4: ネストされたマイクロタスク'));
});
 
queueMicrotask(() => console.log('5: queueMicrotask'));
 
console.log('6: 同期コード終了');
 
// 出力順序:
// 1: 同期コード
// 6: 同期コード終了
// 3: マイクロタスク
// 5: queueMicrotask
// 4: ネストされたマイクロタスク
// 2: マクロタスク

// ブラウザとNode.jsで動作が異なる例
setTimeout(() => console.log('timeout 1'), 0);
setImmediate(() => console.log('immediate 1'));  // Node.js のみ
 
// Node.js では実行順序が不定（タイマーの精度による）
// ブラウザでは setImmediate がサポートされていない

// マイクロタスク処理のタイミング
setTimeout(() => {
  console.log('timeout');
  Promise.resolve().then(() => console.log('microtask in timeout'));
}, 0);
 
setTimeout(() => console.log('timeout 2'), 0);
 
// ブラウザ: timeout → microtask in timeout → timeout 2
// Node.js v11+: 同じ（ブラウザ互換の挙動）
// Node.js v10以前: timeout → timeout 2 → microtask in timeout

// 悪い例: 長時間ブロック
function processLargeArray(items) {
  items.forEach(item => {
    heavyComputation(item);  // 各処理に10ms かかる
  });
  // 1000件なら10秒間 UI がブロックされる
}
 
// 良い例: タスク分割
async function processLargeArrayChunked(items, chunkSize = 100) {
  for (let i = 0; i < items.length; i += chunkSize) {
    const chunk = items.slice(i, i + chunkSize);
    chunk.forEach(item => heavyComputation(item));
 
    // チャンクごとにメインスレッドに制御を返す
    await new Promise(resolve => setTimeout(resolve, 0));
  }
}

// メインスレッド
const worker = new Worker('heavy-worker.js');
worker.postMessage({ data: largeDataset });
worker.onmessage = (event) => {
  updateUI(event.data.result);
};
 
// heavy-worker.js
self.onmessage = (event) => {
  const result = performHeavyComputation(event.data.data);
  self.postMessage({ result });
};

function processBackgroundTasks(tasks) {
  function processTasks(deadline) {
    while (deadline.timeRemaining() > 0 && tasks.length > 0) {
      const task = tasks.shift();
      task();
    }
 
    if (tasks.length > 0) {
      requestIdleCallback(processTasks);
    }
  }
 
  requestIdleCallback(processTasks);
}
 
// 使用例
const backgroundTasks = [
  () => preloadImage('img1.jpg'),
  () => preloadImage('img2.jpg'),
  () => buildSearchIndex(),
];
processBackgroundTasks(backgroundTasks);

// 高優先度タスク（ユーザーインタラクション）
scheduler.postTask(() => {
  handleUserClick();
}, { priority: 'user-blocking' });
 
// 中優先度タスク（レンダリング更新）
scheduler.postTask(() => {
  updateChart();
}, { priority: 'user-visible' });
 
// 低優先度タスク（アナリティクス送信）
scheduler.postTask(() => {
  sendAnalytics();
}, { priority: 'background' });

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.warn('Long task detected:', {
      duration: entry.duration,
      startTime: entry.startTime,
    });
  }
});
 
observer.observe({ entryTypes: ['longtask'] });