Event Loop Architecture & UI Responsiveness: Production Deep Dive

P95 device specs:
- CPU: Snapdragon 665 (2019 mid-range Android)
- RAM: 4GB (2GB available to browser)
- Network: 3G (2Mbps, 300ms RTT)
- Thermal state: Throttled after 30s continuous use

User expectation:
- INP < 200ms (Google Search Core Web Vitals)
- Scroll jank: 0 dropped frames
- Animation: Consistent 60fps (16.67ms budget)
- Input latency: < 50ms perceived delay

Event Loop Phases (per iteration):
1. Select oldest task from task queue
2. Execute task to completion
3. Process all microtasks (until queue empty)
4. Perform rendering opportunity check
5. If rendering needed:
   a. Run requestAnimationFrame callbacks
   b. Perform style/layout calculations
   c. Paint
   d. Composite
6. Process requestIdleCallback (if time remains)
7. Repeat

Priority Level | Queue Type                    | Examples
---------------|-------------------------------|----------------------------------
P0 (Critical)  | Discrete input events         | click, keypress, touchstart
P1 (High)      | Continuous input events       | scroll, mousemove, touchmove
P2 (Normal)    | Timer callbacks               | setTimeout, setInterval
P3 (Low)       | Network I/O                   | fetch responses, XHR completion
P4 (Idle)      | Background work               | requestIdleCallback, background sync
P5 (Deferred)  | Non-urgent updates            | Lazy-loaded component hydration

// chromium/third_party/blink/renderer/platform/scheduler/main_thread/
// main_thread_task_queue.h

enum class QueuePriority {
  kControlPriority,        // Internal browser tasks
  kHighestPriority,        // User-blocking input
  kVeryHighPriority,       // Continuation of user input
  kHighPriority,           // requestAnimationFrame
  kNormalPriority,         // setTimeout(0), postMessage
  kLowPriority,            // Network responses
  kBestEffortPriority,     // requestIdleCallback
};

// mozilla-central/dom/base/PrioritizedEventQueue.h

enum class EventPriority : uint8_t {
  Input,              // Input events (highest)
  Resize,             // Resize/scroll
  Normal,             // setTimeout, fetch callbacks
  Deferred,           // IntersectionObserver
  Idle,               // requestIdleCallback
};

// Task execution timeline
console.log('1: Task start');

setTimeout(() => console.log('5: Next task'), 0);

Promise.resolve()
  .then(() => console.log('2: Microtask 1'))
  .then(() => console.log('3: Microtask 2'));

console.log('4: Task end');

// Output: 1 → 4 → 2 → 3 → 5

// ANTI-PATTERN: Microtask infinite loop blocks rendering
function processChunk(data, index = 0) {
  // Process one item
  processItem(data[index]);

  if (index < data.length - 1) {
    // BUG: This prevents rendering until all items processed
    Promise.resolve().then(() => processChunk(data, index + 1));
  }
}

// With 100k items, this blocks rendering for 2000ms+
processChunk(largeDataset);

// Impact on INP (Interaction to Next Paint)
const button = document.querySelector('button');

button.addEventListener('click', () => {
  const start = performance.now();

  // 10k microtasks = ~150ms block (P95 device)
  let count = 10000;
  function scheduleNext() {
    if (--count > 0) {
      Promise.resolve().then(scheduleNext);
    } else {
      console.log('Blocked for:', performance.now() - start, 'ms');
    }
  }
  scheduleNext();

  // User expects immediate visual feedback
  // But rendering blocked until all microtasks complete
});

// Measured on Snapdragon 665:
// - 1k microtasks: 15ms (acceptable)
// - 10k microtasks: 150ms (poor INP)
// - 100k microtasks: 1500ms (catastrophic)

// CORRECT: Yield to browser between chunks
async function processChunkYielding(data, index = 0) {
  const BATCH_SIZE = 100;

  while (index < data.length) {
    // Process batch
    const end = Math.min(index + BATCH_SIZE, data.length);
    for (let i = index; i < end; i++) {
      processItem(data[i]);
    }

    // Yield to browser (allows rendering, input handling)
    await yieldToMain();
    index = end;
  }
}

// Scheduler API (Chrome 94+)
function yieldToMain() {
  if ('scheduler' in window && 'yield' in scheduler) {
    return scheduler.yield();
  }
  // Fallback: setTimeout yields to next task
  return new Promise(resolve => setTimeout(resolve, 0));
}

sequenceDiagram
    participant JS as JavaScript Task
    participant MT as Microtask Queue
    participant RAF as requestAnimationFrame
    participant Style as Style Calculation
    participant Layout as Layout
    participant Paint as Paint
    participant Composite as Composite

    JS->>JS: Execute task (5ms)
    JS->>MT: Drain microtasks (2ms)
    MT->>RAF: Run rAF callbacks (3ms)
    RAF->>Style: Recalculate styles (1ms)
    Style->>Layout: Reflow (2ms)
    Layout->>Paint: Paint layers (2ms)
    Paint->>Composite: Composite (1ms)

    Note over JS,Composite: Total frame budget: 16.67ms @ 60fps

