动态地对DOM进行基准测试

我有一个页面，其中大量的DOM元素都是动画的。这主要适用于现代硬件和软件，但我担心在使用慢JavaScript解释器的旧电脑上它可能会太迟钝。动态地对DOM进行基准测试

我想要做的是获取有关DOM性能的一些信息，并禁用某些动画（如果这个值低于某个阈值）。通过添加10000个左右的透明元素并将其去除并测量所需的时间，这种方法可能很简单。在实施这个之前，我想知道这种可能更精致的东西是否已经存在。

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

来源

2011-10-27 Andrea

“DOM性能” - >使用DOM方法（'document.getElementById，appendChild，...'）或JavaScript代码的性能？请记住：网页中最重要的部分是内容，而不是成千上万的不必要的动画。 –

那么，这个特定页面的内容是一个大动画:-) – Andrea

是的，我的意思是DOM性能。我必须移动很多DOM元素，所以这就是我所感兴趣的。 – Andrea

如果您测量动画的实际帧速率，则可以将其与您尝试动画的帧速率进行比较。如果实际帧速率显着较低，则可以以较慢的速度绘制，或者减少绘制速度。有一个谷歌在this answer这样做的描述。

来源

2011-12-23 15:45:00 Douglas

问题是，在我的情况下没有setInterval，因此没有帧率的概念。我只是在鼠标移动的时候对某些DOM元素的位置进行了修改 - 也就是在mousemove回调中。后天，我意识到这样做并不是最佳的，并且每隔几毫秒轮询鼠标位置会更好，并且允许我立即对帧速率进行基准测试，但现在改变这一点已经太迟了，谢谢。无论如何你的建议。 – Andrea

我发现（至少在过去）Firefox会触发多于预期的鼠标移动事件，如果我经常更新dom，会导致动画结局。如果鼠标事件的x和y实际上发生了变化，那么修复只能在事件上进行。你可以做类似的事情，比如只处理事件，如果它是x毫秒[自上次]（http：//documentcloud.github。com/underscore /＃throttle），但如果你有多个鼠标移动处理程序，我可以看到很快变得复杂...... – Douglas

您可以使用Chrome开发人员工具或Web检查器（“配置”面板）实施原型，并在基于WebKit的浏览器（Chrome/Safari）中对其进行配置。这会让你深入了解实际上会减慢应用程序的速度：JavaScript代码或WebKit内部结构。

来源

2011-12-23 15:32:18

今天的浏览器中，我的应用程序并不慢。它只是在旧的。也许我不清楚，但我*不*试图对我的代码进行基准测试。我试图判断我的代码是否在缓慢的浏览器上执行，并在这种情况下选择了某些功能。在开始动画之前，必须在飞行中完成。 – Andrea

噢，那么，这是_exactly_基准你的代码在用户的浏览器:)但从你评论到下一个答案我看到你真正需要的是鼠标事件处理程序调节，这通常通过运行你的实际处理程序在func（）主体中调用a'la'if（！this._timer）this._timer = setTimeout（func，）'并调用'this._timer = null;'（或'delete this._timer'）。 –

动态地对DOM进行基准测试

回答

相关问题