Performance Optimization

Optimization Strategies: Improve application speed, responsiveness, and efficiency

1. Rendering Optimization

Batch DOM Updates

Avoid frequent DOM manipulations by batching updates.

JavaScript Editor

// Bad: Multiple DOM updates
function updateListBad(items) {
  const list = document.getElementById('list');
  list.innerHTML = '';
  
  items.forEach(item => {
    const li = document.createElement('li');
    li.textContent = item;
    list.appendChild(li); // Reflow for each item
  });
}

// Good: Batch DOM updates
function updateListGood(items) {
  const list = document.getElementById('list');
  const fragment = document.createDocumentFragment();
  
  items.forEach(item => {
    const li = document.createElement('li');
    li.textContent = item;
    fragment.appendChild(li); // No reflow here
  });
  
  list.innerHTML = '';
  list.appendChild(fragment); // Single reflow
}

// Best: Use requestAnimationFrame for visual updates
function smoothUpdate(items) {
  requestAnimationFrame(() => {
    updateListGood(items);
  });
}

// Test
const items = Array.from({ length: 1000 }, (_, i) => `Item ${i + 1}`);
console.log('Updating 1000 items...');
console.time('updateListBad');
updateListBad(items);
console.timeEnd('updateListBad');

console.time('updateListGood');
updateListGood(items);
console.timeEnd('updateListGood');

Virtual Scrolling

Render only visible items for large lists.

JavaScript Editor

// Virtual Scrolling Implementation
class VirtualScroll {
  constructor(container, itemHeight, totalItems, renderItem) {
    this.container = container;
    this.itemHeight = itemHeight;
    this.totalItems = totalItems;
    this.renderItem = renderItem;
    
    this.visibleItems = Math.ceil(container.clientHeight / itemHeight);
    this.buffer = 5; // Render extra items for smooth scrolling
    
    this.container.style.position = 'relative';
    this.container.style.height = `${totalItems * itemHeight}px`;
    this.container.style.overflow = 'auto';
    
    this.content = document.createElement('div');
    this.container.appendChild(this.content);
    
    this.container.addEventListener('scroll', () => this.handleScroll());
    
    this.update();
  }

handleScroll() {
    requestAnimationFrame(() => this.update());
  }

update() {
    const scrollTop = this.container.scrollTop;
    const start = Math.max(0, Math.floor(scrollTop / this.itemHeight) - this.buffer);
    const end = Math.min(this.totalItems, start + this.visibleItems + this.buffer * 2);
    
    this.renderVisibleItems(start, end);
    
    // Update content position
    const offset = start * this.itemHeight;
    this.content.style.transform = `translateY(${offset}px)`;
  }

renderVisibleItems(start, end) {
    const fragment = document.createDocumentFragment();
    
    for (let i = start; i < end; i++) {
      const item = this.renderItem(i);
      item.style.position = 'absolute';
      item.style.top = `${(i - start) * this.itemHeight}px`;
      item.style.height = `${this.itemHeight}px`;
      fragment.appendChild(item);
    }
    
    this.content.innerHTML = '';
    this.content.appendChild(fragment);
  }
}

// Usage Example
function createListItem(index) {
  const div = document.createElement('div');
  div.className = 'list-item';
  div.textContent = `Item #${index + 1}`;
  div.style.borderBottom = '1px solid #ccc';
  div.style.padding = '10px';
  return div;
}

// Test with 10,000 items
const container = document.createElement('div');
container.style.height = '400px';
container.style.border = '1px solid #ddd';

const virtualScroll = new VirtualScroll(
  container,
  50, // item height
  10000, // total items
  createListItem
);

console.log('Virtual Scroll created for 10,000 items');
console.log('Only rendering visible items (approx 8-12 at a time)');

2. Code Execution Optimization

Memoization

Cache expensive function results.

JavaScript Editor

// Memoization Implementation
function memoize(fn) {
  const cache = new Map();
  
  return function(...args) {
    const key = JSON.stringify(args);
    
    if (cache.has(key)) {
      console.log('Returning cached result for:', args);
      return cache.get(key);
    }
    
    console.log('Calculating result for:', args);
    const result = fn.apply(this, args);
    cache.set(key, result);
    return result;
  };
}

// Expensive calculation function
function fibonacci(n) {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
}

// Without memoization (very slow for n > 40)
console.time('Fibonacci without memo');
console.log('Fib(10):', fibonacci(10));
console.timeEnd('Fibonacci without memo');

// With memoization
const memoizedFibonacci = memoize(function fib(n) {
  if (n <= 1) return n;
  return memoizedFibonacci(n - 1) + memoizedFibonacci(n - 2);
});

console.time('Fibonacci with memo');
console.log('Fib(10):', memoizedFibonacci(10));
console.log('Fib(10) again:', memoizedFibonacci(10));
console.timeEnd('Fibonacci with memo');

