如何比较Javascript和CSS动画解决方案之间的性能？

我正在开发一款动画性能非常重要的应用程序。我为动画/转换构建了一个javascript解决方案。然后我用Javascript+CSS构建了相同的解决方案，然后我用纯CSS构建了相同的解决方案

现在我想比较一下它们，看看哪一个性能更好。我已经习惯使用performance.now（）对纯javascript代码进行基准测试，如下所示：

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

这很有效。但现在当动画进入混音时，我不知道如何比较它。所有的解决方案都有一个需要750毫秒才能完成的动画，所以使用计时并不能真正起作用，因为我不是真的试图测量精度，而是系统代价

---

如何对此进行基准测试？是否有一种工具可以“削弱”我的浏览器处理能力，这样我就可以在功能较弱的CPU中模拟相同的解决方案？

您可能需要审核页面并检查渲染，看看它是否达到60fps。以及纯CSS和js解决方案之间是否存在差异

---

可以使用动画的帧速率来测量应用程序的响应速度。每秒60帧是实现“自然”感觉的公认目标

---

您可能需要审核页面并检查渲染效果，看看是否达到60fps。以及纯CSS和js解决方案之间是否存在差异

---

可以使用动画的帧速率来测量应用程序的响应速度。每秒60帧是实现“自然”感觉的公认目标

---

您可以在浏览器的开发人员工具中使用

性能

和

内存

选项卡。您可以在浏览器的开发人员工具中使用

性能

和

内存

选项卡。