估计浏览器 JS 引擎速度以有条件地禁用动画

Posted 2023-02-21

【中文标题】估计浏览器 JS 引擎速度以有条件地禁用动画

【英文标题】：Estimate browser JS engine speed to conditionally disable animations

【发布时间】：2012-05-06 17:41:35

【问题描述】：

是否有一种标准（接受/简单/高性能）方法来确定客户端机器呈现 javascript 的速度？

当我在其他选项卡上运行网络应用程序（视频等）时，我的 JS 动画会慢到爬行。

如果我可以从我的 JS 中检测到缓慢，我会使用更简单的动画来提供更好的用户体验。

更新：

为所有人删除动画并不是解决办法。我说的是最简单的动画，它会根据浏览器/计算机而结结巴巴。如果我能检测到缓慢的程度，我会简单地禁用它们。

这与具有动态图形质量的视频游戏相同：您希望取悦使用旧电脑的人，而不是惩罚那些拥有额外处理能力的人。

【参考方案1】：

一个技巧是禁用那些隐藏的动画。如果它们位于另一个未聚焦的选项卡上，那么让它们保持动画有什么用？

另一个是尽量减少动画。我假设您在 DOM 上，并且 DOM 操作很昂贵。也尽量减少。

我得到的一个提示是，如果您正在使用图像动画处理，请考虑使用画布代替，这样您就不会在 DOM 上进行操作。

另外，考虑渐进增强。保持您的功能简单，并逐步处理复杂的事情。每次添加新内容时，都使用简单的功能作为基准。这样，您就可以轻松确定问题的原因并相应地进行修复。

---

您应该首先解决的主要问题是为什么它很慢，而不是什么时候很慢。

【讨论】：

我并不是说动画特别激进或在另一个选项卡上发生。如果您的计算机足够慢，即使是简单的图像褪色到 0 不透明度也会卡顿。那里有许多慢速计算机、突出的情况（可能您正在复制文件、看电影等），通过逐步删除动画可以增强用户体验。如果我能检测到这一点，我会设置动画级别的滑动比例。无，小，全力以赴。

@YujiTomita 那么这就是you just can't control 的事情之一。你可能想问问来自UX.stackexchange 的人，他们可以从用户体验的角度为你的情况推荐什么。

我不同意。您链接到我不想做的关于“推动 javascript 性能”的帖子。这更类似于相反的情况：通过禁用甚至单个图像褪色来支持旧计算机。降低每个人的标准并不是解决办法。此外，无论我们是否同意，我的问题是关于是否/如何衡量客户端 JS 性能。对这个编程做什么取决于他们。

【参考方案2】：

我知道这个问题很老，但我只是偶然发现了它。最简单的方法是执行一个长循环并测量开始和结束时间。这应该让您对机器的 Javascript 性能有所了解。

请记住，这可能会延迟页面加载，因此您可能希望将结果存储在 cookie 中，因此不会在每次访问页面时进行测量。

类似：

var starttime = new Date();
for( var i=0; i<1000000; i++ ) ;
var dt = new Date() - starttime;

希望这会有所帮助。