← Prototypes & Inheritance Regular Expressions →

Event Loop & Concurrency

JavaScript's event loop is what makes single-threaded asynchronous programming possible. Understanding it is key to writing efficient, non-blocking code.

🤔 What is the Event Loop?

The Event Loop is JavaScript's concurrency model that allows non-blocking I/O operations despite being single-threaded. It continuously checks the call stack and processes tasks from queues.

Single-threaded - Only one call stack
Non-blocking - Async operations don't block main thread
Event-driven - Responds to events and callbacks
Concurrent - Handles multiple operations seemingly simultaneously

💡 Event Loop Components

Call Stack - Executes synchronous code
Web APIs - Browser-provided async APIs
Callback Queue - Holds completed async callbacks
Microtask Queue - Higher priority than callback queue
Event Loop - Coordinates everything

The Magic Formula

JavaScript Runtime + Web APIs + Event Loop + Task Queues = Non-blocking Concurrency

📝 Event Loop Basics

Understanding the order of execution with microtasks and macrotasks.

JavaScript Editor

// Understanding the Event Loop
console.log('=== JavaScript Event Loop ===');

// JavaScript is single-threaded but non-blocking
// How? Through the event loop!

console.log('1. Start');

// Macro task (setTimeout)
setTimeout(() => {
  console.log('2. Timeout callback');
}, 0);

// Micro task (Promise)
Promise.resolve().then(() => {
  console.log('3. Promise callback');
});

console.log('4. End');

// Output order:
// 1. Start
// 4. End
// 3. Promise callback (microtask)
// 2. Timeout callback (macrotask)

// Why this order?
// 1. Synchronous code runs first
// 2. Microtasks (Promises) run before macrotasks (setTimeout)
// 3. Event loop priority: Call Stack → Microtasks → Macrotasks

console.log('\n=== Event Loop Phases ===');

// Demonstrate different task types
setTimeout(() => console.log('Macrotask: Timeout 1'), 0);
setTimeout(() => console.log('Macrotask: Timeout 2'), 0);

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

queueMicrotask(() => {
  console.log('Microtask: queueMicrotask');
});

console.log('Synchronous: Start');

// Nested example
Promise.resolve().then(() => {
  console.log('Promise 1');
  
  Promise.resolve().then(() => {
    console.log('Nested Promise');
  });
});

setTimeout(() => {
  console.log('Timeout 1');
  
  Promise.resolve().then(() => {
    console.log('Promise in Timeout');
  });
}, 0);

console.log('Synchronous: End');

Execution Order Rules:

Execute all synchronous code (call stack)
Execute all microtasks (Promise callbacks, queueMicrotask)
Execute one macrotask (setTimeout, setInterval, I/O)
Repeat from step 2

📚 Call Stack & Execution Context

How JavaScript manages function execution with the call stack.

JavaScript Editor

// Call Stack and Execution Context
console.log('=== Call Stack ===');

function first() {
  console.log('First function starts');
  second();
  console.log('First function ends');
}

function second() {
  console.log('Second function starts');
  third();
  console.log('Second function ends');
}

function third() {
  console.log('Third function starts');
  console.trace('Stack trace from third()');
  console.log('Third function ends');
}

console.log('Global context starts');
first();
console.log('Global context ends');

// Stack visualization:
// 1. Global context pushed
// 2. first() pushed
// 3. second() pushed
// 4. third() pushed
// 5. third() popped
// 6. second() popped
// 7. first() popped
// 8. Global context popped

console.log('\n=== Stack Overflow ===');

// Recursive function without base case causes stack overflow
function recursive() {
  recursive(); // Infinite recursion
}

// Uncomment to see stack overflow (crashes page)
// recursive();

// Proper recursive function with base case
function factorial(n) {
  console.log(`factorial(${n}) called`);
  
  if (n <= 1) {
    console.log('Base case reached, unwinding stack');
    return 1;
  }
  
  const result = n * factorial(n - 1);
  console.log(`factorial(${n}) returning ${result}`);
  return result;
}

console.log('\nFactorial of 5:');
console.log('Result:', factorial(5));

