---
name: js-ts-performance-optimization
description: "Techniques for optimizing JS/TS performance in both browser and server environments."
language: js-ts
---

# JS/TS Performance Optimization

Strategies for building fast and responsive JavaScript and TypeScript applications.

## Guidelines
- **Minimize Bundle Size**: Use tree-shaking, code-splitting (dynamic imports), and avoid heavy libraries.
- **Optimize React Rendering**: Use `useMemo`, `useCallback`, and `React.memo` to prevent unnecessary re-renders.
- **Efficient Loops**: Use built-in array methods (`map`, `filter`, `reduce`) or `for...of`. Avoid the overhead of old-style `for...in`.
- **Debouncing and Throttling**: Use these for high-frequency events like scrolling or typing.
- **Lazy Loading**: Lazy load images, components, and routes to improve initial load time.
- **Avoid Memory Leaks**: Clean up event listeners, timers, and subscriptions in component unmount/cleanup phases.
- **Web Workers**: Move heavy computations off the main thread to prevent UI blocking.
- **Server-Side Optimization**: In Node.js, avoid blocking the event loop with synchronous operations.

## Tools & Libraries
- **Lighthouse**: For auditing web performance.
- **Webpack Bundle Analyzer**: To visualize and optimize bundle sizes.
- **React DevTools Profiler**: For identifying React performance bottlenecks.
- **Clinic.js**: For profiling Node.js applications.

## Trigger Scenarios
- When a web page feels sluggish or has a low Lighthouse score.
- When a Node.js server is experiencing high latency.
- When optimizing large data processing tasks in the browser.
- When a developer asks how to reduce React re-renders.

<!-- synapsis-dsai-managed -->
