Canvas性能测试中FPS需用requestAnimationFrame配合performance.now()滑动窗口法计算：每帧记录时间戳，保留最近60个，用最新减最老时间除以帧数减一得平均帧耗时，再换算FPS；须监听visibilityState暂停统计，并优化更新频率与DOM操作以避免性能干扰。
Canvas 性能测试中，用 requestAnimationFrame 统计帧率不是“直接读取”，而是靠时间差推算——它本身不返回 FPS 数值，只提供高精度触发时机。关键在于稳定、抗干扰地计算单位时间内的有效帧数。
用滑动窗口法统计真实 FPS
固定 1 秒计数容易受页面失焦、主线程卡顿影响，出现跳变或归零。滑动窗口更鲁棒：
- 每次
requestAnimationFrame回调时，记录performance.now()时间戳 - 只保留最近 60 个时间戳（约覆盖 1 秒满帧）
- 用最新时间减去最老时间，除以帧数减一，得到平均单帧耗时
- 再换算：FPS = 1000 ÷ 平均单帧耗时（ms），四舍五入后显示
必须用 performance.now()，不用 Date.now()
performance.now() 返回单调递增的浮点毫秒值，精度达微秒级，不受系统时间调整影响；Date.now() 可能因 NTP 校时突变，导致帧间隔算出负值或极大异常，直接让 FPS 崩溃。尤其在长时间运行或用户手动改时间时，这点尤为关键。
Canvas 内容工厂（网格生成→多页 PDF→SVG 精准复刻）
下载
用户要生成可打印的中文字帖/练习纸、导出多页 A4 PDF 报告，或把 SVG 设计稿零误差还原到 Canvas 时使用。本技能是「Canvas 内容工厂闭环」的总控，编排：网格渲染引擎(13 种教育网格+拼音标注) → 多页 PDF 导出(A4 合成) → SVG 精准复刻(坐标误差<0.001px)。触发词：生成字帖、练习纸、导出 PDF、SVG 转 Canvas、印刷级还原、A4 报告、米字格田字格。
避免统计被后台节流干扰
浏览器在标签页不可见时会大幅降低 requestAnimationFrame 频率（甚至暂停），但统计逻辑若未感知，仍会把稀疏回调当正常帧，拉低 FPS 显示。建议：
- 监听
document.visibilityState，非 visible 时暂停统计逻辑 - 恢复可见时重置时间戳数组，避免用积压旧数据污染当前帧率
- 可额外加状态标记（如
isPageVisible），确保 FPS 显示反映的是“前台渲染能力”
别让 FPS 统计拖慢动画本身
频繁计算、DOM 更新、console.log 都会增加主线程负担。优化要点：
- 每帧只做时间戳 push 和数组维护，FPS 计算可每 200ms 更新一次，而非每帧都算
- 显示 FPS 的 DOM 元素用
textContent更新，避免触发重排 - 开发阶段开启统计，上线前关闭或设为条件编译，防止干扰真实性能
