JavaScript Performance Optimization

JavaScript engines (like V8 in Chrome) execute code through several phases:

// This code goes through these phases:
// 1. Parsing: The code is parsed into an Abstract Syntax Tree (AST)
// 2. Compilation: The AST is compiled to bytecode
// 3. Optimization: Hot code paths are optimized with Just-In-Time (JIT) compilation
// 4. Execution: The code runs

function calculateTotal(items) {
  return items.reduce((sum, item) => sum + item.price, 0);
}

const cart = [
  { name: 'Laptop', price: 999 },
  { name: 'Headphones', price: 99 },
  { name: 'Mouse', price: 29 }
];

console.log(calculateTotal(cart)); // 1127

JavaScript uses a call stack to track execution and a memory heap to store variables:

// Example of call stack in action
function greet(name) {
  // greet() is added to the call stack
  const greeting = `Hello, ${name}!`;
  return greeting;
  // greet() is removed from the call stack when it returns
}

function welcome() {
  // welcome() is added to the call stack
  const message = greet('Developer');
  console.log(message);
  // welcome() is removed from the call stack when it completes
}

welcome();

The Performance API provides precise timing measurements:

// Measure how long a function takes to execute
function measurePerformance(fn, ...args) {
  const start = performance.now();
  const result = fn(...args);
  const end = performance.now();
  console.log(`Execution time: ${end - start} ms`);
  return result;
}

// Example function to measure
function findPrimes(max) {
  const sieve = Array(max).fill(true);
  sieve[0] = sieve[1] = false;

  for (let i = 2; i <= Math.sqrt(max); i++) {
    if (sieve[i]) {
      for (let j = i * i; j < max; j += i) {
        sieve[j] = false;
      }
    }
  }

  return sieve.reduce((primes, isPrime, num) => {
    if (isPrime) primes.push(num);
    return primes;
  }, []);
}

// Measure performance
measurePerformance(findPrimes, 100000);

Learn to use Chrome DevTools to profile JavaScript performance:

// This is a demonstration of how to analyze this code with DevTools
// In a real browser environment, you would:
// 1. Open DevTools (F12)
// 2. Go to the Performance tab
// 3. Click Record
// 4. Perform the action you want to analyze
// 5. Stop recording and analyze the results

console.log('To analyze performance in Chrome DevTools:');
console.log('1. Press F12 to open DevTools');
console.log('2. Go to the Performance tab');
console.log('3. Click the record button (circle)');
console.log('4. Perform the action you want to analyze');
console.log('5. Click the stop button');
console.log('6. Analyze the flame chart to identify bottlenecks');

// Example of what you might analyze
function simulateHeavyOperation() {
  console.log('This would be a CPU-intensive operation in a real app');

  // In a real scenario, you'd see this in the flame chart
  // if it was taking significant time
  let sum = 0;
  for (let i = 0; i < 1000000; i++) {
    sum += i;
  }

  return sum;
}

simulateHeavyOperation();

JavaScript automatically manages memory through garbage collection:

// Objects are garbage collected when they're no longer reachable
let user = { name: 'John' }; // Object is created and referenced by 'user'

user = null; // The object is now unreachable and eligible for garbage collection

// The JavaScript engine will eventually free the memory used by the object

Common causes of memory leaks and how to find them:

// Example 1: Accidental global variables
function createGlobal() {
  leakyVariable = "I'm leaking into global scope!"; // Missing 'let', 'const', or 'var'
}

// Example 2: Forgotten event listeners
function setupButton() {
  const button = document.createElement('button');

  // This event listener keeps a reference to the button
  // even if the button is removed from the DOM
  button.addEventListener('click', function () {
    // Do something with button
    console.log(button.innerHTML);
  });

  return button;
}

// Example 3: Closures holding references
function createLargeDataProcessor() {
  const largeData = new Array(1000000).fill('data');

  return function process() {
    // This closure keeps a reference to largeData
    // even if it's only used once
    return largeData[0];
  };
}

