用于测量浏览器性能以打开或关闭动画的 Javascript答案

【问题标题】：Javascript for measure browser performance to turn animations on or off用于测量浏览器性能以打开或关闭动画的 Javascript
【发布时间】：2014-07-21 20:23:47
【问题描述】：

我有一个包含某些动画、CSS、GIF 动画和“JS 动画”的网站。在某些移动设备上，动画很慢，所以我想检测到这一点并关闭 CSS 动画，并为 gif 动画使用静态图像。

移动设备浏览器确实支持 CSS 动画，但执行时速度很慢。

如何使用 Javascript 函数测量浏览器的实际性能，以便决定是打开还是关闭动画？可能有任何 Javascript 库吗？

【问题讨论】：

您可以让用户决定在浏览器锁定时关闭它们，方法是提供警告，例如登录时
我可以测量JS函数的性能，但是如何知道gif动画是否慢？还是 CSS 过渡很慢？无论如何要通过 javascript 获取 gif 或 css ransition 的当前帧速率以将其包含在 MyFnction() 中以测试性能？

标签： javascript html css performance animation

【解决方案1】：

performance.now() 比使用 Date 更准确：

var t0 = performance.now();
your_function();
var t1 = performance.now();
console.log("Call to your_function took " + (t1 - t0) + " milliseconds.");

并在您的控制台中读取输出。

【讨论】：

请注意performance.now might now be supported，尤其是在 iPhone 上时。
感谢您的评论，我不知道 :)

【解决方案2】：

测试函数性能的唯一方法是运行它。您可以设置某种初始测试，如下所示：

var startTime = new Date();
possiblySlowFunction();
if (new Date() - startTime > maxAcceptableTime) {
    disableCSSAnimations();
}

这个想法是，你给它一个测试运行来确定它的执行情况。如果使用时间过长，请采取措施防止再次使用。

编辑：我对这个答案做了一些温和的假设。如果这是您编写的函数，您首先需要弄清楚函数的哪一部分花费的时间最长。然后，您可以将该部分隔离到上面看到的测试中，并找到一个合适的数字来确定该功能是否足够好。

例如，假设您有一个动画，需要您在每个像素的基础上更改画布。您可以设置一个在比实际画布小 10 倍的画布上运行的测试，并在其上运行相同的算法。现在您有了一个基准，可以确定在较小的画布上需要多长时间，因此请花点时间将其乘以 10。对于该动画来说，这是可以接受的时间吗？如果没有，请禁用每像素画布动画。这个想法可以用于任何类型的功能、动画或其他。

【讨论】：

所以你建议锁定浏览器看看是否有什么东西会锁定浏览器以防止它锁定浏览器？
不完全是。我假设这个函数要么是一组较小的、不那么快速的函数，要么是大型数据集的内置函数。即使在最弱的硬件上，在一个合理大小的数据集上，任何一个内置函数都不应该花费超过几毫秒的时间。我将更新答案以包含该信息。