Bundling

Use tools like Webpack, Rollup, or Vite to bundle multiple files into a single file, reducing HTTP requests:

// webpack.config.js
module.exports = {
    mode: 'production',
    optimization: {
        minimize: true,
        splitChunks: {
            chunks: 'all'
        }
    }
};

2. Use Debouncing and Throttling

Limit how often functions execute to improve performance:

Debouncing

function debounce(func, wait) {
    let timeout;
    return function executedFunction(...args) {
        const later = () => {
            clearTimeout(timeout);
            func(...args);
        };
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
    };
}

// Usage
const handleSearch = debounce((query) => {
    // Search logic
}, 300);

Throttling

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

// Usage for scroll events
const handleScroll = throttle(() => {
    // Scroll logic
}, 100);

3. Optimize DOM Manipulation

DOM operations are expensive. Minimize them:

Batch DOM Updates

// ❌ Bad: Multiple reflows
for (let i = 0; i < 1000; i++) {
    document.getElementById('list').innerHTML += '
Item ' + i + '
';
}

// ✅ Good: Single reflow
const fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
    const li = document.createElement('li');
    li.textContent = 'Item ' + i;
    fragment.appendChild(li);
}
document.getElementById('list').appendChild(fragment);

Use Document Fragments

const fragment = document.createDocumentFragment();
// Add multiple elements to fragment
fragment.appendChild(element1);
fragment.appendChild(element2);
// Append fragment once
container.appendChild(fragment);

4. Lazy Loading and Code Splitting

Load code only when needed:

Dynamic Imports

// Lazy load a module
async function loadModule() {
    const module = await import('./heavy-module.js');
    module.doSomething();
}

// React lazy loading
const HeavyComponent = React.lazy(() => import('./HeavyComponent'));

Image Lazy Loading

// Native lazy loading


// Intersection Observer API
const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            entry.target.src = entry.target.dataset.src;
            observer.unobserve(entry.target);
        }
    });
});

5. Optimize Loops

Choose the right loop for your use case:

// ❌ Slow: forEach with heavy operations
array.forEach(item => {
    // Heavy operation
});

// ✅ Fast: for loop
for (let i = 0; i < array.length; i++) {
    // Heavy operation
}

// ✅ Also fast: for...of
for (const item of array) {
    // Heavy operation
}

6. Use Efficient Data Structures

Choose the right data structure for your needs:

Maps vs Objects

// Use Map for frequent additions/deletions
const map = new Map();
map.set('key', 'value');

// Use Object for static data
const obj = { key: 'value' };

// Use Set for unique values
const uniqueValues = new Set([1, 2, 3, 2, 1]); // [1, 2, 3]

7. Memoization

Cache function results to avoid redundant calculations:

function memoize(fn) {
    const cache = new Map();
    return function(...args) {
        const key = JSON.stringify(args);
        if (cache.has(key)) {
            return cache.get(key);
        }
        const result = fn.apply(this, args);
        cache.set(key, result);
        return result;
    };
}

// Usage
const expensiveFunction = memoize((n) => {
    // Expensive calculation
    return n * n;
});

8. Avoid Memory Leaks

Prevent memory leaks by cleaning up:

// Remove event listeners
element.removeEventListener('click', handler);

// Clear intervals/timeouts
clearInterval(intervalId);
clearTimeout(timeoutId);

// Remove references
element = null;

// WeakMap for automatic cleanup
const weakMap = new WeakMap();

9. Use Web Workers

Offload heavy computations to background threads:

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

// worker.js
self.onmessage = (e) => {
    const result = heavyComputation(e.data.data);
    self.postMessage(result);
};

10. Performance Monitoring

Measure and monitor performance:

Performance API

// Measure execution time
performance.mark('start');
// Your code here
performance.mark('end');
performance.measure('duration', 'start', 'end');
const measure = performance.getEntriesByName('duration')[0];
console.log('Duration:', measure.duration);

Chrome DevTools

• Performance tab for profiling
• Memory tab for memory leaks
• Network tab for loading times
• Lighthouse for audits

Best Practices Summary

1. Minify and bundle your code
2. Use debouncing/throttling for events
3. Minimize DOM manipulation
4. Implement lazy loading
5. Optimize loops and algorithms
6. Choose efficient data structures
7. Use memoization for expensive functions
8. Avoid memory leaks
9. Consider Web Workers for heavy tasks
10. Monitor and measure performance

Conclusion

JavaScript performance optimization is an ongoing process. Start with the biggest bottlenecks, measure the impact, and iterate. Remember: premature optimization is the root of all evil. Profile first, optimize second.