Javascript 动态测试DOM

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

我想做的是获取一些关于DOM性能的信息，并在低于某个阈值时禁用一些动画。naif方法可以是添加10000个左右的透明元素，然后移除它们，并测量所需的时间。在开始实施之前，我想知道是否已经存在类似的东西，也许更精致

您知道有任何工具可以合理地衡量DOM性能吗

---

您可以使用Chrome Developer工具或Web Inspector（配置文件面板），在基于WebKit的浏览器（Chrome/Safari）中实现原型并对其进行配置。这将让你深入了解到底是什么让你的应用程序变慢了：JavaScript代码或WebKit内部。如果你测量动画的实际帧速率，你可以将其与你试图制作动画的帧速率进行比较。如果实际帧速率明显较低，则可以以较慢的速率绘制，或绘制较少的帧速率。有一个关于Google使用DOM方法（

document.getElementById，appendChild，

）或JavaScript代码性能来实现这一点的描述？请记住：页面最重要的部分是内容，而不是成千上万不必要的动画。好吧，这个特定页面的内容是一个大动画：-），是的，我指的是DOM性能。我必须移动很多DOM元素，所以这就是我感兴趣的。使用，正如我在回答中提到的，并将HTML树复制粘贴到其中。然后，创建一个测试用例，它是代码的一个很好的示例，可以在树中移动元素。如有必要，定义拆卸代码。必须在动画开始前执行该代码。我无法使用动画本身来测试浏览器性能。我可以隐藏元素，但这会影响测试，因为浏览器不必加载它们。我有一个简单的测试，可以添加和删除10000个绝对位于页面上随机点的透明gif，并且工作正常。我想知道是否有更好的东西已经存在。我的应用程序在今天的浏览器上并不慢。这只不过是旧的。也许我不清楚，但我并没有试图对我的代码进行基准测试。我试图判断我的代码是否在一个速度较慢的浏览器上执行，并在这种情况下选择退出一些功能。在开始动画之前，这必须在运行中完成。哦，好吧，这正是在用户浏览器上对代码进行基准测试：）但是从您对下一个答案的评论中，我发现您实际上需要的是鼠标事件处理程序节流，这通常是通过运行实际的处理程序代码a'la

if（！this.\u timer）来实现的this.\u timer=setTimeout（func，）

并调用

this.\u timer=null

（或

删除func（）正文中的此项。_timer

）。问题是，在我的例子中没有setInterval，因此没有帧速率的概念。我只是在鼠标移动时预测一些DOM元素的位置——也就是说，在mousemove回调中。事后，我意识到这样做并不是最优的，每隔几毫秒轮询鼠标位置会更好，并且会允许我动态地对帧速率进行基准测试，但现在改变这一点已经太晚了，无论如何，谢谢你的建议。我发现了这一点（至少在过去）Firefox会触发比预期多得多的鼠标移动事件，如果我过于频繁地更新dom，就会导致动画断断续续。修复方法是仅在鼠标事件的x和y发生实际更改时对事件进行操作。您可以做类似的事情，例如仅在事件为x毫秒时处理事件，但是如果您有多个鼠标移动处理程序，我可以看到它很快变得复杂。。。