JavaScript Performance Optimization

// Understanding the Main Thread
// JavaScript runs on a SINGLE thread - long tasks block EVERYTHING

// ❌ BAD - This blocks the UI for seconds
function blockingTask() {
  const start = Date.now();
  // Simulate heavy computation
  let count = 0;
  for (let i = 0; i < 100000000; i++) {
    count += Math.sqrt(i);
  }
  console.log("Blocking task took:", Date.now() - start, "ms");
  return count;
}

// ✅ GOOD - Break into chunks using setTimeout
function nonBlockingTask(callback) {
  const chunkSi
...

// Debouncing & Throttling - Essential for Event Performance

// DEBOUNCE: Wait until user STOPS doing something
function debounce(fn, delay) {
  let timeoutId;
  
  return function(...args) {
    // Cancel previous timer
    clearTimeout(timeoutId);
    
    // Set new timer
    timeoutId = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  };
}

// THROTTLE: Run at most once per interval
function throttle(fn, limit) {
  let lastCall = 0;
  
  return function(...args) {
    const n
...

// DOM Optimization - The DOM is SLOW!

// ❌ BAD - Adding elements one by one (1000 layout updates)
function slowAppend(container) {
  console.time("Slow append");
  for (let i = 0; i < 1000; i++) {
    const div = document.createElement("div");
    div.textContent = "Item " + i;
    container.appendChild(div); // Layout update each time!
  }
  console.timeEnd("Slow append");
}

// ✅ GOOD - Using DocumentFragment (1 layout update)
function fastAppend(container) {
  console.time("Fast append");
 
...

// Layout Thrashing - The Silent Performance Killer

// ❌ BAD - Forces layout calculation on EVERY iteration
function layoutThrashing(boxes) {
  console.time("Layout thrashing");
  
  for (let i = 0; i < boxes.length; i++) {
    // READ - forces layout calculation
    const width = boxes[i].offsetWidth;
    
    // WRITE - invalidates layout
    boxes[i].style.width = (width + 10) + "px";
    // Next read will force ANOTHER layout!
  }
  
  console.timeEnd("Layout thrashing");
}

// ✅ GOOD - Bat
...

// GPU-Accelerated Animations

// ❌ SLOW - Animating layout properties
// These trigger layout + paint on EVERY frame
const slowAnimationProperties = [
  "top", "left", "right", "bottom",
  "width", "height", "margin", "padding"
];

// ✅ FAST - GPU-accelerated properties
// These only trigger composite - runs on GPU!
const fastAnimationProperties = [
  "transform",  // translateX, translateY, scale, rotate
  "opacity"     // fade in/out
];

// Example: Smooth animation using requestAnimationFram
...

// Memoization - Cache Expensive Calculations

// Basic memoization function
function memoize(fn) {
  const cache = new Map();
  
  return function(...args) {
    const key = JSON.stringify(args);
    
    if (cache.has(key)) {
      console.log("Cache hit for:", key);
      return cache.get(key);
    }
    
    console.log("Computing for:", key);
    const result = fn.apply(this, args);
    cache.set(key, result);
    return result;
  };
}

// Expensive calculation
function fibonacci(n) {
  if 
...

// Efficient Data Structures

// Object vs Map for lookups
console.log("=== Object vs Map Performance ===");

// Object lookup
const userObject = {};
for (let i = 0; i < 10000; i++) {
  userObject["user_" + i] = { id: i, name: "User " + i };
}

// Map lookup (FASTER for frequent operations)
const userMap = new Map();
for (let i = 0; i < 10000; i++) {
  userMap.set("user_" + i, { id: i, name: "User " + i });
}

console.log("Object has prototype chain overhead");
console.log("Map is optimized for 
...

// Memory Management & Garbage Collection

// ❌ Memory Leak #1: Forgotten Event Listeners
function leakyComponent() {
  const handler = () => console.log("Click!");
  
  // Listener added but never removed
  document.addEventListener("click", handler);
  
  // When component is destroyed, listener remains!
}

// ✅ Fixed: Clean up listeners
function cleanComponent() {
  const handler = () => console.log("Click!");
  
  document.addEventListener("click", handler);
  
  // Return cleanup function
 
...

// Microtasks vs Macrotasks

// MICROTASKS (run BEFORE next render):
// - Promise callbacks
// - queueMicrotask()
// - MutationObserver

// MACROTASKS (run AFTER render):
// - setTimeout
// - setInterval
// - setImmediate
// - I/O callbacks
// - UI rendering

console.log("=== Event Loop Demo ===");

console.log("1. Synchronous code");

setTimeout(() => {
  console.log("4. setTimeout (macrotask)");
}, 0);

Promise.resolve().then(() => {
  console.log("3. Promise.then (microtask)");
});

queueMicr
...

// Lazy Loading & Code Splitting

// 1. Dynamic Imports - Load code when needed
async function loadHeavyModule() {
  // Module only loads when this function is called
  const module = await import("./heavy-module.js");
  return module.default;
}

// 2. Lazy Image Loading
function lazyLoadImages() {
  const images = document.querySelectorAll("img[data-src]");
  
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        cons
...

// Performance Profiling & Measurement

// 1. Performance.now() for precise timing
function measureExecution(fn, label) {
  const start = performance.now();
  const result = fn();
  const end = performance.now();
  console.log(label + ":", (end - start).toFixed(2) + "ms");
  return result;
}

// 2. Console timing
function timeWithConsole() {
  console.time("operation");
  // ... do work ...
  let sum = 0;
  for (let i = 0; i < 1000000; i++) sum += i;
  console.timeEnd("operation");
  return sum;
...