console.log('\n=== Error Stack Traces ===');

function outer() {
  middle();
}

function middle() {
  inner();
}

function inner() {
  // Create an error to see stack trace
  const error = new Error('Something went wrong!');
  console.log('Stack trace:', error.stack);
  
  // Also can use console.trace()
  console.trace('Trace from inner()');
}

outer();

Call Stack Concepts:

LIFO - Last In, First Out structure
Execution Context - Environment for code execution
Stack Frame - Each function call creates one
Stack Overflow - Too many recursive calls

Debugging Tools:

console.trace() - Print stack trace
Error().stack - Get stack trace as string
Browser DevTools - Call stack visualization
Debugger statements - Pause execution

📊 Task Queues & Priorities

Multiple queues with different priorities in the event loop.

JavaScript Editor

// Task Queues and Priorities
console.log('=== Task Queues ===');

// JavaScript has multiple queues with different priorities

console.log('1. Script start');

// Macro Task Queue (Task Queue)
setTimeout(() => console.log('2. setTimeout 1 (macrotask)'), 0);
setTimeout(() => console.log('3. setTimeout 2 (macrotask)'), 0);

// Micro Task Queue (Job Queue)
Promise.resolve()
  .then(() => console.log('4. Promise 1 (microtask)'))
  .then(() => console.log('5. Promise 2 (microtask)'));

// requestAnimationFrame (next animation frame)
requestAnimationFrame(() => {
  console.log('6. requestAnimationFrame (animation task)');
});

// requestIdleCallback (when browser is idle)
if ('requestIdleCallback' in window) {
  requestIdleCallback(() => {
    console.log('7. requestIdleCallback (idle task)');
  });
}

// setImmediate (Node.js only, not in browsers)
// setImmediate(() => console.log('setImmediate'));

// Message Channel (macrotask)
const channel = new MessageChannel();
channel.port1.onmessage = () => {
  console.log('8. MessageChannel (macrotask)');
};
channel.port2.postMessage('ping');

// postMessage (macrotask)
window.postMessage('test', '*');
window.addEventListener('message', () => {
  console.log('9. postMessage (macrotask)');
});

// MutationObserver (microtask)
const observer = new MutationObserver(() => {
  console.log('10. MutationObserver (microtask)');
});
observer.observe(document.body, { childList: true });
document.body.appendChild(document.createElement('div'));

console.log('11. Script end');

// Priority order (simplified):
// 1. Synchronous code
// 2. Microtasks (Promises, queueMicrotask, MutationObserver)
// 3. Animation callbacks (requestAnimationFrame)
// 4. Macrotasks (setTimeout, setInterval, MessageChannel, postMessage)
// 5. Idle callbacks (requestIdleCallback)

console.log('\n=== Nested Tasks ===');

// Microtasks can schedule more microtasks
Promise.resolve().then(() => {
  console.log('Microtask 1');
  
  Promise.resolve().then(() => {
    console.log('Nested Microtask 1.1');
    
    Promise.resolve().then(() => {
      console.log('Deeply Nested Microtask 1.1.1');
    });
  });
  
  queueMicrotask(() => {
    console.log('queueMicrotask in Promise');
  });
});

// Macrotasks can schedule microtasks
setTimeout(() => {
  console.log('Macrotask 1');
  
  Promise.resolve().then(() => {
    console.log('Microtask in Macrotask');
  });
}, 0);

console.log('\n=== Starvation Example ===');

// Microtask starvation - if microtasks keep adding more microtasks,
// macrotasks never get a chance to run

function causeStarvation() {
  Promise.resolve().then(() => {
    console.log('Microtask causing starvation');
    causeStarvation(); // Recursive microtask
  });
}

// Uncomment to see starvation (will freeze page)
// causeStarvation();

// setTimeout will never run if uncommented above
setTimeout(() => {
  console.log('This never runs during starvation');
}, 100);

Queue Priority Order:

Microtasks: Promises, queueMicrotask, MutationObserver
Animation Callbacks: requestAnimationFrame
Macrotasks: setTimeout, setInterval, I/O, UI rendering
Idle Callbacks: requestIdleCallback

