The core of JavaScript performance optimization is to improve user experience and reduce resource consumption. The following are key practices: 1. Reduce DOM operations and build batch updates through DocumentFragment or offline; 2. Use throttle and debounce for high-frequency events such as scroll and resize to control the execution frequency; 3. Use efficient loops, prioritize for for or for...of to avoid traversing the array and cache the array length; 4. Avoid memory leaks, remove event listeners in time, clear useless references, and use global variables with caution; 5. Use asynchronous modes such as setTimeout, requestIdleCallback or Web Workers to split time-consuming tasks to avoid blocking the main thread; 6. Use dynamic import() to achieve lazy loading and code segmentation to reduce the initial load burden; 7. Keep the initialization order of object attributes consistent in the V8 engine, and avoid dynamically adding attributes to improve the optimization effect of hidden class. These strategies work together to significantly improve application response speed and operation efficiency, ultimately achieving a smooth user interaction experience.

JavaScript performance optimization isn't just about making code run faster — it's about creating smoother user experiences and reducing resource consumption. Here are practical, real-world tips that make a difference.

1. Minimize DOM Manipulation

The DOM is slow. Every time you access or modify it, the browser may need to reccalculate layout (reflow) and repaint, which hurts performance — especially in loops.

Do this instead:

• Batch DOM updates.
• Work with DocumentFragment or build HTML strings offline.
• Use virtual DOM libraries (like React) to minimize direct manipulation.

 // ? Bad: Touching DOM in a loop
for (let i = 0; i < items.length; i ) {
  const el = document.createElement(&#39;li&#39;);
  el.textContent = items[i];
  list.appendChild(el); // Triggers reflect each time
}

// ? Good: Use DocumentFragment
const fragment = document.createDocumentFragment();
for (let i = 0; i < items.length; i ) {
  const el = document.createElement(&#39;li&#39;);
  el.textContent = items[i];
  fragment.appendChild(el);
}
list.appendChild(fragment); // One reflow

2. Debounce and Throttle Expensive Events

Events like scroll , resize , and input can fire dozens of times per second. Running heavy logic on each event kills performance.

• Throttle : Run a function at most once every X million seconds.
• Debounce : Run only after the event stops firing for X millionseconds.

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

// Usage
window.addEventListener('resize', throttle(handleResize, 100));

Useful for:

• Auto-suggest inputs (debounce)
• Infinite scroll (throttle)
• Drag-and-drop handlers

3. Use Efficient Loops and Array Methods

Not all loops are created equal. Avoid for...in for arrays. Prefer for or for...of for large datasets.

Also, know when to use which array method:

• map , filter , reduce are clean but create new arrays — costly for huge lists.
• For performance-critical loops, use traditional for or while .

 // ? Fast for large arrays
for (let i = 0; i < arr.length; i ) { ... }

// ? Slower due to function call overhead
arr.forEach(item => { ... });

Tip: Cache array length in loops:

 for (let i = 0, len = arr.length; i < len; i ) { ... }

4. Avoid Memory Leaks

JavaScript has garbage collection, but you can still leak memory by:

• Forgetting to remove event listeners.
• Keeping references to unused objects (especially in closings).
• Using global variables excessively.

Fix:

• Always remove event listeners: elem.removeEventListener() .
• Set unused references to null .
• Use browser dev tools (Memory tab) to detect leaks.

 // Bad: Anonymous functions can't be removed
button.addEventListener('click', () => { ... });

// Good: Named or stored function
function handleClick() { ... }
button.addEventListener('click', handleClick);
// Later:
button.removeEventListener('click', handleClick);

5. Optimize with Asynchronous Patterns

Long-running tasks block the main thread, freezing the UI. Break them up using:

• setTimeout or setImmediate to yield control.
• requestIdleCallback for low-priority work.
• Web Workers for CPU-heavy tasks (eg, parsing large JSON).

 function processLargeArray(arr, callback) {
  const chunkSize = 1000;
  let index = 0;

  function processChunk() {
    const end = Math.min(index chunkSize, arr.length);
    for (let i = index; i < end; i ) {
      // process arr[i]
    }
    index = end;

    if (index < arr.length) {
      setTimeout(processChunk, 0); // Yield to UI
    } else {
      callback();
    }
  }

  processChunk();
}

6. Lazy Load and Code Splitting

Load only what's needed. Use dynamic import() to split code and load modules on demand.

 // Load heavy module only when needed
button.addEventListener('click', () => {
  import('./heavyModule.js').then(module => {
    module.render();
  });
});

This reduces initial load time and memory usage.

7. Use Object Property Order and Avoid Hidden Classes (V8)

In V8 (Chrome, Node), objects with the same property creation order share "hidden classes," improving performance.

Avoid:

 function User(name) {
  this.name = name;
}
function Admin(name) {
  this.role = 'admin'; // Different order = different hidden class
  this.name = name;
}

Instead, initialize properties in the same order.

Also, avoid adding properties after creation:

 const obj = {};
obj.x = 1;
obj.y = 2; // Dynamic add — slower

Prefer:

 const obj = { x: 1, y: 2 };

Basically, optimize where it matters: avoid DOM thrashing, control event frequency, manage memory, and split heavy work. Most gains come from smart patterns, not micro-optimizations.

The above is the detailed content of JavaScript performance optimization tips. For more information, please follow other related articles on the PHP Chinese website!