Lesson 12 / 25
JavaScript optimization
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
Quick check: What is considered a long task in JavaScript?
- Task taking >50ms
- Task taking >1 second
- Any task