Performance API 监测 Canvas 游戏帧稳定性需捕获关键渲染阶段时间断点，通过 mark/measure 记录 frame/update/render 各阶段耗时，结合 p95 和 max 帧耗时识别抖动，并关联 DrawCall 定位瓶颈。
直接用 Performance API 监测 Canvas 游戏帧稳定性，核心不是“记录每一帧”，而是捕获关键渲染阶段的时间断点，并结合帧耗时分布做稳定性判断。重点在于把 requestAnimationFrame 的执行时机、绘制逻辑耗时、清屏与合成开销全部纳入高精度时间线。
用 mark + measure 锁定单帧完整生命周期
在每一帧的动画循环起始和结束处打标记，再测量区间耗时：
- 在
requestAnimationFrame回调开头调用performance.mark('frame-start') - 在所有绘制操作（
ctx.clearRect、ctx.drawImage、路径填充等）完成后调用performance.mark('frame-end') - 立即执行
performance.measure('frame-duration', 'frame-start', 'frame-end')
这样每帧都会生成一条可被 getEntriesByType('measure') 拿到的精确耗时记录，分辨率优于毫秒级，不受系统时间跳变影响。
区分“逻辑帧”与“渲染帧”，避免误判
Canvas 游戏常存在逻辑更新与画面渲染不同步的情况（如固定 TPS + 可变 FPS）。建议分层打点：
-
performance.mark('update-start')和performance.mark('update-end')包裹状态更新、碰撞检测等 JS 计算 -
performance.mark('render-start')和performance.mark('render-end')包裹所有 Canvas 绘制调用 - 用
performance.measure分别记录update-duration和render-duration
若 render-duration 波动剧烈但 update-duration 稳定，说明瓶颈在绘图命令量或状态切换；反之则需优化 JS 逻辑。
Canvas 内容工厂（网格生成→多页 PDF→SVG 精准复刻）
下载
用户要生成可打印的中文字帖/练习纸、导出多页 A4 PDF 报告，或把 SVG 设计稿零误差还原到 Canvas 时使用。本技能是「Canvas 内容工厂闭环」的总控，编排：网格渲染引擎(13 种教育网格+拼音标注) → 多页 PDF 导出(A4 合成) → SVG 精准复刻(坐标误差<0.001px)。触发词：生成字帖、练习纸、导出 PDF、SVG 转 Canvas、印刷级还原、A4 报告、米字格田字格。
实时统计帧耗时分布，识别抖动模式
不只看平均 FPS，要关注第 95 百分位（p95）和最大单帧耗时：
- 每 100 帧收集一次
performance.getEntriesByType('measure')中类型为frame-duration的条目 - 提取
duration数值，计算 min / avg / p95 / max - p95 > 25ms 或 max > 40ms 即表明存在明显卡顿，需触发告警或降质策略（如简化特效）
可配合 PerformanceObserver 自动监听新 measure 条目，避免轮询开销：
for (const entry of list.getEntries()) {
if (entry.name === 'frame-duration') { /* 累计统计 */ }
}
});
observer.observe({ entryTypes: ['measure'] });
关联 DrawCall 与帧耗时，定位渲染瓶颈
若使用 LayaAir 等引擎，可将引擎统计面板中的 DrawCall 数与 frame-duration 做交叉分析：
- 在每帧末尾读取引擎的
Laya.Stat.drawCall值 - 用
performance.measure打点时，附带自定义 detail 字段：{ drawCall: Laya.Stat.drawCall } - 导出数据后，观察 “drawCall ≥ 80 时，frame-duration 是否集中突破 33ms”
这种强关联能快速验证是否因绘制调用过多导致帧不稳定，而非 CPU 或内存问题。
