开发预览更新于 2026-05-10

Flamegraph 性能火焰图

层级矩形渲染的性能 flame chart。点击矩形 zoom-in，左上角按钮重置；hover 显示自身 value 与占比；颜色按 category 或函数名哈希。

基础用法

输入一颗 FlameNode 树：{ name, value, children?, category? }。组件递归把每个节点按 value / parent.value 切成宽度比例。点击某一帧把它视作新 root 重新铺满；点击「重置缩放」恢复。

背景视口

src/App.vue

<script setup lang="ts">
import { CfFlamegraph, type FlameNode } from '@chufix-design/vue';

const data: FlameNode = {
  name: 'request handler',
  value: 240,
  children: [
    {
      name: 'auth middleware',
      value: 28,
      category: 'auth',
      children: [
        { name: 'verify jwt', value: 18, category: 'auth' },
        { name: 'load user', value: 10, category: 'db' },
      ],
    },
    {
      name: 'controller',
      value: 180,
      children: [
        {
          name: 'fetch entries',
          value: 110,
          category: 'db',
          children: [
            { name: 'SELECT entries', value: 80, category: 'db' },
            { name: 'SELECT tags', value: 30, category: 'db' },
          ],
        },
        {
          name: 'render',
          value: 70,
          category: 'render',
          children: [
            { name: 'template walk', value: 40, category: 'render' },
            { name: 'serialize json', value: 30, category: 'render' },
          ],
        },
      ],
    },
    { name: 'logger', value: 12, category: 'logging' },
    { name: 'response.send', value: 20, category: 'io' },
  ],
};
</script>
<template>
  <CfFlamegraph :data="data" />
</template>

<script setup>
import { CfFlamegraph } from '@chufix-design/vue';

const data= {
  name: 'request handler',
  value: 240,
  children: [
    {
      name: 'auth middleware',
      value: 28,
      category: 'auth',
      children: [
        { name: 'verify jwt', value: 18, category: 'auth' },
        { name: 'load user', value: 10, category: 'db' },
      ],
    },
    {
      name: 'controller',
      value: 180,
      children: [
        {
          name: 'fetch entries',
          value: 110,
          category: 'db',
          children: [
            { name: 'SELECT entries', value: 80, category: 'db' },
            { name: 'SELECT tags', value: 30, category: 'db' },
          ],
        },
        {
          name: 'render',
          value: 70,
          category: 'render',
          children: [
            { name: 'template walk', value: 40, category: 'render' },
            { name: 'serialize json', value: 30, category: 'render' },
          ],
        },
      ],
    },
    { name: 'logger', value: 12, category: 'logging' },
    { name: 'response.send', value: 20, category: 'io' },
  ],
};
</script>
<template>
  <CfFlamegraph :data="data" />
</template>

import { CfFlamegraph } from '@chufix-design/react';

export default function Demo() {
  const data: FlameNode = {
    name: 'request handler',
    value: 240,
    children: [
      {
        name: 'auth middleware',
        value: 28,
        category: 'auth',
        children: [
          { name: 'verify jwt', value: 18, category: 'auth' },
          { name: 'load user', value: 10, category: 'db' },
        ],
      },
      {
        name: 'controller',
        value: 180,
        children: [
          {
            name: 'fetch entries',
            value: 110,
            category: 'db',
            children: [
              { name: 'SELECT entries', value: 80, category: 'db' },
              { name: 'SELECT tags', value: 30, category: 'db' },
            ],
          },
          {
            name: 'render',
            value: 70,
            category: 'render',
            children: [
              { name: 'template walk', value: 40, category: 'render' },
              { name: 'serialize json', value: 30, category: 'render' },
            ],
          },
        ],
      },
      { name: 'logger', value: 12, category: 'logging' },
      { name: 'response.send', value: 20, category: 'io' },
    ],
  };
  return (
    <>
      <CfFlamegraph data={data} />
    </>
  );
}

import { CfFlamegraph } from '@chufix-design/react';

export default function Demo() {
  const data= {
    name: 'request handler',
    value: 240,
    children: [
      {
        name: 'auth middleware',
        value: 28,
        category: 'auth',
        children: [
          { name: 'verify jwt', value: 18, category: 'auth' },
          { name: 'load user', value: 10, category: 'db' },
        ],
      },
      {
        name: 'controller',
        value: 180,
        children: [
          {
            name: 'fetch entries',
            value: 110,
            category: 'db',
            children: [
              { name: 'SELECT entries', value: 80, category: 'db' },
              { name: 'SELECT tags', value: 30, category: 'db' },
            ],
          },
          {
            name: 'render',
            value: 70,
            category: 'render',
            children: [
              { name: 'template walk', value: 40, category: 'render' },
              { name: 'serialize json', value: 30, category: 'render' },
            ],
          },
        ],
      },
      { name: 'logger', value: 12, category: 'logging' },
      { name: 'response.send', value: 20, category: 'io' },
    ],
  };
  return (
    <>
      <CfFlamegraph data={data} />
    </>
  );
}

API

Props

属性	类型	默认	说明
`data`	`FlameNode`	—	根节点
`rowHeight`	`number`	`18`	每层像素高
`minWidth`	`number`	`2`	最小矩形宽（避免极窄帧消失）
`unit`	`string`	`'ms'`	tooltip 中显示的单位

Events

事件	载荷	说明
`frame-click`	`(node, path)`	点击某帧（已 zoom 进去）
`frame-hover`	`node \| null`	hover