---
id: wiki-2026-0508-flame-chart
title: Flame Chart
category: 10_Wiki/Topics
status: verified
canonical_id: self
aliases: [Flame Graph, 플레임 차트]
duplicate_of: none
source_trust_level: A
confidence_score: 0.9
verification_status: applied
tags: [profiling, performance, devtools, visualization]
raw_sources: []
last_reinforced: 2026-05-10
github_commit: pending
tech_stack:
  language: JavaScript
  framework: Chrome DevTools
---

# Flame Chart

## 매 한 줄
> **"매 시간축 stack frame 의 visual profile — width=duration, depth=call stack"**. Brendan Gregg (2013) 의 flame graph 매 origin. 2026 시점 Chrome DevTools Performance panel · Node `--prof` · Linux `perf` · Speedscope 매 standard tooling.

## 매 핵심

### 매 Flame Chart vs Flame Graph
- **Flame Chart**: x축 = 매 wall-clock time (left→right chronological). DevTools default.
- **Flame Graph**: x축 = 매 aggregated time (alphabetical), 매 hot path 발견.

### 매 reading rules
- 매 wide bar = 매 long-running function.
- 매 tall stack = 매 deep call chain (recursion · over-abstraction signal).
- 매 plateau = 매 single function dominate.

### 매 응용
1. JS main-thread bottleneck 식별.
2. React render 의 expensive component 추적.
3. Backend RPC handler latency 분해.

## 💻 패턴

### Chrome DevTools 캡처
```js
// 1. DevTools → Performance → Record
// 2. Reproduce slow interaction
// 3. Stop → bottom-up / call tree / flame chart 탭

// Programmatic mark
performance.mark("render-start")
expensiveRender()
performance.mark("render-end")
performance.measure("render", "render-start", "render-end")
```

### Node.js CPU profile
```bash
node --cpu-prof --cpu-prof-dir=./profiles app.js
# .cpuprofile 의 Chrome DevTools "Performance" 탭에 drag-drop
```

### 0x flame graph 생성
```bash
npx 0x -o server.js
# HTML 매 자동 open — interactive flame graph
```

### React Profiler API
```tsx
import { Profiler } from "react"

function onRender(id, phase, actualDuration) {
  if (actualDuration > 16) console.warn(`slow ${id}: ${actualDuration}ms`)
}

<Profiler id="UserList" onRender={onRender}>
  <UserList />
</Profiler>
```

### Speedscope (universal viewer)
```bash
# Node, Chrome, py-spy, perf 매 모두 import
npx speedscope profile.cpuprofile
```

## 매 결정 기준
| 상황 | Approach |
|---|---|
| Browser frontend lag | Chrome DevTools Performance |
| Node server CPU spike | `--cpu-prof` + DevTools |
| Production hot-path discovery | Flame **graph** (aggregated) |
| Specific user interaction | Flame **chart** (chronological) |

**기본값**: Chrome DevTools Performance panel — 매 60% case cover.

## 🔗 Graph
- 부모: [[Performance_Profiling_and_Memory|Performance Profiling]] · [[Chrome DevTools(크롬 개발자 도구)]]
- 변형: [[할당 타임라인(Allocation Timeline)]]
- 응용: [[Nodejs 성능 디버깅]] · [[SPA 라우트 전환 성능 최적화]]
- Adjacent: [[Core Web Vitals Optimization (INP, LCP, CLS)|Cumulative Layout Shift (CLS)]] · [[Google Lighthouse]]

## 🤖 LLM 활용
**언제**: 매 latency / jank / unknown bottleneck 발견 → flame chart 의 first tool.
**언제 X**: 매 memory leak (heap snapshot 사용) · 매 network waterfall (Network panel).

## ❌ 안티패턴
- **Optimize the wide-but-shallow bar**: 매 actually unimportant 일 수 있음 — call tree로 cross-check.
- **Sampling rate 신뢰**: 매 short bursts (<1ms) 의 missed — `performance.mark` precise.
- **Production 에서 always-on profiling**: 매 overhead — sampling profiler (e.g. `pprof`) 만 OK.

## 🧪 검증 / 중복
- Verified (Brendan Gregg flame graph paper · Chrome DevTools docs 2026).
- 신뢰도 A.

## 🕓 Changelog
| 날짜 | 변경 |
|---|---|
| 2026-05-08 | Phase 1 |
| 2026-05-10 | Manual cleanup — DevTools/0x/Speedscope tooling 매 설명 |