console.time('Fibonacci with memo - larger number');
console.log('Fib(40):', memoizedFibonacci(40));
console.timeEnd('Fibonacci with memo - larger number');

Lazy Loading Functions

Initialize expensive functions only when needed.

JavaScript Editor

// Lazy Function Initialization
function createHeavyModule() {
  console.log('Heavy module initialized...');
  
  // Simulate heavy initialization
  const data = Array.from({ length: 1000000 }, (_, i) => i);
  
  return {
    process: function(input) {
      console.log('Processing:', input);
      return data.filter(x => x === input).length;
    },
    
    analyze: function() {
      console.log('Analyzing data...');
      return {
        sum: data.reduce((a, b) => a + b, 0),
        average: data.reduce((a, b) => a + b, 0) / data.length
      };
    }
  };
}

// Lazy loader
const lazyModule = (function() {
  let instance = null;
  
  return {
    getInstance: function() {
      if (!instance) {
        instance = createHeavyModule();
      }
      return instance;
    },
    
    process: function(input) {
      return this.getInstance().process(input);
    },
    
    analyze: function() {
      return this.getInstance().analyze();
    }
  };
})();

// Usage - module only initialized when needed
console.log('Application starting...');

// Module not initialized yet
setTimeout(() => {
  console.log('First call to process:');
  console.log('Result:', lazyModule.process(42)); // Initializes here
  
  console.log('\nSecond call (already initialized):');
  console.log('Result:', lazyModule.process(100));
}, 1000);

3. Network Optimization

Request Batching

Combine multiple API requests into one.

JavaScript Editor

// Request Batching Implementation
class RequestBatcher {
  constructor(batchTimeout = 50) {
    this.batchTimeout = batchTimeout;
    this.batch = [];
    this.timer = null;
    this.requestId = 0;
  }

async request(url, data) {
    return new Promise((resolve, reject) => {
      const request = { url, data, resolve, reject, id: ++this.requestId };
      this.batch.push(request);
      
      console.log(`Request ${request.id} queued`);
      
      if (!this.timer) {
        this.timer = setTimeout(() => this.processBatch(), this.batchTimeout);
      }
    });
  }

async processBatch() {
    if (this.batch.length === 0) {
      this.timer = null;
      return;
    }

const currentBatch = [...this.batch];
    this.batch = [];
    this.timer = null;

console.log(`Processing batch of ${currentBatch.length} requests`);

try {
      // Simulate batch API call
      const batchResponse = await this.makeBatchCall(currentBatch);
      
      // Distribute responses
      currentBatch.forEach(request => {
        const response = batchResponse[request.id];
        request.resolve(response);
      });
    } catch (error) {
      currentBatch.forEach(request => {
        request.reject(error);
      });
    }
  }

async makeBatchCall(requests) {
    // Simulate network delay
    await new Promise(resolve => setTimeout(resolve, 100));
    
    // Simulate batch response
    const response = {};
    requests.forEach(request => {
      response[request.id] = {
        id: request.id,
        url: request.url,
        data: request.data,
        result: `Processed: ${JSON.stringify(request.data)}`,
        timestamp: Date.now()
      };
    });
    
    return response;
  }
}

// Usage
const batcher = new RequestBatcher(100);

// Multiple simultaneous requests
async function testBatcher() {
  console.log('Making multiple requests...');
  
  const requests = [
    batcher.request('/api/user', { id: 1 }),
    batcher.request('/api/user', { id: 2 }),
    batcher.request('/api/user', { id: 3 }),
    batcher.request('/api/user', { id: 4 }),
    batcher.request('/api/user', { id: 5 })
  ];

const results = await Promise.all(requests);
  console.log('All results received:', results.map(r => r.result));
}

testBatcher();

Caching Strategy

JavaScript Editor

