用performance面板录制2–5秒真实操作生成火焰图，聚焦main线程中宽而高的绿色scripting块，通过bottom-up视图、ctrl+f搜索和zoom to selection精准定位js耗时函数，注意区分gc、layout等非js瓶颈。
直接用浏览器开发者工具的 Performance 面板录制并生成火焰图，就能直观定位耗时最长的函数——关键不是“怎么画图”，而是“怎么看懂、怎么过滤、怎么归因”。
打开 Performance 面板并录制真实运行场景
在 Chrome 或 Edge 中按 F12 → Performance 标签页 → 点击左上角圆点按钮（●）开始录制 → 执行你要分析的操作（比如点击按钮、滚动、加载数据）→ 再点停止按钮。 录制时间建议控制在 2–5 秒内，太长会导致火焰图过于密集难读；确保勾选 “Screenshots” 和 “JavaScript samples”，这样才能看到函数调用栈和帧率变化。
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
聚焦主线程（Main）下的 Flame Chart 区域
录制结束后，下方会显示火焰图（Flame Chart），横轴是时间，纵轴是调用栈深度。重点看 Main 线程轨道里的彩色块：越宽的条形代表该函数占用 CPU 时间越长，越高的堆叠表示调用层级越深。顶部最宽的函数（即火焰“尖端”）通常是直接触发者，但真正耗时的往往在它下方某一层——比如 render() 很宽，但展开后发现 calculateLayout() 占了其中 80% 时间。
用快捷键和筛选快速定位瓶颈函数
- 悬停查看详情：鼠标移到任意色块上，底部 Summary 面板会显示该函数的总耗时、自执行时间（Self Time）、调用次数和源码位置。
- 右键「Bottom-up」视图：这里按“自执行时间”倒序排列所有函数，排第一的就是纯计算耗时最长的（排除了子调用开销），适合快速抓出根因。
-
按 Ctrl/Cmd + F 搜索函数名：比如搜
map、sort、JSON.parse，常能发现隐式性能陷阱。 - 右键「Zoom to selection」：框选一段高耗时区域放大，避免被无关的空闲时间干扰判断。
注意常见误导点，避免误判
火焰图里宽 ≠ 一定有问题：垃圾回收（GC）事件、布局抖动（Layout Thrashing）、频繁重绘（Recalculate Style）也会拉宽色块，但它们属于渲染管线问题，不是 JS 函数本身慢。 判断方法：看色块颜色和标签——GC 是浅紫色带 “V8.GC” 字样，Layout 是橙黄色带 “Layout” 字样。如果发现大量绿色（Scripting）块连续堆积，才说明是 JS 执行拖慢了主线程。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