Target: 60fps = 16.67ms per frame
Breakdown:
- JavaScript execution:         5-7ms (30-42%)
- Microtask processing:         1-2ms (6-12%)
- requestAnimationFrame:        2-3ms (12-18%)
- Style recalculation:          1-2ms (6-12%)
- Layout:                       2-4ms (12-24%)
- Paint:                        1-3ms (6-18%)
- Composite:                    1-2ms (6-12%)
---
Total:                         13-23ms

Snapdragon 665 @ 2.0GHz → 0.8GHz (throttled):
- 2.5x slower JavaScript execution
- Same 16.67ms frame budget
- Effective JS budget: 2-3ms (not 7ms)

// Execution order demonstration
console.log('1: Task start');

requestAnimationFrame(() => {
  console.log('3: rAF callback (before paint)');
});

Promise.resolve().then(() => {
  console.log('2: Microtask (after task, before rAF)');
});

// Output: 1 → 2 → 3 (then rendering)

// ANTI-PATTERN: Expensive computation in rAF
requestAnimationFrame(() => {
  // DOM reads trigger synchronous layout
  elements.forEach(el => {
    const height = el.offsetHeight;  // Layout!
    el.style.width = height + 'px';  // Style change!
  });
  // With 1000 elements: 150ms+ → 9 dropped frames
});

requestAnimationFrame(() => {
  // Phase 1: Read all layout properties
  const heights = elements.map(el => el.offsetHeight);

  // Phase 2: Write all style changes
  elements.forEach((el, i) => {
    el.style.width = heights[i] + 'px';
  });

  // Result: Single layout pass instead of N
  // 1000 elements: 2ms vs 350ms (175x faster)
});

// Long Task API (Performance Observer)
const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.warn('Long task detected:', {
      duration: entry.duration,          // ms blocked
      startTime: entry.startTime,
      attribution: entry.attribution[0]  // Script responsible
    });
  }
});

observer.observe({ entryTypes: ['longtask'] });

INP = Input Delay + Processing Time + Render Delay

Input Delay:     Time waiting for long task to complete
Processing Time: Event handler execution
Render Delay:    Time until next frame painted

// Long task blocks event processing
function expensiveOperation() {
  const start = performance.now();

  // Synchronous CPU work
  let result = 0;
  for (let i = 0; i < 50_000_000; i++) {
    result += Math.sqrt(i);
  }

  console.log('Blocked for:', performance.now() - start);
  // Desktop: 150ms
  // Throttled mobile: 375ms
}

button.addEventListener('click', () => {
  // User sees visual feedback only after expensiveOperation completes
  button.classList.add('clicked');
});

// User clicks during expensiveOperation:
// - Input queued, waits 375ms (input delay)
// - Event handler runs: 5ms (processing)
// - Render pipeline: 16ms (render delay)
// - Total INP: 375 + 5 + 16 = 396ms (POOR)

INP < 200ms:  Good
INP < 500ms:  Needs Improvement
INP ≥ 500ms:  Poor

// Split 100ms task into 5x 20ms tasks
async function processBatches(data) {
  const BATCH_SIZE = 1000;

  for (let i = 0; i < data.length; i += BATCH_SIZE) {
    const batch = data.slice(i, i + BATCH_SIZE);
    processBatch(batch);  // 20ms

    // Yield to browser
    await new Promise(resolve => setTimeout(resolve, 0));
  }
}

// Measured actual delays
const delays = [];
for (let i = 0; i < 100; i++) {
  const start = performance.now();
  await new Promise(resolve => setTimeout(resolve, 0));
  delays.push(performance.now() - start);
}

console.log('Average delay:', delays.reduce((a, b) => a + b) / delays.length);
// Chrome: 4.2ms
// Firefox: 4.0ms
// Safari: 4.1ms

async function processBatchesOptimal(data) {
  const BATCH_SIZE = 1000;

  for (let i = 0; i < data.length; i += BATCH_SIZE) {
    const batch = data.slice(i, i + BATCH_SIZE);
    processBatch(batch);

    // Yield with continuation priority
    await scheduler.yield();
  }
}

// Yield utility with progressive enhancement
const yield = (() => {
  // Tier 1: Scheduler.yield (best)
  if ('scheduler' in window && 'yield' in scheduler) {
    return () => scheduler.yield();
  }

  // Tier 2: Scheduler.postTask with 'user-blocking' priority
  if ('scheduler' in window && 'postTask' in scheduler) {
    return () => scheduler.postTask(() => {}, { priority: 'user-blocking' });
  }

  // Tier 3: MessageChannel (0ms delay, but no priority)
  if (typeof MessageChannel !== 'undefined') {
    const channel = new MessageChannel();
    return () => new Promise(resolve => {
      channel.port2.addEventListener('message', () => resolve(), { once: true });
      channel.port1.postMessage(null);
    });
  }

  // Tier 4: setTimeout(0) fallback
  return () => new Promise(resolve => setTimeout(resolve, 0));
})();

