Performance optimization recommendations

Performance optimization is key to improving the efficiency of JavaScript applications. Proper optimization techniques can significantly reduce resource consumption and enhance user experience. Below are specific recommendations from multiple dimensions.

Minimize DOM Operations

DOM operations are among the most performance-intensive tasks in JavaScript. Frequent DOM access and modifications can trigger repeated browser repaints and reflows.

// Bad practice: Modifying the DOM in each loop iteration
for (let i = 0; i < 100; i++) {
  document.getElementById('list').innerHTML += `<li>Item ${i}</li>`;
}

// Good practice: Batch operations using document fragments
const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
  const li = document.createElement('li');
  li.textContent = `Item ${i}`;
  fragment.appendChild(li);
}
document.getElementById('list').appendChild(fragment);

Key optimization points:

• Use document.createDocumentFragment() to create temporary DOM nodes.
• Insert into the real DOM only after batch modifications are complete.
• Use CSS transform for complex layouts to avoid reflows.

Event Delegation Optimization

Excessive event listeners can increase memory usage. Leveraging event bubbling can significantly reduce the number of event bindings.

// Bad practice: Binding events to each button individually
document.querySelectorAll('.btn').forEach(btn => {
  btn.addEventListener('click', handleClick);
});

// Good practice: Unified handling on the parent container
document.getElementById('container').addEventListener('click', (e) => {
  if (e.target.classList.contains('btn')) {
    handleClick(e);
  }
});

Applicable scenarios:

• Dynamically generated element lists.
• Multiple elements with similar operations.
• Child elements that require frequent additions or deletions.

Throttling and Debouncing

High-frequency events require frequency control to avoid unnecessary function executions.

// Debounce implementation: Executes only the last call during continuous triggers
function debounce(fn, delay) {
  let timer;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, arguments), delay);
  };
}

// Throttle implementation: Executes at fixed intervals
function throttle(fn, interval) {
  let lastTime = 0;
  return function() {
    const now = Date.now();
    if (now - lastTime >= interval) {
      fn.apply(this, arguments);
      lastTime = now;
    }
  };
}

// Usage example
window.addEventListener('resize', debounce(handleResize, 300));

Typical use cases:

• scroll/resize event handling.
• Real-time search in input fields.
• Mouse movement trajectory calculations.

Memory Management

Improper memory usage can lead to page lag or even crashes.

// Common memory leak scenario
function createClosure() {
  const largeData = new Array(1000000).fill('data');
  return function() {
    // Closure retains a long-term reference to largeData
    console.log('Closure created');
  };
}

// Optimization approach
function cleanClosure() {
  const largeData = new Array(1000000).fill('data');
  return function() {
    console.log('Closure created');
    largeData.length = 0; // Actively release memory
  };
}

Key considerations:

• Clear timers with clearInterval/clearTimeout promptly.
• Remove event listeners from unused DOM elements.
• Avoid circular references that prevent garbage collection.

Algorithm Complexity Optimization

Choosing the right data structures and algorithms can significantly improve execution efficiency.

// O(n²) vs. O(n) comparison
function findDuplicate(arr) {
  // Double loop approach
  for (let i = 0; i < arr.length; i++) {
    for (let j = i + 1; j < arr.length; j++) {
      if (arr[i] === arr[j]) return true;
    }
  }
  return false;
  
  // Optimized hash table approach
  const seen = new Set();
  for (const num of arr) {
    if (seen.has(num)) return true;
    seen.add(num);
  }
  return false;
}

Common optimization strategies:

• Replace array traversals with Map/Set lookups.
• Use the two-pointer technique after sorting.
• Cache strategies that trade space for time.

Asynchronous Code Optimization

Proper use of asynchronous mechanisms can prevent blocking the main thread.

// Use Web Workers for CPU-intensive tasks
const worker = new Worker('task.js');
worker.postMessage({ data: largeArray });
worker.onmessage = (e) => {
  console.log('Result:', e.data);
};

// Task chunking to avoid long main thread occupation
function processInChunks(items, chunkSize, callback) {
  let index = 0;
  function runChunk() {
    const end = Math.min(index + chunkSize, items.length);
    while (index < end) {
      callback(items[index++]);
    }
    if (index < items.length) {
      requestIdleCallback(runChunk);
    }
  }
  requestIdleCallback(runChunk);
}

Advanced techniques:

• Use requestIdleCallback for low-priority tasks.
• Replace scroll event calculations with IntersectionObserver.
• Use WebAssembly for performance-sensitive computations.

Code Organization Optimization

Well-structured code inherently improves execution efficiency.

// Modular organization
// utils.js
export function heavyCalculation(data) {
  // Complex computation logic
}

// main.js
import { heavyCalculation } from './utils.js';

// Lazy loading
button.addEventListener('click', async () => {
  const module = await import('./dialog.js');
  module.openDialog();
});

Best practices:

• Use tree-shaking to eliminate dead code.
• Dynamically import non-critical modules.
• Avoid deep inheritance hierarchies.

Performance Monitoring and Analysis

Continuous monitoring is key to closing the optimization loop.

// Use the Performance API to measure critical paths
function measurePerf() {
  performance.mark('start');
  // Execute the code to be measured
  performance.mark('end');
  performance.measure('task', 'start', 'end');
  const measures = performance.getEntriesByName('task');
  console.log('Duration:', measures[0].duration);
}

// Monitor long tasks
const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.log('Long task:', entry);
  }
});
observer.observe({ entryTypes: ['longtask'] });

Common tools:

• Chrome DevTools Performance panel.
• Lighthouse comprehensive scoring.
• WebPageTest multi-dimensional testing.