// Advanced Caching with TTL and Stale-While-Revalidate
class CacheManager {
  constructor() {
    this.cache = new Map();
    this.maxSize = 100;
    this.defaultTTL = 5 * 60 * 1000; // 5 minutes
  }

async get(key, fetcher, options = {}) {
    const { ttl = this.defaultTTL, staleWhileRevalidate = false } = options;
    const now = Date.now();
    
    // Check cache
    const cached = this.cache.get(key);
    
    if (cached) {
      const { data, timestamp } = cached;
      const age = now - timestamp;
      
      if (age < ttl) {
        console.log(`Cache HIT for ${key}`);
        return data;
      }
      
      if (staleWhileRevalidate && age < ttl * 2) {
        console.log(`Cache STALE for ${key}, returning stale data while revalidating`);
        // Revalidate in background
        this.revalidate(key, fetcher, ttl);
        return data;
      }
      
      console.log(`Cache EXPIRED for ${key}`);
      this.cache.delete(key);
    }
    
    console.log(`Cache MISS for ${key}, fetching...`);
    return this.fetchAndCache(key, fetcher, ttl);
  }

async fetchAndCache(key, fetcher, ttl) {
    try {
      const data = await fetcher();
      this.set(key, data, ttl);
      return data;
    } catch (error) {
      console.error(`Failed to fetch ${key}:`, error);
      throw error;
    }
  }

async revalidate(key, fetcher, ttl) {
    try {
      const data = await fetcher();
      this.set(key, data, ttl);
      console.log(`Cache REVALIDATED for ${key}`);
    } catch (error) {
      console.error(`Failed to revalidate ${key}:`, error);
    }
  }

set(key, data, ttl = this.defaultTTL) {
    // Remove oldest item if cache is full
    if (this.cache.size >= this.maxSize) {
      const oldestKey = this.cache.keys().next().value;
      this.cache.delete(oldestKey);
    }
    
    this.cache.set(key, {
      data,
      timestamp: Date.now(),
      ttl
    });
  }

delete(key) {
    this.cache.delete(key);
  }

clear() {
    this.cache.clear();
  }

size() {
    return this.cache.size;
  }
}

// Usage
const cache = new CacheManager();

async function fetchUserData(userId) {
  console.log(`Fetching user ${userId} from API...`);
  // Simulate API call
  await new Promise(resolve => setTimeout(resolve, 1000));
  return { id: userId, name: `User ${userId}`, fetchedAt: Date.now() };
}

async function testCache() {
  console.log('First call (will fetch):');
  const user1 = await cache.get('user-1', () => fetchUserData(1), {
    ttl: 3000, // 3 seconds
    staleWhileRevalidate: true
  });
  console.log('Result:', user1);

console.log('\nSecond call (from cache):');
  const user1Cached = await cache.get('user-1', () => fetchUserData(1));
  console.log('Result:', user1Cached);

console.log('\nWaiting 4 seconds for cache to expire...');
  await new Promise(resolve => setTimeout(resolve, 4000));

console.log('Third call (expired, will refetch):');
  const user1Refreshed = await cache.get('user-1', () => fetchUserData(1));
  console.log('Result:', user1Refreshed);
}

testCache();

4. Memory Optimization

Object Pool Pattern

Reuse objects instead of creating new ones.

JavaScript Editor

// Object Pool for frequent object creation
class ObjectPool {
  constructor(createFn, resetFn, initialSize = 10) {
    this.createFn = createFn;
    this.resetFn = resetFn;
    this.pool = [];
    this.active = new Set();
    
    // Initialize pool
    for (let i = 0; i < initialSize; i++) {
      this.pool.push(this.createFn());
    }
  }

acquire() {
    let obj;
    
    if (this.pool.length > 0) {
      obj = this.pool.pop();
    } else {
      obj = this.createFn();
      console.log('Created new object, pool empty');
    }
    
    this.active.add(obj);
    return obj;
  }

release(obj) {
    if (this.active.has(obj)) {
      this.resetFn(obj);
      this.active.delete(obj);
      this.pool.push(obj);
    }
  }

releaseAll() {
    this.active.forEach(obj => {
      this.resetFn(obj);
      this.pool.push(obj);
    });
    this.active.clear();
  }

get stats() {
    return {
      poolSize: this.pool.length,
      activeCount: this.active.size,
      total: this.pool.length + this.active.size
    };
  }
}

// Usage: Particle System
class Particle {
  constructor() {
    this.x = 0;
    this.y = 0;
    this.vx = 0;
    this.vy = 0;
    this.life = 0;
    this.color = '#000';
  }
  
  reset() {
    this.x = 0;
    this.y = 0;
    this.vx = 0;
    this.vy = 0;
    this.life = 0;
    this.color = '#000';
  }
  
  update() {
    this.x += this.vx;
    this.y += this.vy;
    this.life--;
    return this.life > 0;
  }
}

// Create object pool
const particlePool = new ObjectPool(
  () => new Particle(),
  (particle) => particle.reset(),
  100
);

// Test performance
console.time('With Object Pool');
const particles = [];
for (let i = 0; i < 1000; i++) {
  const particle = particlePool.acquire();
  particle.x = Math.random() * 100;
  particle.y = Math.random() * 100;
  particle.vx = (Math.random() - 0.5) * 2;
  particle.vy = (Math.random() - 0.5) * 2;
  particle.life = 100;
  particle.color = `hsl(${Math.random() * 360}, 100%, 50%)`;
  particles.push(particle);
}

// Simulate animation frame
particles.forEach(particle => {
  if (!particle.update()) {
    particlePool.release(particle);
  }
});