// Usage
async function processWithYield(data) {
  for (let i = 0; i < data.length; i += 100) {
    processBatch(data.slice(i, i + 100));
    await yield();
  }
}

// React Fiber work loop (simplified)
function workLoopConcurrent() {
  while (workInProgress !== null && !shouldYield()) {
    performUnitOfWork(workInProgress);
  }
}

function shouldYield() {
  const currentTime = performance.now();

  // Yield if:
  // 1. Spent > 5ms on this task
  // 2. Higher priority update available
  // 3. Browser needs to paint
  return (
    currentTime - startTime > 5 ||
    hasPendingDiscreteUpdates() ||
    needsPaint()
  );
}

// React's internal scheduler
const channel = new MessageChannel();
const port = channel.port2;

channel.port1.onmessage = performWorkUntilDeadline;

function schedulePerformWorkUntilDeadline() {
  port.postMessage(null);
}

// Work loop with yielding
function performWorkUntilDeadline() {
  const startTime = performance.now();

  while (hasWorkToDo()) {
    performUnitOfWork();

    if (performance.now() - startTime > 5) {
      // Yield to browser
      schedulePerformWorkUntilDeadline();
      return;
    }
  }
}

import { startTransition, useTransition } from 'react';

function SearchResults() {
  const [query, setQuery] = useState('');
  const [isPending, startTransition] = useTransition();

  const handleInput = (e) => {
    const value = e.target.value;

    // Urgent: Update input immediately (synchronous)
    setQuery(value);

    // Non-urgent: Update results (interruptible)
    startTransition(() => {
      setResults(expensiveFilter(value));
    });
  };

  return (
    <input
      value={query}
      onChange={handleInput}
      // Input always responsive
    />
  );
}

User types "a":
1. onChange fires (P0: discrete input)
2. setQuery('a') → synchronous render (5ms)
3. startTransition → schedules deferred render
4. Input updates immediately (responsive)
5. Browser handles scroll, clicks (not blocked)
6. Later: transition render executes in 5ms chunks

User types "ab" before transition completes:
1. onChange fires (P0: discrete input)
2. React interrupts transition render
3. setQuery('ab') → immediate render
4. New transition scheduled
5. Previous transition work discarded

requestIdleCallback((deadline) => {
  console.log('Time remaining:', deadline.timeRemaining(), 'ms');
  console.log('Did timeout:', deadline.didTimeout);

  while (deadline.timeRemaining() > 0 && hasWork()) {
    doWork();
  }

  if (hasWork()) {
    // More work needed, reschedule
    requestIdleCallback(callback);
  }
});

Frame timeline (60fps = 16.67ms budget):

|<-- Task -->|<-- Microtasks -->|<-- rAF -->|<-- Render -->|<--- IDLE --->|
0ms         5ms                7ms         10ms          13ms          16.67ms
                                                         └─ Idle: 3.67ms ─┘

If render completes with time remaining before next vsync:
→ Browser enters idle period
→ requestIdleCallback fires

// Measure idle callback timing
const measurements = [];
for (let i = 0; i < 100; i++) {
  requestIdleCallback((deadline) => {
    measurements.push(deadline.timeRemaining());
  });
}

// Chrome: 0-10ms (aggressive idle detection)
// Firefox: 0-50ms (conservative, longer idle periods)
// Safari: Not implemented (use setTimeout fallback)

class AnalyticsBuffer {
  constructor() {
    this.events = [];
    this.flushScheduled = false;
  }

  track(event) {
    this.events.push(event);

    if (!this.flushScheduled) {
      this.scheduleFlush();
    }
  }

  scheduleFlush() {
    this.flushScheduled = true;

    // Try idle callback first (non-blocking)
    if ('requestIdleCallback' in window) {
      requestIdleCallback(
        (deadline) => this.flush(deadline),
        { timeout: 2000 }  // Guarantee flush within 2s
      );
    } else {
      // Fallback: defer with setTimeout
      setTimeout(() => this.flush(), 100);
    }
  }

  flush(deadline) {
    const batchSize = 50;

    while (this.events.length > 0) {
      // Check remaining time (if available)
      if (deadline && deadline.timeRemaining() < 5) {
        // Not enough time, reschedule
        this.scheduleFlush();
        return;
      }

      // Send batch
      const batch = this.events.splice(0, batchSize);
      navigator.sendBeacon('/analytics', JSON.stringify(batch));
    }

    this.flushScheduled = false;
  }
}

// Usage
const analytics = new AnalyticsBuffer();

// High-frequency events don't block UI
document.addEventListener('scroll', () => {
  analytics.track({ type: 'scroll', y: window.scrollY });
});

// Priority levels
const priorities = ['user-blocking', 'user-visible', 'background'];

// Schedule tasks with explicit priority
scheduler.postTask(
  () => handleCriticalInput(),
  { priority: 'user-blocking' }
);