// To fix these issues:
// 1. Always declare variables with let/const
// 2. Remove event listeners when elements are removed
// 3. Be careful with closures and large data

// In Chrome DevTools, you can take heap snapshots to find memory leaks
console.log('To analyze memory usage in Chrome DevTools:');
console.log('1. Open DevTools (F12)');
console.log('2. Go to the Memory tab');
console.log("3. Select 'Heap snapshot' and click 'Take snapshot'");
console.log('4. Perform actions in your app');
console.log('5. Take another snapshot');
console.log('6. Compare snapshots to identify retained objects');

// Example of what you might analyze
function simulateMemoryLeak() {
  console.log('This would create a memory leak in a real app');

  // In a real scenario, this would show up in heap snapshots
  // as growing retained memory
  window = window || global;
  if (!window.leakyArray) {
    window.leakyArray = [];
  }

  // This would keep adding data to the global array
  // without ever cleaning it up
  console.log('In a browser, this would add 10,000 objects to a global array');
  // window.leakyArray.push(...Array(10000).fill().map(() => ({ data: new Array(1000).fill('x') })));
}

simulateMemoryLeak();

The DOM is often a performance bottleneck:

// Inefficient: Multiple DOM operations
function addItemsInefficient(items) {
  const list = document.getElementById('itemList');

  // This causes multiple reflows and repaints
  items.forEach((item) => {
    const li = document.createElement('li');
    li.textContent = item;
    list.appendChild(li); // DOM is modified on each iteration
  });
}

// Efficient: Batch DOM operations
function addItemsEfficient(items) {
  const list = document.getElementById('itemList');
  const fragment = document.createDocumentFragment();

  // Create all elements in memory first
  items.forEach((item) => {
    const li = document.createElement('li');
    li.textContent = item;
    fragment.appendChild(li); // No DOM modification yet
  });

  // Single DOM operation
  list.appendChild(fragment);
}

// Even more efficient: Use innerHTML for static content
function addItemsMostEfficient(items) {
  const list = document.getElementById('itemList');

  // Single DOM operation with string concatenation
  list.innerHTML = items.map((item) => `<li>${item}</li>`).join('');
}

Understanding how frameworks like React optimize rendering:

// Simplified virtual DOM concept
class VirtualDOM {
  constructor() {
    this.virtualTree = null;
    this.realDOM = document.getElementById('app');
  }

  render(newVirtualTree) {
    const patches = this.diff(this.virtualTree, newVirtualTree);
    this.patch(this.realDOM, patches);
    this.virtualTree = newVirtualTree;
  }

  diff(oldTree, newTree) {
    // In a real implementation, this would compare
    // the old and new virtual trees to find differences
    console.log('Calculating difference between trees');
    return { type: 'update', changes: {} };
  }

  patch(dom, patches) {
    // In a real implementation, this would apply
    // only the necessary changes to the real DOM
    console.log('Applying minimal changes to real DOM');
  }
}

// This is how frameworks like React work under the hood
// They only update what actually changed, not the entire DOM

Different data structures have different performance characteristics:

// Example: Finding items

// Array - O(n) lookup time
function findInArray(array, item) {
  const start = performance.now();

  const index = array.indexOf(item);

  const end = performance.now();
  console.log(`Array lookup took ${end - start} ms`);
  return index !== -1;
}

// Object - O(1) lookup time
function findInObject(object, key) {
  const start = performance.now();

  const exists = key in object;

  const end = performance.now();
  console.log(`Object lookup took ${end - start} ms`);
  return exists;
}

// Set - O(1) lookup time
function findInSet(set, item) {
  const start = performance.now();

  const exists = set.has(item);

  const end = performance.now();
  console.log(`Set lookup took ${end - start} ms`);
  return exists;
}

// Compare performance with large data
const size = 100000;
const target = 99999;