⚡ Async Patterns

Different patterns for asynchronous programming and performance optimization.

JavaScript Editor

// Async Patterns and Performance
console.log('=== Async Patterns ===');

// 1. Blocking vs Non-blocking
console.log('\n=== 1. Blocking Operation ===');

function blockingOperation(duration) {
  const start = Date.now();
  while (Date.now() - start < duration) {
    // Blocking loop - DON'T DO THIS IN REAL CODE
  }
  console.log(`Blocked for ${duration}ms`);
}

console.log('Before blocking');
// blockingOperation(1000); // Would block for 1 second
console.log('After blocking');

console.log('\n=== 2. Non-blocking with setTimeout ===');

function nonBlockingOperation(duration, callback) {
  setTimeout(() => {
    console.log(`Non-blocking finished after ${duration}ms`);
    callback();
  }, duration);
}

console.log('Before non-blocking');
nonBlockingOperation(1000, () => {
  console.log('Callback executed');
});
console.log('After non-blocking (this logs immediately)');

console.log('\n=== 3. Chaining Async Operations ===');

// Callback hell (old way)
setTimeout(() => {
  console.log('Step 1');
  setTimeout(() => {
    console.log('Step 2');
    setTimeout(() => {
      console.log('Step 3');
      setTimeout(() => {
        console.log('Step 4');
      }, 100);
    }, 100);
  }, 100);
}, 100);

// Promises (better)
function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

delay(100)
  .then(() => {
    console.log('Promise Step 1');
    return delay(100);
  })
  .then(() => {
    console.log('Promise Step 2');
    return delay(100);
  })
  .then(() => {
    console.log('Promise Step 3');
    return delay(100);
  })
  .then(() => {
    console.log('Promise Step 4');
  });

// Async/Await (cleanest)
async function runSteps() {
  await delay(100);
  console.log('Async Step 1');
  
  await delay(100);
  console.log('Async Step 2');
  
  await delay(100);
  console.log('Async Step 3');
  
  await delay(100);
  console.log('Async Step 4');
}

runSteps();

console.log('\n=== 4. Parallel Execution ===');

// Sequential (slow)
async function sequential() {
  console.time('Sequential');
  
  await delay(300); // Task 1
  await delay(300); // Task 2
  await delay(300); // Task 3
  
  console.timeEnd('Sequential');
  return 'Sequential done';
}

// Parallel (fast)
async function parallel() {
  console.time('Parallel');
  
  const [result1, result2, result3] = await Promise.all([
    delay(300), // Task 1
    delay(300), // Task 2
    delay(300)  // Task 3
  ]);
  
  console.timeEnd('Parallel');
  return 'Parallel done';
}

sequential().then(console.log);
parallel().then(console.log);

console.log('\n=== 5. Throttling and Debouncing ===');

// Debounce: Execute after pause
function debounce(func, wait) {
  let timeout;
  return function executedFunction(...args) {
    const later = () => {
      clearTimeout(timeout);
      func(...args);
    };
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
  };
}

// Throttle: Execute at most once per interval
function throttle(func, limit) {
  let inThrottle;
  return function(...args) {
    if (!inThrottle) {
      func.apply(this, args);
      inThrottle = true;
      setTimeout(() => inThrottle = false, limit);
    }
  };
}

// Example: Search input
const searchInput = document.createElement('input');
searchInput.placeholder = 'Type to search...';

const debouncedSearch = debounce((query) => {
  console.log(`Searching for: "${query}"`);
}, 300);

const throttledScroll = throttle((position) => {
  console.log(`Scrolled to: ${position}`);
}, 100);

// Simulate user input
setTimeout(() => debouncedSearch('a'), 0);
setTimeout(() => debouncedSearch('ab'), 50);
setTimeout(() => debouncedSearch('abc'), 100);
setTimeout(() => debouncedSearch('abcd'), 150);

console.log('\n=== 6. Web Workers (True Parallelism) ===');

