一个用于显示Unity函数耗时的火焰图可视化工具，支持单独显示和diff对比功能。

• 层次化显示: 以火焰图形式展示函数调用层次和耗时
• 颜色编码: 根据耗时长短使用不同颜色标识
  • 红色: 高耗时函数 (>10ms)
  • 橙色: 中等耗时函数 (1-10ms)
  • 绿色: 低耗时函数 (<1ms)
• 交互式操作: 支持鼠标悬停查看详情、点击选择、双击深入

• 统计信息: 显示总样本数、函数数、最大调用深度等
• 函数详情: 展示选中函数的详细耗时信息
• 搜索功能: 快速定位特定函数
• 排序选项: 支持按时间或名称排序

• 最小耗时过滤: 隐藏低于阈值的函数调用
• 行高调节: 自定义火焰图行高
• 显示选项: 控制函数名称、耗时数据的显示
• 对比模式: 支持两个数据集的diff对比

• JSON导入: 支持拖拽或选择JSON文件导入
• 图片导出: 将火焰图导出为PNG图片
• 面包屑导航: 显示当前查看的函数层级路径

工具接受以下JSON格式的树形结构数据：

{
  "name": "函数名称",
  "time": 总耗时(毫秒),
  "selfTime": 自身耗时(毫秒),
  "children": [
    {
      "name": "子函数名称",
      "time": 子函数耗时,
      "selfTime": 子函数自身耗时,
      "children": []
    }
  ]
}

• name: 函数或方法名称
• time: 该函数及其所有子函数的总耗时
• selfTime: 该函数自身的耗时（不包括子函数）
• children: 子函数数组，可以嵌套多层

直接在浏览器中打开 index.html 文件

• 方式一: 点击"选择JSON文件"按钮选择数据文件
• 方式二: 直接将JSON文件拖拽到火焰图区域
• 方式三: 使用提供的示例数据 sample-data.json

在左侧面板中调整以下参数：

• 最小占用时间: 设置显示的最小耗时阈值
• 行高: 调整火焰图的行高度
• 显示选项: 控制显示内容
• 排序方式: 选择排序方法

• 鼠标悬停: 查看函数详细信息
• 单击: 选择函数并在右侧显示详情
• 双击: 深入到该函数的子调用层级
• 搜索: 在搜索框中输入函数名进行查找

点击"导出图片"按钮将当前火焰图保存为PNG格式

• 前端技术: HTML5 Canvas + JavaScript
• 样式框架: 纯CSS实现，绿色主题设计
• 数据处理: 原生JavaScript，支持大型数据集
• 交互体验: 响应式设计，支持桌面和移动端

flame-graph/
├── index.html          # 主页面文件
├── styles.css          # 样式文件
├── flame-graph.js      # 核心JavaScript逻辑
├── sample-data.json    # 示例数据文件
└── README.md          # 说明文档

• Chrome 60+
• Firefox 55+
• Safari 12+
• Edge 79+

主要方法：

• render(): 渲染火焰图
• handleMouseMove(): 处理鼠标交互
• search(): 搜索功能
• exportImage(): 导出图片

• 支持添加diff对比模式
• 可扩展更多数据源格式
• 支持更多导出格式

MIT License

• 初始版本发布
• 基础火焰图显示功能
• 交互式操作支持
• JSON数据导入
• 图片导出功能