检测浏览器图形性能？

Question

我有一个图形密集型网站。它有各种 CSS3 动画在模糊的视频背景上运行。它在我的台式机和支持 GPU 的 MacBook Pro 上看起来很棒，但在我的笔记本电脑和 MacBook Air 上运行起来就像垃圾。

所以基本上，我想知道是否有一种方法可以使用 Javascript（或其他东西）检测浏览器图形性能，然后仅在性能达到阈值时应用 CSS 动画。该网站有一个加载屏幕，因此我有一些时间来测试性能。

我知道我可以使用 Modernizr 检测 WebGL，但不幸的是，即使我的笔记本电脑对 WebGL 测试呈阳性，尽管性能非常差，所以我需要一个替代方案。

谢谢

Answer 1

正如 @blazemonger 所建议的，您可以使用它window.requestAnimationFrame来检测当前的 FPS 速率。据推测，如果 FPS 速率降至某个值以下，您可以自动禁用动画。

我还建议在您的网站上显眼的位置放置一个“停止动画”按钮，以方便我们这些为了可读性而喜欢静态网站的人，以及那些不想比平时更多地耗尽笔记本电脑电池的人。

下面是一个粗略的例子，如果帧速率低于 30Hz，就会停止任何动画：

var start = null;
var last  = null;
window.requestAnimationFrame(fpsMeasureLoop);
function fpsMeasureLoop(timestamp) {
    if( start == null ) {
        last = start = timestamp;
        return;
    }
    var dTime = timestamp - last;
    if( dTime > 33 ) {
        // If more than 33ms since last frame (i.e. below 30fps)
        document.getElementsByTagName("body")[0].className = "paused";
    }
    window.requestAnimationFrame(fpsMeasureLoop);
}

你将需要这个 CSS：

.paused{
    -webkit-animation-play-state:paused;
    -moz-animation-play-state:paused;
    -o-animation-play-state:paused; 
    animation-play-state:paused;
}

这是有问题的，因为如果帧率因任何原因降至 30Hz 以下，它们就会停止。添加逻辑来发现趋势帧速率对于读者来说是一项练习。