繁体 English 中英

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

[英]Javascript (jQuery) performance measurement and best practices (not load time)

原文 2008-12-30 16:59:26 4 2 javascript/ jquery/ optimization/ performance

我马上就说这个问题不是关于加载时间; 我了解YSlow，Firebug分析器，以及googlage显示的页面组件加载时间的最佳实践和工具。

我问的是，在改进实际用户体验的过程中，有哪些好的分析工具或库或附加组件可用于测量Javascript（特别是jQuery）的实际执行情况。 例如，在屏幕上测量从点击到可见结果的时间，或者帮助确定基于jQuery的悬停效果响应速度慢的原因。

我们注意到当页面/ DOM增长相对较大时（例如，70kb到150kb的HTML，不包括外部CSS，JS和图像），和/或具有非常深的嵌套（从<body>到最深的标签的14-25级别）），jQuery事件触发得更慢，或者整个JS用户体验变得缓慢。

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

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

在我开发和进行更改时，我认为我需要一种方法来测量变化前后的速度，因此我可以具体确定变更是否能改善任何事情。

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

2 个解决方案

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

通过使用Firebug，您可以进入控制台选项卡，然后单击左上角的firebug图标（称为“Firebug选项”）。 然后单击选项“Profile Javascript”，之后只需执行您要测量的内容，例如单击javascript按钮，拖动Jquery可拖动对象或者您想要的运行一些javascript代码。 当您执行了要测量的javascript时，请返回相同的菜单选项，然后再次单击“Profile javascript”（以便取消选中）。 现在，控制台选项卡将填充您先前运行的所有操作以及执行每个方法等所花费的时间（以及总时间）。