MSDN Blog

1. Minimize DOM Manipulation

Directly manipulating the Document Object Model (DOM) is often one of the most expensive operations in JavaScript. Each change can trigger reflows and repaints, slowing down your application.

• Batch DOM Updates: Instead of updating the DOM piece by piece, group your changes and apply them at once. You can use DocumentFragments for this.
• Cache DOM Selectors: Avoid repeatedly querying the DOM for the same elements. Store frequent selections in variables.
• Use Event Delegation: Attach event listeners to parent elements rather than multiple child elements.

Example:

// Inefficient:
for (let i = 0; i < data.length; i++) {
    const newItem = document.createElement('li');
    newItem.textContent = data[i];
    list.appendChild(newItem); // Triggers reflow/repaint for each item
}

// Efficient using DocumentFragment:
const fragment = document.createDocumentFragment();
for (let i = 0; i < data.length; i++) {
    const newItem = document.createElement('li');
    newItem.textContent = data[i];
    fragment.appendChild(newItem);
}
list.appendChild(fragment); // Single DOM manipulation
                    

2. Optimize Loops and Iterations

Loops are fundamental to programming, but inefficient loops can be a major bottleneck. Pay attention to how you iterate over data.

• Use `for` loops for performance: Generally, traditional `for` loops are faster than methods like `forEach` or `for...of` in performance-critical scenarios, especially in older JS engines.
• Cache Array Length: Store the `length` property of an array in a variable outside the loop if you're using a traditional `for` loop to avoid re-calculating it on each iteration.

Example:

// Potentially less performant:
data.forEach(item => {
    // ... process item
});

// Generally more performant:
const len = data.length;
for (let i = 0; i < len; i++) {
    const item = data[i];
    // ... process item
}
                    

3. Debounce and Throttle Event Handlers

For events that fire rapidly (like `resize`, `scroll`, or `mousemove`), you should debounce or throttle their handlers to prevent excessive execution.

• Debouncing: Ensures a function is only called after a certain period of inactivity. Useful for search suggestions or resizing.
• Throttling: Limits the rate at which a function can be called, ensuring it runs at most once within a specified time interval. Useful for scroll-based animations.

4. Code Splitting and Lazy Loading

Load only the JavaScript your user needs, when they need it. This significantly reduces initial load times.

• Dynamic Imports: Use `import()` syntax for code splitting, allowing you to load modules on demand.
• Lazy Load Components: Load components or features only when they become visible or are interacted with.

5. Web Workers for Heavy Computation

Offload intensive tasks from the main thread using Web Workers. This keeps your UI responsive even during complex computations.

• Web Workers run in background threads, preventing your main thread from freezing.
• Communication between the main thread and workers is done via messages.

6. Optimize Image Loading

While not strictly JavaScript, JavaScript plays a role in optimizing image loading.

• Lazy Load Images: Use the `loading="lazy"` attribute or JavaScript intersection observers to defer loading of offscreen images.
• Responsive Images: Use `` or `srcset` to serve appropriately sized images based on the user's viewport.