What causes slow JavaScript?

Almost always one of these, roughly in order of how often it is the real cause.

1. Too much JavaScript

Before anything runs, the browser downloads, parses and compiles your bundle. A large bundle delays interactivity even on a fast connection, and parse cost hits low-end phones hardest. Split by route, lazy-load what sits behind an interaction, and check what is actually in the bundle before optimising anything else.

2. Blocking the main thread

One thread does JavaScript, layout, paint and event handling. A long synchronous task freezes all of it:

const total = hugeArray.reduce(expensive, 0);   // nothing renders meanwhile

Break the work into chunks that yield to the event loop, or move it into a Web Worker. Anything over ~50 ms is a "long task" and will be felt.

3. Layout thrashing

Reading a geometric property forces the browser to flush pending layout. Alternating reads and writes in a loop triggers a full layout each iteration. Batch all reads, then all writes.

4. Too many DOM nodes

Rendering thousands of rows is slow no matter how efficient the framework. Virtualise long lists so only visible rows exist.

5. Unnecessary re-rendering

In React, new object or function identities on every render cascade into children. Memoise deliberately, and keep state as local as it can be.

6. Memory leaks

Listeners never removed, timers never cleared, detached DOM nodes still referenced, caches that only grow. The page gets slower the longer it is open.

7. Network waterfalls

Three sequential requests hurt more than three parallel ones of the same size.

The rule that matters most

Measure first. Use the Performance panel and the bundle analyser to find where time actually goes — the bottleneck is rarely where intuition says, and rewriting code that was never slow is the most common wasted effort in performance work.