背景 & 问题现象

在某前端项目中,我们观察到一个诡异现象:

排查过程初步排查与误判

研发通过小蜜咨询 Marmot 团队,获得初步诊断:高频函数调用导致性能问题

建议方案:将高调用文件加入覆盖率白名单(跳过插桩)。

通过分析首次覆盖率上报数据,映射构建产物 reflectJsonUrl 对应的原始文件,简单累计排序后发现:

某工具函数被调用超 9 万次。于是尝试将高调用文件加入覆盖率白名单。

结果:问题依然存在。

进一步观察发现,这些高调用 hooks 都有一个共性,内部都调用 useModel 的某个公用 model。

于是怀疑是否 useModel 导致指数级重复调用导致?

但经简单分析:

因为 useModel 性能问题只会导致内部订阅函数(handel) 重复调用,handel 调用不会导致页面多次渲染

useModel(handel)触发多次 -> react合并调度 -> 页面只会渲染一次

→ 初步方向被证伪。