# JavaScript optimization — Web Performance Optimization

Source: https://www.geekswithgeeks.com/en/web-performance/web-perf-12

> Reduce JavaScript execution time and bundle size through code splitting, tree-shaking, and efficient patterns.

## Reducing parse and compile time

Large JavaScript files take time to parse and compile. Use code splitting, remove polyfills for modern browsers, use `<script type=module>` for ES6 modules. Monitor Core Web Vitals after changes.

## Main thread optimization

Avoid blocking main thread. Break long tasks (>50ms) with `scheduler.yield()` or `requestIdleCallback()`. Use Web Workers for heavy computation. Monitor with DevTools Performance tab.

## Framework performance considerations

React: use React.memo, useMemo, useCallback. Vue: lazy component loading, v-show vs v-if. Angular: OnPush strategy, lazy routes. Each framework has optimization patterns—master your tool.

## JavaScript profiling

Use Performance tab in DevTools to find slow scripts. Record CPU profile to identify expensive functions. Look for: parse/compile time > execution time, main thread bottlenecks, frequent garbage collection.

Quick check

**Quiz:** What is considered a long task in JavaScript?

- [ ] Task taking >50ms
- [ ] Task taking >1 second
- [ ] Any task