Javascript（jQuery）性能测量和最佳实践（不加载时间）

Question

我会马上说出这个问题并非关于加载时间;我知道YSlow，Firebug分析器以及googlage关于页面组件加载时间的最佳实践和工具。

我在问什么好的性能分析工具或库或附加组件用于测量实际执行的Javascript（特别是jQuery），只要提高实际用户体验就行了。例如，在屏幕上测量从点击到可见结果的时间，或者帮助确定基于jQuery的悬停效果响应缓慢的原因。

我们注意到，当页面/ DOM增长相对较大时（例如，70kb到150kb的HTML值，不包括外部CSS，JS和图片），和/或嵌套深度很深（从< >为最深的标记），jQuery事件发生得更慢，或者整个JS用户体验变得迟缓。

我也搜索了一些关于选择器的最佳实践（例如，通过id选择比选择类更快），我将实施这些实践。但是，一旦所有jQuery完全加载，并且所有事件都被钩住，我们仍然需要改进实际的事件触发和执行。

我已经实现了一些事件委托，并且我确实意识到拥有更少的挂钩DOM元素会使事情稍微好一些，但整体体验仍需要大页面的改进。我应该提到的是，由于该网站是AJAX沉重（很多是通过AJAX加载而不是初始HTTP命中），我们正在大量使用livequery而不是普通的jQuery事件挂钩。我还应该提到，我们稍微更关注IE（7+）的性能，但也需要良好的Firefox性能。

当我开发并做出更改时，我想我需要一种方法来测量变更前后的速度，所以我可以具体确定变更是否会改善任何内容。

任何提示，工具，库，博客文章，网址？

Answer 1

JSLitmus看起来像我可能会尝试的东西。

Answer 2

通过使用Firebug，您可以进入控制台选项卡，然后单击左上角的Firebug图标（称为“Firebug选项”）。然后点击选项“Profile Javascript”，之后只需执行你想测量的内容，例如点击一个JavaScript按钮，拖动一个Jquery可拖动对象或任何你想要的运行javascript代码的东西。当你已经执行了你想测量的JavaScript回到相同的菜单选项，并再次点击“配置文件JavaScript”（以便它被取消选中）。现在，控制台选项卡将充满您之前运行的所有操作以及执行每种方法所花费的时间（以及总时间）。