在运行中对DOM进行基准测试

Question

我有一个页面，其中大量DOM元素是动画的。这主要适用于现代硬件和软件，但我担心在使用慢速JavaScript解释器的旧计算机上它可能太迟钝了。

我想要做的是获取有关DOM性能的一些信息，并在某个阈值低于某个阈值时禁用某些动画。一种天真的方式可以是添加10000个左右的透明元素并将其移除并测量所需的时间。在开始实现之前，我想知道是否已经存在这种可能更精确的东西。

  

您是否了解任何可以合理衡量DOM性能的工具？

Answer 1

如果您测量动画的实际帧速率，则可以将其与您尝试设置动画的帧速率进行比较。如果实际帧速率显着降低，那么您可以以较慢的速率绘制，或者绘制较少的帧速率。有一个关于Google在this answer中执行此操作的说明。

Answer 2

您可以使用Chrome开发者工具或Web Inspector（“个人资料”面板），在基于WebKit的浏览器（Chrome / Safari）中实施原型并对其进行分析。这将让您深入了解实际上减慢了应用程序的速度：JavaScript代码或WebKit内部。