performance-optimization

name	performance-optimization
description	Optimize performance for memory, CPU, network, and rendering. Use when improving FPS, reducing memory usage, or fixing performance bottlenecks.

⚡ Performance Optimization Skill

Memory Optimization

Avoid Memory Leaks

// ❌ Bad - listener not removed
element.addEventListener('click', handler);

// ✅ Good - cleanup
const controller = new AbortController();
element.addEventListener('click', handler, { signal: controller.signal });
// Later: controller.abort();

Object Pooling

class FramePool {
  constructor(size) {
    this.pool = Array(size).fill(null).map(() => new ArrayBuffer(1024 * 1024));
    this.available = [...this.pool];
  }
  
  acquire() {
    return this.available.pop() || new ArrayBuffer(1024 * 1024);
  }
  
  release(buffer) {
    this.available.push(buffer);
  }
}

---

Network Optimization

Debounce Requests

function debounce(fn, delay) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), delay);
  };
}

const debouncedSearch = debounce(searchAPI, 300);

Batch Requests

class RequestBatcher {
  constructor(batchFn, delay = 50) {
    this.queue = [];
    this.batchFn = batchFn;
    this.delay = delay;
  }
  
  add(item) {
    this.queue.push(item);
    clearTimeout(this.timer);
    this.timer = setTimeout(() => this.flush(), this.delay);
  }
  
  flush() {
    if (this.queue.length > 0) {
      this.batchFn([...this.queue]);
      this.queue = [];
    }
  }
}

---

Rendering Optimization

RequestAnimationFrame

// ❌ Bad
setInterval(render, 16);

// ✅ Good
function animate() {
  render();
  requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

Throttle FPS

let lastFrame = 0;
const targetFPS = 30;
const frameInterval = 1000 / targetFPS;

function animate(timestamp) {
  if (timestamp - lastFrame >= frameInterval) {
    render();
    lastFrame = timestamp;
  }
  requestAnimationFrame(animate);
}

---

Image/Video Optimization

Compression

// Canvas to JPEG with quality
canvas.toBlob((blob) => {
  sendFrame(blob);
}, 'image/jpeg', 0.5); // 50% quality

// Resize before send
const scale = 0.5;
ctx.drawImage(video, 0, 0, width * scale, height * scale);

Lazy Loading

<img loading="lazy" src="image.jpg">

---

Profiling Tools

Tool	Use Case
Chrome DevTools → Performance	CPU, rendering
Chrome DevTools → Memory	Memory leaks
Lighthouse	Overall score
console.time()	Measure code blocks

console.time('upload');
await uploadFile(file);
console.timeEnd('upload'); // upload: 1234ms

---

TitanMirror Performance

Setting	Value	Impact
Resolution	480p	-60% bandwidth
JPEG Quality	50%	-50% size
Target FPS	25	Smooth enough
ImageReader Buffer	5	Prevent drops