// Web Workers run in separate threads
function createWorker() {
  const workerCode = `
    self.onmessage = function(e) {
      console.log('Worker received:', e.data);
      
      // Simulate heavy computation
      let sum = 0;
      for (let i = 0; i < 1e7; i++) {
        sum += Math.random();
      }
      
      self.postMessage({ result: sum, input: e.data });
    };
  `;
  
  const blob = new Blob([workerCode], { type: 'application/javascript' });
  const worker = new Worker(URL.createObjectURL(blob));
  
  worker.onmessage = (e) => {
    console.log('Main thread received:', e.data);
    worker.terminate();
  };
  
  worker.postMessage('Start calculation');
  
  return worker;
}

// Uncomment to test web worker
// const worker = createWorker();

console.log('\n=== 7. requestIdleCallback for Background Tasks ===');

// processInIdleTime();

Async Techniques:

Debouncing - Group rapid successive calls
Throttling - Limit calls to certain frequency
Web Workers - True parallelism for CPU-intensive tasks
requestIdleCallback - Execute during browser idle time
requestAnimationFrame - Smooth animations

🎯 Practical Example: Real-time Dashboard

Building a real-time dashboard demonstrating event loop concepts.

JavaScript Editor

// Practical Example: Real-time Dashboard
console.log('=== Real-time Dashboard Simulation ===');

class Dashboard {
  constructor() {
    this.data = {
      users: 0,
      messages: 0,
      cpu: 0,
      memory: 0
    };
    this.updateInterval = 1000; // 1 second
    this.isRunning = false;
    this.updateCallbacks = [];
    
    // DOM elements (simulated)
    this.elements = {
      users: { text: 'Users: 0' },
      messages: { text: 'Messages: 0' },
      cpu: { text: 'CPU: 0%' },
      memory: { text: 'Memory: 0%' },
      logs: []
    };
  }
  
  start() {
    if (this.isRunning) return;
    
    this.isRunning = true;
    console.log('Dashboard started');
    
    // Main update loop using requestAnimationFrame for smooth updates
    this.update();
    
    // Simulate WebSocket connection
    this.simulateWebSocket();
    
    // Simulate periodic API calls
    this.simulateAPICalls();
    
    // Simulate user interactions
    this.simulateUserInteractions();
  }
  
  stop() {
    this.isRunning = false;
    console.log('Dashboard stopped');
  }
  
  update() {
    if (!this.isRunning) return;
    
    // Use requestAnimationFrame for visual updates (synchronized with screen refresh)
    requestAnimationFrame(() => {
      // Update visual elements
      this.updateUI();
      
      // Schedule next update
      setTimeout(() => this.update(), this.updateInterval);
    });
  }
  
  updateUI() {
    // Batch DOM updates (microtask)
    queueMicrotask(() => {
      this.elements.users.text = `Users: ${this.data.users}`;
      this.elements.messages.text = `Messages: ${this.data.messages}`;
      this.elements.cpu.text = `CPU: ${this.data.cpu}%`;
      this.elements.memory.text = `Memory: ${this.data.memory}%`;
      
      console.log('UI Updated:', this.data);
      
      // Notify callbacks
      this.updateCallbacks.forEach(callback => {
        callback(this.data);
      });
    });
  }
  
  simulateWebSocket() {
    // Simulate real-time WebSocket updates
    setInterval(() => {
      // WebSocket message processing (macrotask)
      this.processWebSocketMessage({
        type: 'user_joined',
        userId: Date.now() % 1000
      });
    }, 2000);
    
    setInterval(() => {
      this.processWebSocketMessage({
        type: 'message_sent',
        messageId: Date.now() % 10000
      });
    }, 1500);
  }
  
  processWebSocketMessage(message) {
    // Process in microtask to avoid blocking
    Promise.resolve().then(() => {
      switch (message.type) {
        case 'user_joined':
          this.data.users++;
          this.addLog(`User ${message.userId} joined`);
          break;
          
        case 'message_sent':
          this.data.messages++;
          this.addLog(`Message ${message.messageId} sent`);
          break;
          
        case 'system_stats':
          this.data.cpu = message.cpu;
          this.data.memory = message.memory;
          break;
      }
    });
  }
  
