Performance

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

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.

What You'll Learn in This Lesson

💡 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).

Problem

Technique

When to Use

Too many event fires

Debounce/Throttle

Search boxes, scroll handlers

Repeated expensive calculations

Memoization

Complex transforms, API results

Slow includes() checks

Use Set instead

Membership checks in loops

UI freezing during work

Chunk processing

Large data processing

Large initial bundle

Code splitting

Lazy load routes/components

Introduction

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.

1. The Importance of Measurement

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.

2. Understanding the Event Loop

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.

3. Avoiding Blocking Code

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.

4. Debouncing and Throttling

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

5. Memoization and Caching

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.

6. Data Structures and Algorithms

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.

7. DOM Manipulation

DOM manipulation is often a performance bottleneck.

8. Network Optimization

9. Memory Management

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

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

10. Web Workers

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.

What You've Mastered

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.

📋 Quick Reference — Performance

Use Case

Debounce

Delay execution until pause (search)

Throttle

Limit execution frequency (scroll)

Memoize

Cache expensive function results

Lazy Load

Load resources only when needed

Web Worker

Run heavy tasks off main thread

Lesson 14 Complete — Performance!

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.

Continue this course