javascript - 在首次加载时运行快速 Javascript 基准测试

Question

我想做的是在用户第一次访问我的 Web 应用程序以检测他的计算机为元素设置动画的能力时运行一个简单而快速的 Javascript 基准测试。我记得大学时一位老师这样做是为了根据用户的机器调整游戏的帧速率。

是否可以在不牺牲太多用户资源的情况下完成？页面加载后可能几秒钟？如果结果不好，我们只是为这个用户禁用部分或全部动画。

Answer 1

要回答您在帖子中提出的问题：

1) 当一个人第一次加载你的网站时，可以运行一个 JavaScript 基准测试来测试他们的 CSS/JavaScript 动画速度的能力，但它会牺牲一些资源。您必须考虑将访问您的网站的人。如果他们要通过移动设备访问您的网站，您最不想做的就是让他们的设备停止运行，然后冻结他们的浏览器或将其他应用程序耗尽内存。您不希望桌面用户或移动用户认为网站没有响应。

2) 在页面加载后等待几秒钟的问题之一是，根据你想对网站做什么，人们会开始尝试滚动浏览你的内容。如果他们开始滚动并意识到网站“卡顿”，他们可能会认为他们的设备有问题。

另一个警告是，如果您想要尽可能流畅的动画，您可能最终会使用 requestAnimationFrame（请参阅https://hacks.mozilla.org/2011/08/animating-with-javascript-from-setinterval-to-requestanimationframe/）。如果有人加载您的站点，然后在您的测试运行时点击离开它到另一个选项卡，则浏览器采用了降低非活动选项卡中的帧速率的做法，以支持活动选项卡中的帧速率。基于此（不正确的）帧速率功能进行的测试将导致您的网站的某些部分被禁用，这些人完全能够在所有动画完好无损的情况下运行您的网站，因此您可能需要考虑这一点。

在我几个月前进行的一些测试中，CSS3 版本的动画几乎总是比 JavaScript 版本的动画更流畅。但是，现在有 jQuery 库通过尽可能使用 CSS3 动画来弥补这一差距，例如 jQuery Transit ( http://ricostacruz.com/jquery.transit/ )。