  simulateAPICalls() {
    // Simulate periodic API polling
    setInterval(async () => {
      try {
        // Simulate API call
        const stats = await this.fetchSystemStats();
        
        // Update data (microtask from promise)
        this.data.cpu = stats.cpu;
        this.data.memory = stats.memory;
        
        this.addLog(`System stats updated: CPU ${stats.cpu}%, Memory ${stats.memory}%`);
      } catch (error) {
        this.addLog(`API error: ${error.message}`);
      }
    }, 3000);
  }
  
  async fetchSystemStats() {
    // Simulate async API call
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve({
          cpu: Math.floor(Math.random() * 100),
          memory: Math.floor(Math.random() * 100)
        });
      }, 500);
    });
  }
  
  simulateUserInteractions() {
    // Simulate user clicking refresh button
    setInterval(() => {
      this.handleRefreshClick();
    }, 5000);
    
    // Simulate user sending message
    setInterval(() => {
      this.handleSendMessage(`Message at ${new Date().toLocaleTimeString()}`);
    }, 7000);
  }
  
  handleRefreshClick() {
    // Debounced refresh handler
    this.debouncedRefresh(() => {
      console.log('Refreshing dashboard data...');
      
      // Simulate data refresh
      this.data.users += Math.floor(Math.random() * 3);
      this.data.messages += Math.floor(Math.random() * 5);
      
      this.addLog('Dashboard manually refreshed');
    });
  }
  
  handleSendMessage(content) {
    // Throttled message sending
    this.throttledSend(() => {
      console.log(`Sending message: "${content}"`);
      this.data.messages++;
      this.addLog(`Message sent: "${content}"`);
    });
  }
  
  debouncedRefresh(func, wait = 300) {
    // Simple debounce implementation
    if (this.refreshTimeout) clearTimeout(this.refreshTimeout);
    
    this.refreshTimeout = setTimeout(() => {
      func();
      this.refreshTimeout = null;
    }, wait);
  }
  
  throttledSend(func, limit = 1000) {
    // Simple throttle implementation
    if (!this.sendThrottle) {
      func();
      this.sendThrottle = true;
      
      setTimeout(() => {
        this.sendThrottle = false;
      }, limit);
    }
  }
  
  addLog(message) {
    const timestamp = new Date().toLocaleTimeString();
    const logEntry = `[${timestamp}] ${message}`;
    
    this.elements.logs.push(logEntry);
    
    // Keep only last 10 logs
    if (this.elements.logs.length > 10) {
      this.elements.logs.shift();
    }
    
    console.log(logEntry);
  }
  
  onUpdate(callback) {
    this.updateCallbacks.push(callback);
  }
  
  getMetrics() {
    return { ...this.data };
  }
}

// Usage example
console.log('=== Starting Dashboard ===');
const dashboard = new Dashboard();

// Add update listener
dashboard.onUpdate((data) => {
  console.log('Dashboard updated:', data);
});

// Start dashboard
dashboard.start();

// Simulate dashboard lifecycle
setTimeout(() => {
  console.log('\n=== Simulating High Load ===');
  
  // Simulate burst of WebSocket messages
  for (let i = 0; i < 10; i++) {
    setTimeout(() => {
      dashboard.processWebSocketMessage({
        type: 'message_sent',
        messageId: `burst_${i}`
      });
    }, i * 50);
  }
  
  // Simulate CPU-intensive task
  setTimeout(() => {
    console.log('Starting CPU-intensive task...');
    
    // This would block if not properly scheduled
    dashboard.debouncedRefresh(() => {
      console.log('Processing heavy computation...');
      
      // Use setTimeout to break up work
      function processChunk(start, end) {
        let sum = 0;
        for (let i = start; i < end; i++) {
          sum += Math.random();
        }
        
        if (end < 1e6) {
          // Schedule next chunk
          setTimeout(() => processChunk(end, end + 10000), 0);
        } else {
          console.log('Heavy computation completed');
        }
      }
      
      processChunk(0, 10000);
    });
  }, 2000);
}, 1000);