scheduler.postTask(
  () => updateSecondaryUI(),
  { priority: 'user-visible' }
);

scheduler.postTask(
  () => prefetchNextPage(),
  { priority: 'background' }
);

user-blocking:  Must complete for user to continue
                - Input event handlers
                - Critical rendering
                - Form validation

user-visible:   Visible to user, but not blocking
                - Secondary UI updates
                - Animation updates
                - Non-critical rendering

background:     User unaware, deferrable
                - Prefetching
                - Analytics
                - Preloading

const controller = new TaskController({ priority: 'user-visible' });

const task = scheduler.postTask(
  async () => {
    // Long-running work
    for (let i = 0; i < 1000; i++) {
      processItem(i);
      await scheduler.yield();  // Check for cancellation
    }
  },
  { signal: controller.signal }
);

// User navigates away → cancel background work
window.addEventListener('beforeunload', () => {
  controller.abort();
});

// User interaction → boost priority
button.addEventListener('click', () => {
  controller.setPriority('user-blocking');
});

class SearchAutocomplete {
  constructor() {
    this.currentController = null;
  }

  async handleInput(query) {
    // Cancel previous search
    this.currentController?.abort();

    // Create new controller
    this.currentController = new TaskController({
      priority: 'user-visible'
    });

    try {
      // Fetch with cancellation
      const results = await scheduler.postTask(
        () => fetch(`/search?q=${query}`).then(r => r.json()),
        { signal: this.currentController.signal }
      );

      // Render results
      this.renderResults(results);
    } catch (e) {
      if (e.name === 'AbortError') {
        // Expected: user typed more characters
        console.log('Search cancelled');
      } else {
        console.error('Search failed:', e);
      }
    }
  }
}

Browser Process
├─ Main Thread (UI, I/O coordination)
├─ I/O Thread (IPC, network)
└─ Cache Thread

Renderer Process (per tab/site)
├─ Main Thread (JavaScript, DOM, layout, paint)
├─ Compositor Thread (scrolling, compositing)
├─ Raster Threads (tile rasterization)
└─ Worker Threads (Web Workers, Service Workers)

// Task queue selection algorithm (simplified)
TaskQueue* SelectNextTaskQueue() {
  // 1. Check for pending input (highest priority)
  if (HasPendingInputEvents()) {
    return input_task_queue_;
  }

  // 2. Check if rendering needed
  if (ShouldRenderThisFrame()) {
    return render_task_queue_;
  }

  // 3. Check for pending microtasks
  if (HasPendingMicrotasks()) {
    return microtask_queue_;
  }

  // 4. Round-robin other queues based on priority
  return SelectNextNormalPriorityQueue();
}

Frame budget: 16.67ms
Render complete: 12ms
Idle time: 4.67ms

→ Fire requestIdleCallback with timeRemaining() = 4.67ms

Main Process
└─ Main Thread (strict 5ms task limit)

Content Process (per site)
├─ Main Thread (JavaScript, DOM)
├─ Compositor Thread
└─ Worker Threads

// Firefox automatically yields tasks > 5ms
function longTask() {
  const start = performance.now();

  // 50ms work on Chrome: single long task
  // 50ms work on Firefox: automatically split into 10x 5ms tasks
  while (performance.now() - start < 50) {
    // ...
  }
}

// Chrome: 1 long task (50ms)
// Firefox: ~10 tasks (5ms each with yields)

requestIdleCallback((deadline) => {
  console.log('Idle time:', deadline.timeRemaining());
});

// Chrome: 0-10ms typical
// Firefox: 0-50ms typical (more conservative)

UI Process
└─ Main Thread (UI rendering)

WebContent Process (per tab, memory limited)
├─ Main Thread (JavaScript, DOM, layout)
├─ Scrolling Thread (async scrolling only)
└─ Web Worker Threads

// Safari: requestIdleCallback is undefined
const hasIdleCallback = 'requestIdleCallback' in window;
// Chrome/Firefox: true
// Safari: false (as of Safari 17)

const requestIdleCallback =
  window.requestIdleCallback ||
  function(callback) {
    const start = Date.now();
    return setTimeout(() => {
      callback({
        didTimeout: false,
        timeRemaining: () => Math.max(0, 50 - (Date.now() - start))
      });
    }, 1);
  };

// Background tab timer throttling
setInterval(() => console.log('tick'), 1000);

// Chrome: 1000ms interval (slight drift)
// Firefox: 1000ms interval (slight drift)
// Safari: 1000ms → 10000ms after 30s background

// Comprehensive long task monitoring
class LongTaskMonitor {
  constructor() {
    this.tasks = [];
    this.setupObserver();
  }

  setupObserver() {
    if (!('PerformanceObserver' in window)) return;

    const observer = new PerformanceObserver((list) => {
      for (const entry of list.getEntries()) {
        this.recordLongTask(entry);
      }
    });

    observer.observe({
      entryTypes: ['longtask', 'event', 'measure']
    });
  }

