JavaScript性能分析核心是精准打点+结构化采集+可聚合上报，可通过performance.mark/measure标记函数生命周期、performance.now()手动计时统计、Proxy自动代理关键函数，并结合Long Tasks与调用堆栈定位热函数。
JavaScript 运行时性能分析中，监控函数调用频率与耗时，核心是**精准打点 + 结构化采集 + 可聚合上报**。浏览器不提供直接的“函数调用计数器”，但可通过轻量级代码包裹与 Performance API 组合实现高保真追踪，且不影响正常逻辑。
用 performance.mark() / measure() 标记关键函数生命周期
适合需分析执行路径、阶段耗时或跨函数协作的场景。它不侵入业务逻辑，只需在入口和出口插入语义化标记：
- 在函数开始处调用 performance.mark('fnName-start')
- 在函数结束处调用 performance.mark('fnName-end')
- 再用 performance.measure('fnName', 'fnName-start', 'fnName-end') 自动生成耗时记录
- 所有标记和测量数据可通过 performance.getEntriesByName('fnName', 'measure') 持续读取，支持多次调用累计分析
优势在于：DevTools → Performance 面板中可直观看到标记时间轴；支持按名称批量统计分位数（如 P95 耗时）；天然兼容异步流程（如 Promise.then 前后打标）。
用 performance.now() 包裹函数并手动计数
适用于高频、简单、需实时统计调用次数与平均耗时的函数（如事件处理器、渲染回调）：
立即学习“Java免费学习笔记（深入）”；
- 定义一个计数器对象：const stats = { count: 0, total: 0 }
- 在函数内首尾分别记录：const t0 = performance.now(); ... const t1 = performance.now();
- 更新统计：stats.count++; stats.total += t1 - t0;
- 可扩展为采样上报（如每 100 次触发一次 navigator.sendBeacon 上报当前均值与峰值）
注意避免在循环内高频调用 performance.now() 引发微小开销，但对普通业务函数完全无感。
自动代理关键函数（无需修改原函数）
对已存在、不便修改的函数（如第三方库方法、框架钩子），可用 Function.prototype.bind 或 Proxy 实现无侵入包装：
- 例如重写 addEventListener 的回调参数，自动注入计时逻辑
- 用 Proxy 包裹目标对象方法，拦截调用并记录：new Proxy(obj, { apply(target, thisArg, args) { /* 计时+计数 */ return target.apply(thisArg, args); } })
- 配合白名单机制（如只监控含 'onScroll'、'render'、'update' 字样的函数名），防止全量代理拖慢启动
该方式适合 SDK 或监控脚本集成，一次注入，长期生效，开发者无感知。
结合 Long Tasks 和调用堆栈定位“热函数”
单看函数自身耗时不全面——真正影响体验的是它是否出现在长任务中，以及是否频繁被同一调用链触发：
- 启用 PerformanceObserver 监听 longtask，检查 entry.attribution 字段，快速锁定主线程阻塞源头函数
- 在函数内用 new Error().stack（或 console.trace()）临时抓取调用链，识别高频触发路径（如“input → debounce → apiCall”）
- 将函数名 + 调用深度 + 耗时三者关联存储，可发现“看似快、但被调用 200 次/秒”的隐形瓶颈
这类分析不追求实时，而用于构建函数热度图谱，指导优化优先级排序。