const array = Array(size)
  .fill()
  .map((_, i) => i);
const object = Object.fromEntries(array.map((i) => [i, true]));
const set = new Set(array);

findInArray(array, target);
findInObject(object, target);
findInSet(set, target);

Improving algorithm efficiency:

// Inefficient: O(n²) nested loops
function findDuplicatesInefficient(array) {
  const start = performance.now();

  const duplicates = [];

  for (let i = 0; i < array.length; i++) {
    for (let j = i + 1; j < array.length; j++) {
      if (array[i] === array[j] && !duplicates.includes(array[i])) {
        duplicates.push(array[i]);
      }
    }
  }

  const end = performance.now();
  console.log(`Inefficient algorithm took ${end - start} ms`);
  return duplicates;
}

// Efficient: O(n) using a Set
function findDuplicatesEfficient(array) {
  const start = performance.now();

  const seen = new Set();
  const duplicates = new Set();

  for (const item of array) {
    if (seen.has(item)) {
      duplicates.add(item);
    } else {
      seen.add(item);
    }
  }

  const end = performance.now();
  console.log(`Efficient algorithm took ${end - start} ms`);
  return [...duplicates];
}

// Test with a large array
const testArray = Array(10000)
  .fill()
  .map(() => Math.floor(Math.random() * 1000));

findDuplicatesInefficient(testArray);
findDuplicatesEfficient(testArray);

Efficient asynchronous code:

// Sequential execution (slower)
async function fetchDataSequential(ids) {
  const start = performance.now();

  const results = [];
  for (const id of ids) {
    // Each request waits for the previous one to complete
    const result = await fetch(
      `https://jsonplaceholder.typicode.com/posts/${id}`
    );
    const data = await result.json();
    results.push(data);
  }

  const end = performance.now();
  console.log(`Sequential fetching took ${end - start} ms`);
  return results;
}

// Parallel execution (faster)
async function fetchDataParallel(ids) {
  const start = performance.now();

  // Create all promises at once
  const promises = ids.map((id) =>
    fetch(`https://jsonplaceholder.typicode.com/posts/${id}`).then((response) =>
      response.json()
    )
  );

  // Wait for all to complete
  const results = await Promise.all(promises);

  const end = performance.now();
  console.log(`Parallel fetching took ${end - start} ms`);
  return results;
}

// Test both approaches
const ids = [1, 2, 3, 4, 5];
// In a real environment, you would see the parallel version
// complete much faster than the sequential version

Controlling the frequency of function execution:

// Debounce: Execute function only after a certain amount of time has passed
// since it was last invoked
function debounce(func, wait) {
  let timeout;

  return function executedFunction(...args) {
    const later = () => {
      clearTimeout(timeout);
      func(...args);
    };

    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
  };
}

// Throttle: Execute function at most once per specified time period
function throttle(func, limit) {
  let inThrottle;

  return function executedFunction(...args) {
    if (!inThrottle) {
      func(...args);
      inThrottle = true;
      setTimeout(() => {
        inThrottle = false;
      }, limit);
    }
  };
}

// Example usage for search input
const searchInput = { value: '' };

// Without debounce (would trigger on every keystroke)
function searchWithoutDebounce() {
  console.log(`Searching for: ${searchInput.value}`);
  // This would make an API call on every keystroke
}

// With debounce (waits until typing stops)
const debouncedSearch = debounce(function () {
  console.log(`Searching for: ${searchInput.value} (debounced)`);
  // This makes an API call only after typing stops for 300ms
}, 300);

// Example usage for scroll events
// Without throttle (would trigger hundreds of times during scrolling)
function handleScrollWithoutThrottle() {
  console.log('Scroll event fired');
  // This would run too frequently during scrolling
}

// With throttle (runs at most once every 100ms)
const throttledScroll = throttle(function () {
  console.log('Scroll event fired (throttled)');
  // This runs at most once every 100ms during scrolling
}, 100);