  recordLongTask(entry) {
    const task = {
      duration: entry.duration,
      startTime: entry.startTime,
      type: entry.entryType,
      name: entry.name,
      attribution: this.getAttribution(entry)
    };

    this.tasks.push(task);

    // Alert if P95 duration exceeded
    if (entry.duration > 200) {
      this.sendAlert(task);
    }
  }

  getAttribution(entry) {
    if (!entry.attribution) return null;

    const attr = entry.attribution[0];
    return {
      containerType: attr.containerType,
      containerName: attr.containerName,
      containerSrc: attr.containerSrc
    };
  }

  getStats() {
    const durations = this.tasks.map(t => t.duration);
    return {
      count: this.tasks.length,
      p50: this.percentile(durations, 0.5),
      p95: this.percentile(durations, 0.95),
      p99: this.percentile(durations, 0.99),
      max: Math.max(...durations)
    };
  }

  percentile(arr, p) {
    const sorted = arr.slice().sort((a, b) => a - b);
    const index = Math.ceil(sorted.length * p) - 1;
    return sorted[index];
  }
}

// Usage
const monitor = new LongTaskMonitor();

setInterval(() => {
  const stats = monitor.getStats();
  console.table(stats);

  // Send to analytics
  sendMetric('long_task_p95', stats.p95);
}, 60000);

// Interaction to Next Paint tracking
class INPTracker {
  constructor() {
    this.interactions = [];
    this.setupObserver();
  }

  setupObserver() {
    if (!('PerformanceObserver' in window)) return;

    const observer = new PerformanceObserver((list) => {
      for (const entry of list.getEntries()) {
        if (entry.interactionId) {
          this.recordInteraction(entry);
        }
      }
    });

    observer.observe({
      type: 'event',
      buffered: true,
      durationThreshold: 16  // Track interactions > 16ms
    });
  }

  recordInteraction(entry) {
    const interaction = {
      id: entry.interactionId,
      type: entry.name,
      duration: entry.duration,
      startTime: entry.startTime,
      processingStart: entry.processingStart,
      processingEnd: entry.processingEnd,
      target: entry.target
    };

    this.interactions.push(interaction);

    // Alert on poor INP
    if (entry.duration > 200) {
      console.warn('Poor INP detected:', interaction);
      this.captureDebugInfo(interaction);
    }
  }

  captureDebugInfo(interaction) {
    const breakdown = {
      inputDelay: interaction.processingStart - interaction.startTime,
      processingTime: interaction.processingEnd - interaction.processingStart,
      presentationDelay: interaction.duration -
        (interaction.processingEnd - interaction.startTime)
    };

    console.table(breakdown);

    // Capture stack trace, component tree, etc.
    this.sendDebugReport({
      interaction,
      breakdown,
      componentStack: this.captureComponentStack(),
      longTasks: this.getRecentLongTasks()
    });
  }

  getINP() {
    // INP = P75 of all interaction durations
    const durations = this.interactions.map(i => i.duration);
    return this.percentile(durations, 0.75);
  }
}

// Usage
const inpTracker = new INPTracker();

// Report INP on navigation
window.addEventListener('beforeunload', () => {
  const inp = inpTracker.getINP();
  navigator.sendBeacon('/metrics', JSON.stringify({ inp }));
});

// Mark rendering phases
function renderComponent(props) {
  performance.mark('render-start');

  const result = expensiveRender(props);

  performance.mark('render-end');
  performance.measure('render', 'render-start', 'render-end');

  // Capture in Performance panel
  const measure = performance.getEntriesByName('render')[0];
  if (measure.duration > 16) {
    console.warn('Slow render:', measure.duration, 'ms');
  }

  return result;
}

// Mark long task boundaries
async function processLargeDataset(data) {
  performance.mark('process-start');

  for (let i = 0; i < data.length; i += 1000) {
    performance.mark(`batch-${i}-start`);

    await processBatch(data.slice(i, i + 1000));

    performance.mark(`batch-${i}-end`);
    performance.measure(
      `batch-${i}`,
      `batch-${i}-start`,
      `batch-${i}-end`
    );

    await scheduler.yield();
  }

  performance.mark('process-end');
  performance.measure('process-total', 'process-start', 'process-end');
}

// Extract all long measures
function analyzeLongOperations() {
  const measures = performance.getEntriesByType('measure');

  const longMeasures = measures
    .filter(m => m.duration > 50)
    .sort((a, b) => b.duration - a.duration);

  console.table(longMeasures.map(m => ({
    name: m.name,
    duration: m.duration.toFixed(2) + 'ms',
    startTime: m.startTime.toFixed(2) + 'ms'
  })));

  // Group by prefix (e.g., 'batch-*')
  const grouped = longMeasures.reduce((acc, m) => {
    const prefix = m.name.split('-')[0];
    if (!acc[prefix]) acc[prefix] = [];
    acc[prefix].push(m.duration);
    return acc;
  }, {});

  Object.entries(grouped).forEach(([prefix, durations]) => {
    console.log(`${prefix}: avg=${avg(durations).toFixed(2)}ms, ` +
                `max=${Math.max(...durations).toFixed(2)}ms`);
  });
}