// Stop dashboard after 10 seconds
setTimeout(() => {
  dashboard.stop();
  console.log('\n=== Dashboard Stopped ===');
}, 10000);

// Demonstrate event loop phases with dashboard
console.log('\n=== Event Loop in Action ===');

// Synchronous
console.log('1. Dashboard initialized');

// Microtask
Promise.resolve().then(() => {
  console.log('2. Microtask: Initial data loaded');
});

// Macrotask
setTimeout(() => {
  console.log('3. Macrotask: External service connected');
  
  // Microtask inside macrotask
  Promise.resolve().then(() => {
    console.log('4. Microtask in Macrotask: Service data processed');
  });
}, 0);

// Animation frame
requestAnimationFrame(() => {
  console.log('5. Animation: Dashboard rendered');
});

// Synchronous end
console.log('6. Setup complete');

💡 Real-time App Architecture:

Use requestAnimationFrame for smooth UI updates
Debounce user input handlers
Throttle frequent updates
Use WebSockets for real-time data
Batch DOM updates in microtasks
Split heavy computations across frames

🚀 Performance Optimization

Advanced techniques for optimizing event loop performance.

JavaScript Editor

// Performance Optimization with Event Loop
console.log('=== Performance Optimization ===');

// 1. Breaking up long tasks
console.log('\n=== 1. Task Splitting ===');

// Create test array
const largeArray = new Array(10000).fill().map(() => Math.random());

// Uncomment to test (warning: may freeze temporarily)
// console.log('Bad approach:', processLargeArrayBad(largeArray));

processLargeArrayGood(largeArray).then(sum => {
  console.log('Good approach result:', sum);
});

// 2. Using requestIdleCallback
console.log('\n=== 2. Idle Time Processing ===');

if ('requestIdleCallback' in window) {
  const tasks = [
    () => console.log('Task 1: Process user data'),
    () => console.log('Task 2: Update analytics'),
    () => console.log('Task 3: Cleanup cache'),
    () => console.log('Task 4: Send metrics'),
    () => console.log('Task 5: Backup data')
  ];
  
  function processTasksDuringIdleTime() {
    let taskIndex = 0;
    
    function runNextTask(deadline) {
      while (deadline.timeRemaining() > 0 && taskIndex < tasks.length) {
        tasks[taskIndex]();
        taskIndex++;
      }
      
      if (taskIndex < tasks.length) {
        requestIdleCallback(runNextTask);
      } else {
        console.log('All background tasks completed');
      }
    }
    
    requestIdleCallback(runNextTask);
  }
  
  // processTasksDuringIdleTime();
}

// 3. Priority-based scheduling
console.log('\n=== 3. Priority Queue ===');

class PriorityScheduler {
  constructor() {
    this.highPriorityQueue = []; // User interactions, animations
    this.mediumPriorityQueue = []; // Data updates
    this.lowPriorityQueue = []; // Background tasks
    this.isProcessing = false;
  }
  
  schedule(task, priority = 'medium') {
    const queue = this.getQueue(priority);
    queue.push(task);
    
    if (!this.isProcessing) {
      this.process();
    }
  }
  
  getQueue(priority) {
    switch (priority) {
      case 'high': return this.highPriorityQueue;
      case 'medium': return this.mediumPriorityQueue;
      case 'low': return this.lowPriorityQueue;
      default: return this.mediumPriorityQueue;
    }
  }
  
  async process() {
    this.isProcessing = true;
    
    while (this.hasTasks()) {
      // Process high priority first
      if (this.highPriorityQueue.length > 0) {
        await this.executeTask(this.highPriorityQueue.shift());
      }
      // Then medium
      else if (this.mediumPriorityQueue.length > 0) {
        await this.executeTask(this.mediumPriorityQueue.shift());
      }
      // Finally low
      else if (this.lowPriorityQueue.length > 0) {
        await this.executeTask(this.lowPriorityQueue.shift());
      }
      
      // Yield to event loop between tasks
      await new Promise(resolve => setTimeout(resolve, 0));
    }
    
    this.isProcessing = false;
  }
  