// Simulate typing in search box
searchInput.value = 'a';
searchWithoutDebounce(); // Immediate search
debouncedSearch(); // Waits for 300ms

searchInput.value = 'ap';
searchWithoutDebounce(); // Another immediate search
debouncedSearch(); // Resets the 300ms timer

searchInput.value = 'app';
searchWithoutDebounce(); // Yet another immediate search
debouncedSearch(); // Resets the 300ms timer again

// In a real environment, only one search would happen after typing stops

Loading resources only when needed:

// Basic implementation of lazy loading images
function lazyLoadImages() {
  // Select all images with data-src attribute
  const lazyImages = document.querySelectorAll('img[data-src]');

  // Create an intersection observer
  const observer = new IntersectionObserver((entries, observer) => {
    entries.forEach((entry) => {
      // If the image is in the viewport
      if (entry.isIntersecting) {
        const img = entry.target;

        // Replace the src with the data-src
        img.src = img.dataset.src;

        // Remove the data-src attribute
        img.removeAttribute('data-src');

        // Stop observing this image
        observer.unobserve(img);
      }
    });
  });

  // Observe each lazy image
  lazyImages.forEach((img) => {
    observer.observe(img);
  });
}

// Example HTML structure:
// <img src="placeholder.jpg" data-src="actual-image.jpg" alt="Lazy loaded image">

Breaking code into smaller chunks:

// Without code splitting (loads everything upfront)
import { heavyFeature1, heavyFeature2, heavyFeature3 } from './features';

function app() {
  // All features are loaded, even if not used immediately
  const button1 = document.getElementById('feature1');
  const button2 = document.getElementById('feature2');
  const button3 = document.getElementById('feature3');

  button1.addEventListener('click', heavyFeature1);
  button2.addEventListener('click', heavyFeature2);
  button3.addEventListener('click', heavyFeature3);
}

// With code splitting (loads features on demand)
function appWithCodeSplitting() {
  const button1 = document.getElementById('feature1');
  const button2 = document.getElementById('feature2');
  const button3 = document.getElementById('feature3');

  button1.addEventListener('click', async () => {
    // Feature 1 is loaded only when button is clicked
    const { heavyFeature1 } = await import('./feature1');
    heavyFeature1();
  });

  button2.addEventListener('click', async () => {
    // Feature 2 is loaded only when button is clicked
    const { heavyFeature2 } = await import('./feature2');
    heavyFeature2();
  });

  button3.addEventListener('click', async () => {
    // Feature 3 is loaded only when button is clicked
    const { heavyFeature3 } = await import('./feature3');
    heavyFeature3();
  });
}

