Performance optimization tips

Understanding Performance Bottlenecks

The first step in performance optimization is identifying the bottlenecks. Common performance issues include excessive DOM operations, frequent repaints and reflows, memory leaks, and unoptimized algorithms. Using the Performance panel in Chrome DevTools, you can record runtime performance data to analyze which functions are the most time-consuming.

// Example: Inefficient DOM operations
const list = document.getElementById('list');
for (let i = 0; i < 1000; i++) {
  const item = document.createElement('li');
  item.textContent = `Item ${i}`;
  list.appendChild(item); // Triggers reflow in each iteration
}

Minimize DOM Operations

DOM operations are among the most performance-intensive tasks in JavaScript. Batch DOM modifications are more efficient than multiple individual changes. Using document fragments or innerHTML can reduce the number of reflows.

// Optimized DOM operations
const list = document.getElementById('list');
const fragment = document.createDocumentFragment();

for (let i = 0; i < 1000; i++) {
  const item = document.createElement('li');
  item.textContent = `Item ${i}`;
  fragment.appendChild(item);
}

list.appendChild(fragment); // Triggers only one reflow

Event Delegation

For event handling on a large number of similar elements, event delegation can reduce memory usage and improve performance. Add event listeners to a parent element and leverage event bubbling to handle child element events.

// Event delegation example
document.getElementById('list').addEventListener('click', function(e) {
  if (e.target.tagName === 'LI') {
    console.log('Clicked on:', e.target.textContent);
  }
});

Debouncing and Throttling

For frequently triggered events (e.g., scroll, resize, input), using debouncing or throttling can significantly improve performance.

// Debounce implementation
function debounce(func, delay) {
  let timeoutId;
  return function() {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, arguments), delay);
  };
}

// Throttle implementation
function throttle(func, limit) {
  let inThrottle;
  return function() {
    if (!inThrottle) {
      func.apply(this, arguments);
      inThrottle = true;
      setTimeout(() => inThrottle = false, limit);
    }
  };
}

Optimize Loops

Loops are performance-sensitive areas. Reduce calculations within loops, cache array lengths, and use more efficient looping methods.

// Before optimization
for (let i = 0; i < arr.length; i++) {
  // Calculates arr.length in each iteration
}

// After optimization
const len = arr.length;
for (let i = 0; i < len; i++) {
  // Cached length
}

// Fastest looping method
let i = arr.length;
while (i--) {
  // Reverse loop is the fastest
}

Memory Management

JavaScript has garbage collection, but memory leaks still need attention. Common memory leaks include uncleared timers, DOM references retained in closures, and unremoved event listeners.

// Memory leak example
function setup() {
  const element = document.getElementById('button');
  element.addEventListener('click', onClick);
  
  function onClick() {
    // Closure retains element reference
    element.style.backgroundColor = 'red';
  }
}

// Correct approach
function setup() {
  const element = document.getElementById('button');
  element.addEventListener('click', onClick);
  
  function onClick() {
    this.style.backgroundColor = 'red';
  }
  
  // Remove listener when needed
  // element.removeEventListener('click', onClick);
}

Using Web Workers

For CPU-intensive tasks, Web Workers can prevent blocking the main thread.

// Main thread code
const worker = new Worker('worker.js');
worker.postMessage({ data: largeArray });
worker.onmessage = function(e) {
  console.log('Result:', e.data);
};

// worker.js
self.onmessage = function(e) {
  const result = processData(e.data); // Time-consuming operation
  self.postMessage(result);
};

Use Caching Wisely

Cache computation results and DOM queries to avoid redundant calculations.

// Cache DOM queries
const elements = {
  header: document.getElementById('header'),
  content: document.getElementById('content'),
  footer: document.getElementById('footer')
};

// Cache function results
function memoize(fn) {
  const cache = {};
  return function(...args) {
    const key = JSON.stringify(args);
    if (cache[key]) return cache[key];
    return cache[key] = fn.apply(this, args);
  };
}

Optimize Animations

Use requestAnimationFrame instead of setTimeout/setInterval for animations. CSS animations are more efficient than JavaScript animations.

// Using requestAnimationFrame
function animate() {
  // Animation logic
  requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

Code Splitting and Lazy Loading

Split code into smaller chunks and load them on demand to improve initial load speed.

// Dynamic import (lazy loading)
button.addEventListener('click', async () => {
  const module = await import('./module.js');
  module.doSomething();
});

Reduce Repaints and Reflows

Batch style modifications and use properties like transform and opacity for animations, as they don't affect layout.

// Bad practice
element.style.width = '100px';
element.style.height = '200px';
element.style.left = '10px';
element.style.top = '20px';

// Good practice
element.style.cssText = 'width:100px; height:200px; left:10px; top:20px;';
// Or use classes
element.classList.add('new-style');

Use Efficient Selectors

CSS selectors match from right to left. Avoid wildcards and deep nesting.

// Inefficient
document.querySelector('div.container ul li a');

// More efficient
document.querySelector('.container-link');

Avoid Synchronous Layouts

Reading layout properties (e.g., offsetWidth) forces the browser to perform synchronous layouts. Batch reads where possible.

// Triggers synchronous layout
const width = element.offsetWidth; // Read
element.style.width = width + 10 + 'px'; // Write
const height = element.offsetHeight; // Read

// Optimized: Read first, then write
const width = element.offsetWidth;
const height = element.offsetHeight;
element.style.width = width + 10 + 'px';

Use Efficient Data Structures

Choose appropriate data structures based on the scenario, such as Map/Object or Set/Array.

// Set is more efficient than Array for lookups
const array = [1, 2, 3, 4, 5];
const set = new Set(array);

// Check element existence
array.includes(3); // O(n)
set.has(3); // O(1)

Reduce Scope Chain Lookups

Cache global variables and deep object accesses to minimize scope chain lookups.

// Before optimization
function process() {
  for (let i = 0; i < 1000; i++) {
    console.log(window.location.href); // Looks up window each time
  }
}

// After optimization
function process() {
  const href = window.location.href; // Cached
  for (let i = 0; i < 1000; i++) {
    console.log(href);
  }
}

Use Bitwise Operations

In intensive computations, bitwise operations are faster than mathematical operations.

// Floor rounding
const x = 1.5;
const floor = ~~x; // 1
const round = x + 0.5 | 0; // 2

// Odd/even check
if (value & 1) {
  // Odd
} else {
  // Even
}

Avoid with and eval

with disrupts the scope chain, and eval poses security risks and impacts performance.

// Avoid using
with (obj) {
  a = 1; // May accidentally create global variables
}

eval('var x = 10;'); // Dynamic parsing hurts performance

Optimize Network Requests

Combine requests, use HTTP/2, compress resources, and set appropriate cache headers.

// Combine API requests
async function fetchAllData() {
  const [users, posts] = await Promise.all([
    fetch('/api/users'),
    fetch('/api/posts')
  ]);
  // Process data
}

Use Modern JavaScript Features

Leverage modern JavaScript features like arrow functions, template literals, and destructuring for cleaner and often more efficient code.

// Cleaner code is often faster
const names = users.map(user => user.name);
const { id, ...rest } = obj;
const url = `/api/${id}`;