  async executeTask(task) {
    console.log(`Executing task: ${task.name || 'anonymous'}`);
    return task();
  }
  
  hasTasks() {
    return this.highPriorityQueue.length > 0 ||
           this.mediumPriorityQueue.length > 0 ||
           this.lowPriorityQueue.length > 0;
  }
}

// Example usage
const scheduler = new PriorityScheduler();

scheduler.schedule(() => {
  console.log('High: User clicked button');
}, 'high');

scheduler.schedule(() => {
  console.log('Medium: Update data from API');
}, 'medium');

scheduler.schedule(() => {
  console.log('Low: Cleanup old logs');
}, 'low');

scheduler.schedule(() => {
  console.log('High: Animate element');
}, 'high');

// 4. Memory management and GC
console.log('\n=== 4. Garbage Collection ===');

// 5. Measuring task duration
console.log('\n=== 5. Performance Monitoring ===');

class PerformanceMonitor {
  constructor() {
    this.longTasks = [];
    this.threshold = 50; // 50ms threshold for "long task"
  }
  
  startMonitoring() {
    // Monitor event loop blocking
    let lastTime = performance.now();
    
    const checkBlocking = () => {
      const now = performance.now();
      const duration = now - lastTime;
      
      if (duration > this.threshold) {
        this.longTasks.push({
          duration,
          timestamp: now,
          stack: new Error().stack
        });
        
        console.warn(`Long task detected: ${duration.toFixed(2)}ms`);
      }
      
      lastTime = now;
      setTimeout(checkBlocking, this.threshold);
    };
    
    checkBlocking();
    
    // Monitor frame rate
    let frameCount = 0;
    let lastFrameTime = performance.now();
    
    const measureFPS = () => {
      frameCount++;
      const now = performance.now();
      
      if (now - lastFrameTime >= 1000) {
        const fps = (frameCount * 1000) / (now - lastFrameTime);
        console.log(`FPS: ${fps.toFixed(1)}`);
        
        if (fps < 30) {
          console.warn('Low FPS detected');
        }
        
        frameCount = 0;
        lastFrameTime = now;
      }
      
      requestAnimationFrame(measureFPS);
    };
    
    measureFPS();
  }
  
  getReport() {
    return {
      longTaskCount: this.longTasks.length,
      averageLongTaskDuration: this.longTasks.reduce((sum, t) => sum + t.duration, 0) / this.longTasks.length || 0,
      longestTask: Math.max(...this.longTasks.map(t => t.duration), 0)
    };
  }
}

const monitor = new PerformanceMonitor();
// monitor.startMonitoring();

// Simulate a long task
setTimeout(() => {
  console.log('\nSimulating long task...');
  const start = performance.now();
  while (performance.now() - start < 100) {
    // Block for 100ms
  }
  console.log('Long task completed');
}, 2000);

Optimization Strategies:

Task Splitting - Break long tasks into chunks
Idle Time Processing - Use requestIdleCallback
Priority Scheduling - Manage task importance
Memory Management - Avoid closures that capture large objects
Performance Monitoring - Track long tasks and FPS

Next Steps

Now that you understand the event loop, learn debugging techniques to troubleshoot and optimize your JavaScript applications.

← Prototypes & Inheritance Regular Expressions →

Frontend

JavaScript & Frameworks

Backend

Artificial Intelligence

Database

CSS Frameworks

Data Analytics

Digital Marketing

Frontend

Backend

Artificial Intelligence

DevOps

Database

Cyber Security

JavaScript Tutorial

Event Loop & Concurrency

🤔 What is the Event Loop?

💡 Event Loop Components

The Magic Formula

📝 Event Loop Basics

Execution Order Rules:

📚 Call Stack & Execution Context

Call Stack Concepts:

Debugging Tools:

📊 Task Queues & Priorities

Queue Priority Order:

⚡ Async Patterns

Async Techniques:

🎯 Practical Example: Real-time Dashboard

💡 Real-time App Architecture:

🚀 Performance Optimization

Optimization Strategies:

Next Steps

Follow Us

Our Tools

Our Company

Special Tools