// Run analysis
setTimeout(analyzeLongOperations, 10000);

class TimeSlicedProcessor {
  constructor(workFn, { timeSlice = 5, priority = 'user-visible' } = {}) {
    this.workFn = workFn;
    this.timeSlice = timeSlice;
    this.priority = priority;
  }

  async process(data) {
    const results = [];
    let index = 0;

    while (index < data.length) {
      const sliceStart = performance.now();

      // Process items until time slice exhausted
      while (
        index < data.length &&
        performance.now() - sliceStart < this.timeSlice
      ) {
        results.push(this.workFn(data[index]));
        index++;
      }

      // Yield to browser
      if (index < data.length) {
        await this.yield();
      }
    }

    return results;
  }

  async yield() {
    if ('scheduler' in window && 'postTask' in scheduler) {
      await scheduler.postTask(() => {}, { priority: this.priority });
    } else {
      await new Promise(resolve => setTimeout(resolve, 0));
    }
  }
}

// Usage
const processor = new TimeSlicedProcessor(
  (item) => expensiveTransform(item),
  { timeSlice: 5, priority: 'background' }
);

const results = await processor.process(largeDataset);

class CooperativeScheduler {
  constructor() {
    this.queues = {
      critical: [],
      high: [],
      normal: [],
      low: [],
      idle: []
    };
    this.running = false;
  }

  schedule(fn, priority = 'normal') {
    return new Promise((resolve, reject) => {
      this.queues[priority].push({ fn, resolve, reject });

      if (!this.running) {
        this.run();
      }
    });
  }

  async run() {
    this.running = true;

    while (this.hasPendingWork()) {
      const task = this.getNextTask();
      if (!task) break;

      try {
        const result = await this.executeTask(task);
        task.resolve(result);
      } catch (error) {
        task.reject(error);
      }
    }

    this.running = false;
  }

  getNextTask() {
    // Process in priority order
    const priorities = ['critical', 'high', 'normal', 'low', 'idle'];

    for (const priority of priorities) {
      if (this.queues[priority].length > 0) {
        return this.queues[priority].shift();
      }
    }

    return null;
  }

  async executeTask(task) {
    const start = performance.now();
    const result = await task.fn();
    const duration = performance.now() - start;

    // Yield if task took > 5ms
    if (duration > 5) {
      await this.yield();
    }

    return result;
  }

  async yield() {
    if ('scheduler' in window && 'yield' in scheduler) {
      await scheduler.yield();
    } else {
      await new Promise(resolve => setTimeout(resolve, 0));
    }
  }

  hasPendingWork() {
    return Object.values(this.queues).some(q => q.length > 0);
  }
}

// Usage
const scheduler = new CooperativeScheduler();

// Critical: user input response
button.addEventListener('click', async () => {
  await scheduler.schedule(
    () => updateUI(),
    'critical'
  );
});

// Normal: data processing
scheduler.schedule(
  () => processData(dataset),
  'normal'
);

// Idle: prefetching
scheduler.schedule(
  () => prefetchImages(),
  'idle'
);

class AdaptiveTimeSlicedProcessor {
  constructor(workFn) {
    this.workFn = workFn;
    this.timeSlice = this.calibrateTimeSlice();
  }

  calibrateTimeSlice() {
    // Measure device performance
    const start = performance.now();
    let iterations = 0;

    // Run for exactly 5ms
    while (performance.now() - start < 5) {
      Math.sqrt(iterations++);
    }

    // Determine time slice based on device speed
    if (iterations > 1_000_000) {
      return 10;  // High-end device: 10ms slices
    } else if (iterations > 500_000) {
      return 5;   // Mid-range device: 5ms slices
    } else {
      return 3;   // Low-end device: 3ms slices
    }
  }

  async process(data) {
    const results = [];
    let index = 0;

    while (index < data.length) {
      const sliceStart = performance.now();

      while (
        index < data.length &&
        performance.now() - sliceStart < this.timeSlice
      ) {
        results.push(this.workFn(data[index]));
        index++;
      }

      // Measure actual time taken
      const actualDuration = performance.now() - sliceStart;

      // Adjust time slice if needed
      if (actualDuration > this.timeSlice * 1.5) {
        this.timeSlice = Math.max(1, this.timeSlice - 1);
      } else if (actualDuration < this.timeSlice * 0.5) {
        this.timeSlice = Math.min(20, this.timeSlice + 1);
      }

      await this.yield();
    }

    return results;
  }

  async yield() {
    if ('scheduler' in window && 'yield' in scheduler) {
      await scheduler.yield();
    } else {
      await new Promise(resolve => setTimeout(resolve, 0));
    }
  }
}

// Scenario: Multiple third-party scripts
<script src="https://analytics.com/script.js"></script>  // 50ms
<script src="https://ads.com/script.js"></script>        // 120ms
<script src="https://chat.com/widget.js"></script>       // 80ms

