HTML5鱼缸性能测试（Fishbowl Benchmark）是一款面向浏览器图形渲染能力的在线基准测试工具。页面会在鱼缸场景中持续绘制多条游动的金鱼，并结合水面、鱼缸遮罩、光影等图层，直观反映当前浏览器在Canvas动画下的流畅程度。

该测试源自经典的网页性能演示思路：设备与浏览器越强，通常能更稳定地维持更高帧率，也更容易同时承载更多鱼的运动计算与绘制。你可以用它快速对比不同浏览器、不同设备，或同一台电脑在开启硬件加速前后的差异。

核心功能

• 通过Canvas持续渲染鱼缸场景与游动金鱼，观察动画是否卡顿、掉帧。
• 支持按预设数量切换鱼的数量（含自动模式），便于从轻度到极限逐步加压。
• 可单独开关水面、边框、遮罩、背景、金鱼、前景、高光、阴影、音频、Logo、FPS表盘与指针等图层，便于定位性能瓶颈来自哪一层。
• 提供FPS相关可视化反馈，帮助理解当前帧率变化趋势。

适用场景

• 前端开发者验证目标浏览器的Canvas动画表现。
• 普通用户对比电脑、平板或手机浏览器的流畅度。
• 采购或装机后快速做一次图形相关的网页性能测试。
• 排查是否因浏览器扩展、省电模式、后台占用导致动画明显变慢。

使用方法

1. 打开工具后等待资源加载完成，鱼缸动画会自动开始运行。
2. 在控制面板的Fish菜单中选择鱼的数量，或使用Auto让系统按性能自动调节。
3. 观察画面流畅度，并结合FPS相关显示判断当前帧率是否稳定。
4. 按需开关Layers中的各项图层，对比关闭部分效果后性能是否改善。
5. 如需安静环境，可关闭Audio；若只想看纯鱼群压力，可关闭非必要装饰图层。

如何理解测试结果

帧率越高、画面越顺滑，通常说明当前浏览器处理Canvas绘制与动画循环更轻松。当鱼数量增加后，如果出现明显卡顿、掉帧或风扇明显提速，说明已经接近当前环境的性能上限。不同浏览器内核、驱动版本、是否启用硬件加速，都可能让同一台设备得到不同结果，因此更适合做相对对比，而不是当成绝对分数。

使用建议

• 测试前尽量关闭占用GPU/CPU的其他标签页和大型程序，结果会更接近真实峰值。
• 笔记本建议接上电源，避免省电策略限制性能。
• 若画面长时间卡在加载，请检查网络与素材是否完整可用。
• 移动端也能体验，但高数量鱼群更适合桌面浏览器压力测试。

常见问题

为什么我这边鱼很少却也很卡？

可能是浏览器未开启硬件加速、显卡驱动过旧、系统资源紧张，或当前标签处于后台节流状态。可先换浏览器、更新驱动后再对比。

数量选得很高会不会把电脑弄坏？

一般不会损坏硬件，但会显著提高CPU/GPU占用与发热。感到明显发烫或风扇狂转时，降低鱼数量或关闭页面即可。

关闭部分图层后FPS升高说明什么？

说明被关闭的那一层绘制成本较高。例如水面视频、光影与大量金鱼叠加时，关闭其中一项常能立刻减轻压力。

这个工具能替代专业跑分软件吗？

不能完全替代。它更侧重网页Canvas动画场景的相对对比，适合快速体检与浏览器横向比较，不适合作为完整硬件评测结论。