console.timeEnd('With Object Pool');
console.log('Pool stats:', particlePool.stats);

// Compare with regular creation
console.time('Without Object Pool');
const regularParticles = [];
for (let i = 0; i < 1000; i++) {
  const particle = new Particle();
  particle.x = Math.random() * 100;
  particle.y = Math.random() * 100;
  regularParticles.push(particle);
}
console.timeEnd('Without Object Pool');

5. Performance Monitoring

Performance Measurement Tools

JavaScript Editor

// Performance Measurement Utilities
class PerformanceMonitor {
  constructor() {
    this.metrics = new Map();
    this.marks = new Map();
  }

start(name) {
    if (this.marks.has(name)) {
      console.warn(`Marker "${name}" already exists`);
    }
    this.marks.set(name, performance.now());
  }

end(name) {
    if (!this.marks.has(name)) {
      console.warn(`Marker "${name}" not found`);
      return null;
    }
    
    const startTime = this.marks.get(name);
    const endTime = performance.now();
    const duration = endTime - startTime;
    
    this.marks.delete(name);
    
    // Update metrics
    if (!this.metrics.has(name)) {
      this.metrics.set(name, []);
    }
    this.metrics.get(name).push(duration);
    
    return duration;
  }

measure(name, fn) {
    this.start(name);
    try {
      const result = fn();
      const duration = this.end(name);
      return { result, duration };
    } catch (error) {
      this.marks.delete(name);
      throw error;
    }
  }

async measureAsync(name, asyncFn) {
    this.start(name);
    try {
      const result = await asyncFn();
      const duration = this.end(name);
      return { result, duration };
    } catch (error) {
      this.marks.delete(name);
      throw error;
    }
  }

getStats(name) {
    const durations = this.metrics.get(name) || [];
    if (durations.length === 0) return null;
    
    const sum = durations.reduce((a, b) => a + b, 0);
    const avg = sum / durations.length;
    const max = Math.max(...durations);
    const min = Math.min(...durations);
    
    return {
      count: durations.length,
      average: avg,
      min: min,
      max: max,
      total: sum,
      durations: durations
    };
  }

clear() {
    this.metrics.clear();
    this.marks.clear();
  }

logStats() {
    console.log('=== Performance Metrics ===');
    for (const [name, durations] of this.metrics) {
      const stats = this.getStats(name);
      console.log(`${name}:`, {
        count: stats.count,
        avg: `${stats.average.toFixed(2)}ms`,
        min: `${stats.min.toFixed(2)}ms`,
        max: `${stats.max.toFixed(2)}ms`
      });
    }
  }
}

// Usage
const monitor = new PerformanceMonitor();

// Measure synchronous operation
function expensiveCalculation(n) {
  let result = 0;
  for (let i = 0; i < n; i++) {
    for (let j = 0; j < n; j++) {
      result += i * j;
    }
  }
  return result;
}

monitor.measure('calculation-100', () => expensiveCalculation(100));
monitor.measure('calculation-200', () => expensiveCalculation(200));

// Measure asynchronous operation
async function fetchData() {
  await new Promise(resolve => setTimeout(resolve, 100));
  return { data: 'fetched' };
}

async function testAsync() {
  await monitor.measureAsync('async-fetch', fetchData);
  await monitor.measureAsync('async-fetch-2', fetchData);
}

testAsync().then(() => {
  setTimeout(() => {
    monitor.logStats();
  }, 200);
});

// Long Task Monitoring
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach(entry => {
    console.log(`Long task detected: ${entry.name} took ${entry.duration.toFixed(2)}ms`);
    if (entry.duration > 50) {
      console.warn('Task took longer than 50ms, may cause jank');
    }
  });
});

observer.observe({ entryTypes: ['longtask'] });

Performance Checklist:

✅ Minify and bundle JavaScript files
✅ Use code splitting and lazy loading
✅ Optimize images and assets
✅ Implement caching strategies
✅ Minimize DOM manipulations
✅ Use Web Workers for heavy computations
✅ Monitor performance with DevTools
✅ Test on mobile devices

← Debounce & Throttle Memory Leaks →

Frontend

JavaScript & Frameworks

Backend

Artificial Intelligence

Database

CSS Frameworks

Data Analytics

Digital Marketing

Frontend

Backend

Artificial Intelligence

DevOps

Database

Cyber Security

JavaScript Tutorial

Performance Optimization

1. Rendering Optimization

Batch DOM Updates

Virtual Scrolling

2. Code Execution Optimization

Memoization

Lazy Loading Functions

3. Network Optimization

Request Batching

Caching Strategy

4. Memory Optimization

Object Pool Pattern

5. Performance Monitoring

Performance Measurement Tools

Performance Checklist:

Follow Us

Our Tools

Our Company

Special Tools