HTML5 Canvas 压力测试

鱼缸基准测试

用实时动画鱼缸衡量浏览器动画吞吐能力。

当你需要用直观方式快速压测 Canvas 2D 渲染时,可以使用这个 fishbowl benchmark。增加鱼群数量、切换装饰效果、观察 FPS 与帧时间,也可以让自动压力模式为当前浏览器窗口寻找可持续的稳定分数。

无需安装Canvas 2D自动压力模式实时 FPS 历史
FPS

0.0

鱼数量

120

帧时间

0.0 ms

稳定分数

等待中

GPU / CPU 负载估计

负载估计

0%

Fishbowl FPS 历史

Waiting for samples
鱼缸动画产生 FPS 样本后,图表会自动填充。

关键指标

结合稳定分数和 FPS 曲线查看容量与一致性。

可复现设置

对比时固定鱼数量、效果、浏览器、窗口大小和电源模式。

实际负载

该负载更接近真实交互式 Canvas 场景,而不是单一合成计数器。

Fishbowl Benchmark 衡量什么

Fishbowl Benchmark 关注许多仪表盘、小游戏、教学工具和视觉特效都会使用的浏览器路径:HTML5 Canvas 2D。它不是渲染单个重型着色器,而是在每一帧绘制并驱动大量小对象。鱼、气泡、水草、粒子、光束、焦散纹理、岩石、珊瑚和可选轨迹共同形成一种混合负载,既包含 CPU 侧模拟,也包含 GPU 加速的栅格化与合成。

FPS 表示浏览器每秒可以呈现多少帧。帧时间表示每一帧的成本。相比短时间的高 FPS,低且稳定的帧时间通常更有参考价值,因为它说明动画能否在持续负载下保持流畅。稳定分数记录当前会话中接近 60 FPS 时达到过的最高鱼数量。

如何使用该测试

先使用默认鱼数量运行几秒,观察图表是否平稳。当帧时间比较稳定时,可以提高滑杆数值;也可以开启自动压力,让页面在性能健康时逐步增加鱼数量。2,000 条鱼按钮适合现代桌面设备快速加压,清空按钮则适合检查背景场景本身的基础开销。

要进行公平对比,请保持浏览器窗口大小、显示缩放、电源模式和效果开关一致。全屏通常会让测试更难,因为 canvas 覆盖更多像素。较小窗口往往能在 60 FPS 下承载更多鱼,因此比较两台设备时应记录窗口大小。

适用场景

你可以用这个 fishbowl benchmark 对比不同浏览器、集成显卡与独立显卡、笔记本电源配置、远程桌面环境或驱动更新。它与更重的 volume shader benchmark 互补:鱼缸测试突出 2D 绘制命令吞吐和合成表现,而体积着色器测试更专注于片元着色器数学计算。

正确解读结果

建议把最开始几秒视为预热阶段。页面启动后,浏览器引擎可能还在编译代码、调整缓冲区或切换合成路径。更可靠的结果不是瞬时峰值,而是图表收集足够样本后仍然稳定的表现。如果开启轨迹或焦散纹理后 FPS 明显下降,通常说明系统对额外绘制命令、透明混合或过度绘制更敏感,而不只是像素填充能力不足。

最好的比较不是追求一个通用分数,而是在相同设置下完成可控的前后对比。

Last updated: May 8, 2026