// In modern bundlers like webpack, this creates separate chunks
// that are loaded only when needed

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Memory Leak Demo</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        margin: 20px;
      }
      button {
        margin: 10px;
        padding: 8px 16px;
      }
      .modal {
        display: none;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: white;
        padding: 20px;
        border: 1px solid #ccc;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        z-index: 100;
      }
      .modal.active {
        display: block;
      }
      .overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 50;
      }
      .overlay.active {
        display: block;
      }
    </style>
  </head>
  <body>
    <h1>Memory Leak Demo</h1>
    <p>
      This page contains several memory leaks. Use Chrome DevTools to find them!
    </p>

    <button id="createNodes">Create 1000 Nodes</button>
    <button id="openModal">Open Modal</button>
    <button id="startInterval">Start Interval</button>
    <button id="createClosures">Create Closures</button>

    <div class="overlay" id="overlay"></div>
    <div class="modal" id="exampleModal">
      <h2>Example Modal</h2>
      <p>This modal has a memory leak in its event handling.</p>
      <button id="closeModal">Close</button>
    </div>

    <script>
      // Memory Leak 1: Global array that keeps growing
      let leakyArray = [];

      document
        .getElementById('createNodes')
        .addEventListener('click', function () {
          // Create 1000 DOM nodes and store references to them
          for (let i = 0; i < 1000; i++) {
            const node = document.createElement('div');
            node.textContent = `Node ${i}`;
            // We create the nodes but never append them to the DOM
            // AND we store references to them, preventing garbage collection
            leakyArray.push(node);
          }
          console.log(`Created ${leakyArray.length} nodes`);
        });

      // Memory Leak 2: Event listeners not properly removed
      const overlay = document.getElementById('overlay');
      const modal = document.getElementById('exampleModal');

      document
        .getElementById('openModal')
        .addEventListener('click', function () {
          overlay.classList.add('active');
          modal.classList.add('active');

          // This adds a new event listener every time the modal is opened
          // but never removes the old ones
          document.addEventListener('keydown', handleEscapeKey);
        });

      function handleEscapeKey(e) {
        if (e.key === 'Escape') {
          closeModal();
        }
      }

      document
        .getElementById('closeModal')
        .addEventListener('click', closeModal);

      function closeModal() {
        overlay.classList.remove('active');
        modal.classList.remove('active');
        // We should remove the event listener here, but we don't
        // document.removeEventListener('keydown', handleEscapeKey);
      }

      // Memory Leak 3: Timers not cleared
      let intervalId;
      let counter = 0;
      const leakyData = [];

      document
        .getElementById('startInterval')
        .addEventListener('click', function () {
          // We start a new interval each time without clearing the old one
          intervalId = setInterval(function () {
            counter++;
            // This keeps growing with large objects
            leakyData.push({
              timestamp: new Date(),
              data: new Array(10000).fill('x'),
              counter
            });
            console.log(
              `Interval tick: ${counter}, stored items: ${leakyData.length}`
            );
          }, 1000);
        });

      // Memory Leak 4: Closures holding references to large data
      document
        .getElementById('createClosures')
        .addEventListener('click', function () {
          const largeData = new Array(100000).fill('large data');

          function createLeak() {
            // This function captures largeData in its closure
            return function () {
              // We only use a tiny part of the data
              console.log(largeData[0]);
            };
          }

          // Create 100 closures that each capture the large data
          for (let i = 0; i < 100; i++) {
            const leakyClosure = createLeak();
            // We call it once but the closure still retains the reference
            leakyClosure();
          }

          console.log('Created 100 closures with large data');
        });
    </script>
  </body>
</html>

// Inefficient function to find prime numbers
function findPrimesInefficient(max) {
  const primes = [];

  // For each number up to max
  for (let num = 2; num <= max; num++) {
    let isPrime = true;

    // Check if it's divisible by any number
    for (let i = 2; i < num; i++) {
      if (num % i === 0) {
        isPrime = false;
        break;
      }
    }

    if (isPrime) {
      primes.push(num);
    }
  }

  return primes;
}

// Test the function with a large number
console.time('Inefficient');
findPrimesInefficient(10000);
console.timeEnd('Inefficient');

// Your task: Optimize this function
// Implement the Sieve of Eratosthenes algorithm
function findPrimesOptimized(max) {
  // Your optimized implementation here
      // Hint for Implementing the Sieve of Eratosthenes algorithm
      // Create an array of boolean values, all initialized to true
      const sieve = Array(max + 1).fill(true);

      // 0 and 1 are not prime
      sieve[0] = sieve[1] = false;

      // Start with the first prime number, 2
      for (let p = 2; p * p <= max; p++) {
        // If p is prime (not marked false yet)
        if (sieve[p]) {
          // Mark all multiples of p as not prime
          for (let i = p * p; i <= max; i += p) {
            sieve[i] = false;
          }
        }
      }

      // Collect all prime numbers from the sieve
      const primes = [];
      for (let i = 2; i <= max; i++) {
        if (sieve[i]) {
          primes.push(i);
        }
      }

      return primes;
    }
}

// Test your optimized function
console.time('Your optimized version');
findPrimesOptimized(10000);
console.timeEnd('Your optimized version');