Performance

Master production-level performance optimization techniques for building fast, scalable applications.

Learn Python, JavaScript, Java and more with free interactive lessons, real projects and AI-powered help. Beginner-friendly.

Part of the free JavaScript course at LearnCodingFast — hands-on lessons with examples you run in your browser, plus practice exercises and a quick quiz.

💡 Running Code Locally: While this online editor runs real JavaScript, some advanced examples may have limitations. For the best experience:

Think of performance optimization like a Formula 1 pit crew . A few seconds saved in the pit stop can win or lose a race. Similarly, a few hundred milliseconds saved in your JavaScript can determine whether users stay or leave. Every optimization counts: tire changes (debouncing), fuel efficiency (memoization), aerodynamics (reducing bundle size), and smooth driving (avoiding layout thrashing).

Performance is the single most important feature of any application.

Users will abandon slow apps, no matter how beautiful or feature-rich.

This lesson will teach you how to think like a performance engineer.

By the end of this lesson, you'll be able to build apps that are not just functional, but lightning fast.

It's easy to assume where the slow parts of your code are, but assumptions are often wrong.

Always use the browser's Developer Tools to measure performance.

These tools will give you concrete data about where your app is spending its time.

JavaScript is single-threaded, meaning it can only do one thing at a time.

The Event Loop is what allows JavaScript to handle asynchronous operations without blocking the main thread.

When you make an API call or set a timer, the browser handles that operation in the background.

When the operation is complete, the browser puts a message on the message queue.

The Event Loop constantly checks the message queue and executes any messages it finds.

If you block the main thread, the Event Loop can't process messages, and your app will freeze.

Blocking code is any code that takes a long time to execute and prevents the Event Loop from processing messages.

These techniques allow you to break up long-running tasks into smaller chunks that can be executed without blocking the main thread.

Debouncing and throttling are techniques for limiting the rate at which a function is executed.

Memoization is a technique for caching the results of expensive function calls and returning the cached result when the same inputs occur again.

Caching is a more general term for storing data so that future requests for that data can be served faster.

Memoization is a specific type of caching that applies to function calls.

The choice of data structure and algorithm can have a huge impact on performance.

Learn about Big-O notation to understand the performance characteristics of different algorithms.

DOM manipulation is often a performance bottleneck.

Memory leaks can cause your app to slow down over time.

Use the browser's Memory tab to identify memory leaks.

Web Workers allow you to run JavaScript code in the background, without blocking the main thread.

Web Workers have limited access to the DOM, so they are best suited for tasks that don't require DOM manipulation.

You've now mastered Performance Optimization at a true expert level:

This level of knowledge is what professional engineers use to build AAA game UIs, real-time dashboards, high-traffic social media sites, online shops serving millions, and web apps expected to run for hours without slowing.

Your apps are now faster, smoother, and more efficient. Performance is what separates junior developers from senior engineers.

Up next: Final Project — putting it all together to build something real! 🚀

Practice quiz

What is the first rule of performance optimization in this lesson?

  • Always cache everything
  • Rewrite in another language
  • Measure, don't guess
  • Avoid functions

Answer: Measure, don't guess. Measure first with DevTools and timers instead of guessing where slow code is.

Because JavaScript is single-threaded, what happens if you block the main thread?

  • The event loop can't process messages and the app freezes
  • Nothing changes
  • It speeds up
  • It spawns a new thread

Answer: The event loop can't process messages and the app freezes. Blocking the main thread stops the event loop, freezing the UI.

Which technique delays execution until the user stops triggering an event?

  • Throttling
  • Memoization
  • Tree shaking
  • Debouncing

Answer: Debouncing. Debouncing waits until activity stops, ideal for search boxes.

Which technique limits a function to run at most once per interval?

  • Debouncing
  • Throttling
  • Caching
  • Lazy loading

Answer: Throttling. Throttling caps how often a function runs, ideal for scroll handlers.

What does memoization cache?

  • The results of expensive function calls keyed by inputs
  • DOM nodes
  • Event listeners
  • Network sockets

Answer: The results of expensive function calls keyed by inputs. Memoization stores results so repeated calls with the same inputs return the cached value.

For membership checks, which is faster than Array.includes()?

  • A for loop
  • Another array
  • Set.has() which is O(1)
  • JSON.stringify

Answer: Set.has() which is O(1). Set lookup is O(1), while searching an array is O(n).

Which tools help avoid blocking the main thread with long tasks?

  • alert and confirm
  • Web Workers, setTimeout, requestAnimationFrame, chunk processing
  • innerHTML
  • document.write

Answer: Web Workers, setTimeout, requestAnimationFrame, chunk processing. These let you break or offload long-running work so the UI stays responsive.

How can you minimize costly DOM manipulation?

  • Update one node at a time in a loop
  • Use eval
  • Add more event listeners
  • Use document fragments and batch updates

Answer: Use document fragments and batch updates. Document fragments, batching, and a virtual DOM reduce expensive DOM operations.

Which is a way to reduce bundle size?

  • Add more libraries
  • Code splitting, removing unused code, and tree shaking
  • Inline everything
  • Disable caching

Answer: Code splitting, removing unused code, and tree shaking. Code splitting, dead-code removal, and tree shaking shrink the bundle.

What are Web Workers best suited for?

  • DOM-heavy rendering
  • Styling elements
  • Heavy background computation off the main thread
  • Reading cookies

Answer: Heavy background computation off the main thread. Web Workers run heavy work in the background but have limited DOM access.