分析 jQuery 应用程序

Posted 2023-03-06

【中文标题】分析 jQuery 应用程序

【英文标题】：Profiling jQuery Applications

【发布时间】：2012-05-02 08:12:25

【问题描述】：

我最近在一个应用程序上遇到了一个响应缓慢的脚本错误，我觉得有必要对应用程序进行分析以确定我需要改进的地方。我想要一个长期的修复，而不是一个骇人听闻的修复。我尝试了 Firebug Profiler，但由于该应用程序使用了大量 jQuery，因此我收到了很多关于匿名调用的报告，这是我真正预料到的。

我还在网络上发现了一些关于由 John Resig 创建的分析器的报告，但我发现的链接都已失效。

所以我的问题是：

的最佳方法是什么？ 是否有任何开源专用工具/脚本来实现这一目标？

【参考方案1】：

所以在深入挖掘之后，我找到了 John Resig 给出的另一个解决方案。他正在使用一个名为 FireUnit(http://fireunit.org/) 的 firebug 单元测试扩展，它被证明非常好。

如果你看看下面给出的例子：

http://ejohn.org/blog/function-call-profiling/

还要检查他提供的测试页面：

http://ejohn.org/files/jquery-profile.html

你会得到一些不错的结果，如下所示：

.addClass("test"); 52 .addClass("测试"); 102 .removeClass("测试"); 102 .removeClass("测试"); 52 .css("颜色", "红色"); 299 O(3n) .css(color: "red", border: "1px solid red"); 597 O(6n) 。消除（）; 198 O(2n) .append("测试"); 599 O(6n) 。显示（）; 982 O(10n) 。隐藏（）; 968 O(10n) .html("测试"); 104 。空的（）; 100 .is("div"); 109 .filter("div"); 214 O(2n) .find("div"); 300 O(3n)

我已设法将其集成到多个应用程序中，结果非常令人满意。唯一的缺点是您只能在 Firefox 中使用该插件。但这仍然是一个很好的工具。

【参考方案2】：

如here 所述：

IE、Chrome 和 Safari 在 Web 开发中内置了分析器 浏览器附带的工具。对于 Firefox，您可以使用 Firebug。 也可能有用，因为您使用的是 jQuery，这意味着您的 分析报告将充满匿名函数等， 使它非常难以阅读，John Resig's jQuery profiling plugin，这将 给你一个关于此事的更清晰的输出。

【讨论】：

正如我在上面的帖子中所述，我已经在该链接上检查了 John Resig 的分析器。但我得到的只是一个找不到下载位置的 404 页面:)

由于这个时候还没有给出答案，我会接受你的正确答案，尽管我可能很快就会带着赏金回来

我在这里找到了 John Resig 的原始 jquery-profile.js 插件的副本：gist.github.com/1546548 但不幸的是，它在 jQuery +1.8 中被破坏了

【参考方案3】：

我创建了一个工具，可以完全满足您的需求：http://yellowlab.tools

启动测试，单击“JS Timeline”选项卡，它会记录在页面加载期间访问 DOM 的每个 jQuery 函数。它还跟踪 vanilla JS 函数，因此您可以了解 jQuery 背后的魔力。

对于帮助优化一些 jQuery 代码的性能非常有用。

希望我的回答不会太晚:)

【讨论】：

一个好的答案永远不会太晚:) 我会检查它，如果它比我提供的更好，肯定会标记你的答案是正确的