在分析 JavaScript 时如何忽略像 jQuery 这样的库？

Question

当然，Firebug、Chrome 的 Web Inspector、Opera 的 Dragonfly 和 dynaTrace 的 IE AJAX 工具都具有分析功能。但是，我还没有找到可以让我“忽略”库的工具。

举个例子，假设我有以下纯 JS/DOM 代码：

function foo(node) {
    for (var i = 0; i < node.childNodes.length; i++) {
        node.childNodes[i].innerHTML = 'Test';
    }
}

还有一段类似的使用 jQuery 的代码：

function bar(jqNode) {
    jqNode.children().each(function() {
        $(this).html('Test');
    });
}

（示例不是很好的代码，请保留它们，因为这不是重点）

如果您通过 JS 分析器将两者都抛出，您会发现在第一个示例中，只有一个函数的“自身时间”等于函数中花费的“总”时间 - 作为 DOM 操作算作“自己的时间”。

然而，在 jQuery 示例中，所有这些都被抽象到 jQuery 中，这意味着“自己的时间”很少，所有时间都花在 jQuery 中。

这使得很难找到性能瓶颈，因为具有最高“自身时间”的函数是 jQuery.fix 和 jQuery.init 等等（这并没有告诉我写得有多好（或不写）我的代码是），并且“总时间”最高的函数通常在调用堆栈中太高而无法找出实际问题出在哪里（如果您有一个函数调用其他 10 个函数，而一个函数需要“永远”，则调用函数将有更大的“总时间”，但这不会让你弄清楚哪个被调用函数花费的时间最长'）。

Answer 1

过滤掉库不是您想要的，AFAIK 没有分析器按照您想要的方式进行。此外，如果你的代码因为滥用库调用而写得不好，你想看看它滥用了哪个库调用。

在“树（自上而下）”模式下使用内置的 Chrome 分析器。 （选择 Self 和 Total 列底部的模式。）在这种模式下，您可以看到每个函数花费的总时间以及函数调用的每个函数所花费的总时间等等，直到调用 no 的叶函数其他功能。因此，在您的函数bar() 中，您将看到在 bar 及以下的总时间，bar 调用 each 所花费的总时间等等。 （现在使用 jQuery 可能会有些复杂，但这不是重点。）

因此，如果您有一个函数调用 10 个其他函数，而一个函数需要“永远”，则调用函数将具有更大的“总时间”，您可以通过单击三角形来确定哪个被调用函数花费的时间最长，然后扩展“永远”函数并查看它调用的每个函数的总时间。如果 9 花费很少的时间，而 1 花费很长时间，那么这就是罪魁祸首，你会继续钻研，直到找到问题所在。

编辑：关于使用 Chrome 分析器的更多提示

• 使用“Heavy (Bottom up)”视图来查找需要大量时间的叶函数。三角形显示谁打电话给他们。
• 选项-单击三角形以打开整个树。通过深度嵌套的调用链节省大量点击次数。
• “（程序）”是指分析器运行期间没有运行 JavaScript 的部分时间。诸如渲染 HTML 之类的事情。

您可以针对每个功能进行过滤和关注。阅读the documentation 了解更多详情。

Answer 2

您尝试过 John Resig 的分析器插件吗？

http://ejohn.org/blog/deep-profiling-jquery-apps/

Answer 3

您可以尝试使用console.profile 和console.profileEnd 在代码中打开和关闭分析。这些链接指向 Firebug 文档，但至少 Webkit 也支持它。不确定 IE。

Answer 4

使用 dynaTrace AJAX 版，您可以在首选项对话框中排除由其 URL 指定的库。在“代理”选项卡中，您可以提供不应跟踪的文件列表。所以如果你在那里列出你的 jquery.js，你不应该在 PurePaths 中看到任何与 jquery 相关的节点......