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動畫場景的相對對比，適合快速體檢與瀏覽器橫向比較，不適合作爲完整硬件評測結論。