performance api 是最轻量可控的组件渲染耗时统计方式：vue 用 onmounted/onupdated 打点并触发 layout；react 用 useeffect/uselayouteffect 结合 performance.now()；小程序结合 page/component 生命周期；统一设阈值预警并动态调整后上报。
直接在关键生命周期节点插入 Performance API，是最轻量、最可控的组件渲染耗时统计方式。核心思路是：用 performance.mark() 打点记录时间锚点，再用 performance.measure() 计算两点间耗时，最后结合钩子语义判断该测什么阶段。
Vue 中利用 onMounted / onUpdated 打点
组件挂载完成、更新完成这两个时机，天然对应“渲染结束”状态，适合测完整渲染耗时：
-
挂载耗时：在
onMounted开头打起点标记，在强制触发一次 layout 后打终点标记（避免 Chrome 延迟渲染导致测量失真） -
更新耗时：在
onBeforeUpdate打起点，在onUpdated打终点，覆盖从响应式变化到 DOM 更新完成的全过程 -
注意：必须调用
document.documentElement.offsetHeight或类似 layout 触发操作，否则 measure 可能捕获不到真实渲染完成时刻
React 中用 useEffect + performance.now()
函数组件没有显式的“渲染完成”钩子，但 useEffect 在 DOM 提交后同步执行，可视为渲染结束信号：
- 在组件首次渲染后（
useEffect第一次执行），用performance.now()记录时间，减去组件函数开始执行前的时间戳，即为本次 render 耗时 - 若需区分 Render/Commit 阶段，可在
useLayoutEffect（Commit 前）和useEffect（Commit 后）分别打点，差值近似为 Commit 阶段耗时 - 避免使用
performance.measure()全局命名冲突，优先用now()手动计算更安全
小程序中结合 Page/Component 生命周期
微信小程序的 ready、show、hide 等钩子与页面状态强相关，适合统计业务级耗时：
-
组件初始化耗时：在自定义组件
lifetimes.created打起点，在lifetimes.ready打终点 -
页面首屏耗时：在
Page.onLoad启动计时，在Page.onReady结束，并用wx.createSelectorQuery确认关键节点渲染完成 -
页面切换耗时：监听
wx.onAppRoute，从跳转发起时刻到目标页onShow执行完成
统一预警与阈值控制
测出耗时只是第一步，关键是要让数据产生反馈：
- 对单次耗时超过阈值（如 80ms）的组件，用
console.warn输出带组件名的警告，便于开发期快速定位 - 阈值不应固定，可结合
navigator.hardwareConcurrency动态调整：低端设备设为 60ms，高端设备放宽至 100ms - 生产环境建议聚合上报：将
performance.getEntriesByType('measure')中匹配组件名的条目，按页面、设备、网络类型分组后定时上报
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