// Total blocking: 250ms before your app runs
// Mobile P95: 625ms (2.5x slower)

class ThirdPartyLoader {
  constructor() {
    this.loaded = new Set();
  }

  async load(scriptUrl, priority = 'low') {
    if (this.loaded.has(scriptUrl)) return;

    // Wait for main content loaded
    await this.waitForMainContent();

    // Wait for idle time
    await this.waitForIdle();

    // Load with low priority
    await scheduler.postTask(
      () => this.injectScript(scriptUrl),
      { priority: 'background' }
    );

    this.loaded.add(scriptUrl);
  }

  waitForMainContent() {
    return new Promise(resolve => {
      if (document.readyState === 'complete') {
        resolve();
      } else {
        window.addEventListener('load', resolve, { once: true });
      }
    });
  }

  waitForIdle() {
    return new Promise(resolve => {
      if ('requestIdleCallback' in window) {
        requestIdleCallback(resolve, { timeout: 2000 });
      } else {
        setTimeout(resolve, 1000);
      }
    });
  }

  injectScript(url) {
    return new Promise((resolve, reject) => {
      const script = document.createElement('script');
      script.src = url;
      script.async = true;
      script.onload = resolve;
      script.onerror = reject;
      document.head.appendChild(script);
    });
  }
}

// Usage
const loader = new ThirdPartyLoader();

// Defer all third-party scripts
loader.load('https://analytics.com/script.js');
loader.load('https://chat.com/widget.js');

// Result: Third-party scripts load after main content interactive
// FCP: 1.2s (unchanged)
// Third-party: 3.5s (deferred, non-blocking)

Initial state: Snapdragon 665 @ 2.0GHz
After 30s video playback: 1.2GHz (40% slower)
After 60s continuous use: 0.8GHz (60% slower)
Recovery time: 120s idle

// Measure CPU throttling effect
function measureThrottling() {
  const samples = [];

  for (let i = 0; i < 100; i++) {
    const start = performance.now();

    // Standard work unit
    let result = 0;
    for (let j = 0; j < 1_000_000; j++) {
      result += Math.sqrt(j);
    }

    const duration = performance.now() - start;
    samples.push(duration);

    // Wait between samples
    await new Promise(resolve => setTimeout(resolve, 100));
  }

  return {
    initial: samples[0],
    p50: percentile(samples, 0.5),
    p95: percentile(samples, 0.95),
    max: Math.max(...samples)
  };
}

// Measured on Snapdragon 665:
// Initial: 8ms
// After 30s: 12ms (1.5x slower)
// After 60s: 20ms (2.5x slower)

class AdaptiveBatchProcessor {
  constructor() {
    this.baselineDuration = null;
    this.currentBatchSize = 1000;
  }

  async process(data) {
    const results = [];

    for (let i = 0; i < data.length; i += this.currentBatchSize) {
      const batchStart = performance.now();

      // Process batch
      const batch = data.slice(i, i + this.currentBatchSize);
      for (const item of batch) {
        results.push(this.processItem(item));
      }

      const batchDuration = performance.now() - batchStart;

      // Establish baseline on first batch
      if (this.baselineDuration === null) {
        this.baselineDuration = batchDuration;
      }

      // Detect throttling
      const slowdownFactor = batchDuration / this.baselineDuration;

      if (slowdownFactor > 1.5) {
        // CPU throttled: reduce batch size
        this.currentBatchSize = Math.max(100, this.currentBatchSize * 0.7);
        console.log('CPU throttled, reducing batch size to', this.currentBatchSize);
      } else if (slowdownFactor < 1.1 && this.currentBatchSize < 1000) {
        // CPU recovered: increase batch size
        this.currentBatchSize = Math.min(1000, this.currentBatchSize * 1.2);
      }

      await scheduler.yield();
    }

    return results;
  }
}

// Memory-intensive operation
function processLargeDataset(data) {
  return data.map(item => {
    // Allocate intermediate objects (pressure on GC)
    const temp = {
      ...item,
      processed: true,
      timestamp: Date.now(),
      metadata: { /* ... */ }
    };
    return transform(temp);
  });
}

// With 100k items × 1KB each:
// - Total allocation: 100MB
// - GC pause: 50-200ms (P95)
// - User-visible jank

// Detect GC pauses via long microtask queue drain
let lastMicrotaskTime = performance.now();

setInterval(() => {
  Promise.resolve().then(() => {
    const now = performance.now();
    const gap = now - lastMicrotaskTime;

    if (gap > 50) {
      console.warn('Potential GC pause:', gap, 'ms');
    }

    lastMicrotaskTime = now;
  });
}, 16);

class ObjectPool {
  constructor(factory, size = 1000) {
    this.factory = factory;
    this.pool = Array(size).fill(null).map(() => factory());
    this.available = [...this.pool];
  }

  acquire() {
    if (this.available.length === 0) {
      // Pool exhausted, allocate new (fallback)
      return this.factory();
    }
    return this.available.pop();
  }

