Profiling CPU dan Flame Graph untuk Jalur Panas

When a Node.js backend feels slow, the cause is usually one of two things: the process is waiting (I/O, database, network) or it is computing (burning CPU on the single main thread). A CPU profile tells you exactly where the second kind of time goes.

• It samples the call stack at a fixed frequency (V8 uses ~1000 Hz, one sample per millisecond).
• Each sample records the function currently executing and its whole stack of callers.
• Functions that appear in many samples are your hot paths — the code worth optimizing.

Because Node.js runs JavaScript on one thread, a single hot function can block every incoming request. Profiling finds it instead of you guessing.

Every profiler distinguishes two numbers per function, and confusing them is the most common profiling mistake.

• Self time (a.k.a. exclusive): time spent executing the function's own body, excluding the children it called.
• Total time (a.k.a. inclusive): self time plus all time spent inside callees.

A function high in total time may just be an orchestrator that calls expensive children. The function high in self time is where the CPU actually burns. Optimize by self time first.

The fastest way to get a profile of a script is the built-in V8 flag. No extra packages, no code changes.

• node --prof app.js writes a raw isolate-*.log file.
• node --prof-process isolate-*.log > profile.txt turns it into a human-readable summary with a ticks breakdown.

The summary groups ticks by JavaScript, C++, and GC, and lists the heaviest functions. It is text-only, so for visual flame graphs we will use the inspector protocol next. Below is a CPU-bound workload you can profile this way.

For a long-running server you often want to profile a specific window of time. The built-in inspector module lets you start and stop the V8 CPU profiler from inside your code and save a .cpuprofile file.

• Open a Session, connect it, and enable the Profiler domain.
• Call Profiler.start, run the workload, then Profiler.stop.
• The returned profile is JSON you write to disk and load into Chrome DevTools or VS Code.

A flame graph turns the stack samples into a picture. Read it like this:

• The x-axis is NOT time — it is the population of stacks. Width = how many samples contained that frame, i.e. how much CPU it used.
• The y-axis is stack depth. The frame at the bottom is the caller; frames stacked on top are its callees.
• A wide frame means a function (and its children) consumed a lot of CPU. Wide frames at the top with little above them are the leaves doing the real work.

Colors are usually random and carry no meaning — do not read into them. You hunt for the widest plateaus, not the tallest towers.

These look similar but answer different questions, and Chrome DevTools shows both.

• Flame chart (DevTools "Performance" timeline): x-axis is wall-clock time, left to right. Great for seeing when something happened and ordering of events.
• Flame graph (aggregated): identical frames are merged and sorted by width. Great for seeing which function is hot across the whole run, regardless of when it ran.

For finding hot paths you want the aggregated flame graph: a function called 10,000 times in scattered moments shows up as one fat bar instead of 10,000 invisible slivers.

The 0x tool wraps your process, captures a profile, and produces an interactive HTML flame graph in one step — ideal for Node.js services.

• npx 0x app.js runs the app, and on exit opens a browser flame graph.
• For a server, hit it with load (for example with autocannon) while 0x records, then stop the process to generate the graph.

In the 0x viewer you can click any frame to zoom, and search by name to highlight every place a function appears. Below is a tiny HTTP server worth profiling under load.

A disciplined way to locate the hot path in any flame graph:

• Scan the top edge of the graph (the leaf frames). These are the functions actually running when samples were taken.
• Find the widest leaf or plateau. That single frame is your largest pool of self time.
• Trace downward from it to learn the call chain that leads there — that tells you who to change.

Beware framework noise: frames like (anonymous), module.exports, or runtime internals are often wide because everything flows through them. Ignore broad orchestrator frames and focus on wide leaf frames.

Flame graphs do not only reveal your code — they expose the V8 runtime too. If you see wide frames named things like GC, Scavenge, or Mark-Compact, the CPU is being spent collecting garbage, not running logic.

• High GC width usually means you are allocating too many short-lived objects on the hot path (string concatenation in loops, creating closures or arrays per request).
• The fix is rarely "optimize the function" — it is "allocate less": reuse buffers, preallocate arrays, avoid per-iteration object literals.

The example below allocates a fresh object on every iteration, the classic pattern that lights up GC frames.

V8 compiles hot functions to optimized machine code. When a function is forced back to slower bytecode it is deoptimized, and that shows up as unexpectedly wide frames.

• Run with node --trace-deopt app.js to log every deopt with its reason (e.g. changing object shapes, mixing types in an array).
• node --trace-opt app.js shows which functions got optimized.
• Keeping function arguments monomorphic (always the same shape/type) lets V8 keep them optimized and inlined.

The function below stays fast because it always receives numbers; passing it a string would trigger a deopt and a wider frame in the profile.

Put the pieces together into a loop you can run on any backend:

• Reproduce the load deterministically (a benchmark or replayed traffic), so two profiles are comparable.
• Record a profile (--prof, the inspector session, or 0x).
• Read the flame graph: widest leaf frame = biggest self time = first target.
• Fix exactly that function, change nothing else.
• Re-profile under the same load and confirm the fat bar shrank.

Change one thing per iteration. If you fix three functions at once you will not know which change helped — and one might have made things worse.

You can now find and fix CPU hot paths in a Node.js backend:

• Self time (exclusive) is where the CPU burns; total time (inclusive) includes children. Optimize by self time.
• Record with node --prof, the built-in inspector Session, or 0x for an interactive flame graph.
• In a flame graph the x-axis is sample count (CPU), not time, and the y-axis is stack depth. Hunt for the widest leaf frame.
• Wide GC/Scavenge frames mean allocation pressure — allocate less rather than micro-optimizing logic.
• Use --trace-deopt to catch deoptimizations from polymorphic, shape-changing code.
• Work the loop: reproduce, record, read, fix one thing, re-profile.