星空不一定要一直转:给 Three.js 页面留一条回退路径
先判断需要多重的画面
本站的性能判断返回 high、mid、low 三档。它并不试图精确测出显卡性能,而是根据一些容易取得的信号,为页面选择一个起点。
减少动态效果偏好、节省流量设置、内存、逻辑核心数和触摸设备特征,都参与判断。拿不到内存信息时,代码使用默认值,而不是直接把设备判成最低档。
检测本身也会花时间
当前实现只检查 WebGL2RenderingContext 是否存在。注释里保留了一个取舍:创建真实 WebGL 上下文,在软件渲染环境里可能阻塞主线程,所以没有把它放进最前面的能力判断。
存在这个接口也不保证星系一定能成功启动,因此场景启动失败时仍然需要回退。
低档画面也应该完整
静态星空不是一张报错提示。导航、作品和正文都应该继续可用,让读者能直接进入内容。开场效果失败,不应让整个页面都停在等待状态。
分级只是起点
硬件信息无法准确代表当时的渲染速度,触摸设备也不一定性能弱。后续仍需要在真实设备上观察首屏和交互,再调整粒子数量或启动时机。这里记录的是一个可回退的选择过程,而不是一份通用硬件评分表。