  release(obj) {
    // Reset object state
    Object.keys(obj).forEach(key => delete obj[key]);
    this.available.push(obj);
  }
}

// Usage
const itemPool = new ObjectPool(() => ({}), 1000);

function processLargeDataset(data) {
  return data.map(item => {
    const temp = itemPool.acquire();

    // Use object
    Object.assign(temp, item, {
      processed: true,
      timestamp: Date.now()
    });

    const result = transform(temp);

    // Return to pool
    itemPool.release(temp);

    return result;
  });
}

// Result: 80% reduction in GC pause frequency

Use setTimeout(0):
✓ Need universal browser support
✓ Delay acceptable (background work)
✗ High-frequency yielding (excessive overhead)

Use MessageChannel:
✓ Need immediate yielding
✓ Don't need priority control
✗ Multiple priority levels required

Use scheduler.postTask():
✓ Need explicit priority control
✓ Chrome-first deployment
✗ Need Firefox/Safari support immediately

Use scheduler.yield():
✓ Same-task continuation
✓ Want to preserve priority
✗ Need to change priority mid-task

// Option 1: Microtask (immediate, blocks rendering)
class StateManagerMicrotask {
  constructor() {
    this.updates = [];
    this.scheduled = false;
  }

  setState(update) {
    this.updates.push(update);

    if (!this.scheduled) {
      this.scheduled = true;
      queueMicrotask(() => this.flush());
    }
  }

  flush() {
    const updates = this.updates;
    this.updates = [];
    this.scheduled = false;

    // Apply all updates synchronously
    this.applyUpdates(updates);
  }
}

// Option 2: Task (delayed, allows rendering)
class StateManagerTask {
  setState(update) {
    this.updates.push(update);

    if (!this.scheduled) {
      this.scheduled = true;
      setTimeout(() => this.flush(), 0);  // Next task
    }
  }
}

// Tradeoff:
// - Microtask: Updates visible in same frame (good for consistency)
// - Task: Updates delayed 4ms (bad for consistency, good for responsiveness)

async function processWithYield(data, itemsPerYield) {
  for (let i = 0; i < data.length; i += itemsPerYield) {
    const batch = data.slice(i, i + itemsPerYield);
    batch.forEach(processItem);
    await scheduler.yield();
  }
}

// Measured on Snapdragon 665:

async function processAdaptive(data) {
  let itemsPerYield = 100;  // Start conservative

  for (let i = 0; i < data.length; i += itemsPerYield) {
    const start = performance.now();

    const batch = data.slice(i, i + itemsPerYield);
    batch.forEach(processItem);

    const duration = performance.now() - start;

    // Target: 5-10ms per batch
    if (duration < 5) {
      itemsPerYield = Math.min(1000, itemsPerYield * 1.5);
    } else if (duration > 10) {
      itemsPerYield = Math.max(10, itemsPerYield * 0.7);
    }

    await scheduler.yield();
  }
}

// Future: Fine-grained priority control
const controller = new TaskController({ priority: 'user-blocking' });

// Schedule task with cancellation
const task = scheduler.postTask(async () => {
  for (let i = 0; i < 1000; i++) {
    await processItem(i);

    // Cooperative cancellation check
    if (controller.signal.aborted) {
      console.log('Task cancelled');
      return;
    }

    // Yield with priority inheritance
    await scheduler.yield();
  }
}, { signal: controller.signal });

// User navigates → cancel background work
router.on('navigate', () => controller.abort());

// User interacts → boost priority
button.addEventListener('click', () => {
  controller.setPriority('user-blocking');
});

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (entry.duration > 50) {  // Long frame
      console.warn('Long animation frame:', {
        duration: entry.duration,
        scripts: entry.scripts.map(s => ({
          name: s.name,
          duration: s.duration,
          invoker: s.invoker,
          sourceLocation: s.sourceLocation
        }))
      });
    }
  }
});

observer.observe({ type: 'long-animation-frame' });

// WASM module with threads
const wasmModule = await WebAssembly.instantiateStreaming(
  fetch('processor.wasm'),
  { env: { memory: new WebAssembly.Memory({ initial: 256, maximum: 512, shared: true }) } }
);

// Offload heavy computation
async function processInWasm(data) {
  const ptr = wasmModule.instance.exports.allocate(data.length);

  // Copy data to WASM memory
  const memory = new Uint8Array(wasmModule.instance.exports.memory.buffer);
  memory.set(data, ptr);

  // Process in WASM thread (doesn't block main thread)
  const resultPtr = await wasmModule.instance.exports.process(ptr, data.length);

  // Read result
  const result = new Uint8Array(
    wasmModule.instance.exports.memory.buffer,
    resultPtr,
    data.length
  );

  return Array.from(result);
}

// Result: 0ms main thread blocking for CPU-heavy work

<script type="speculationrules">
{
  "prerender": [
    {
      "urls": ["/products", "/checkout"],
      "eagerness": "moderate"
    }
  ]
}
</script>