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

当然，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';
    }
}

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

如果您通过JS探查器同时使用这两个函数，您会发现在第一个示例中，只有一个函数的“自己的时间”等于花在函数中的“总”时间，因为DOM操作被计算为“自己的时间”

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

---

这使得很难找到性能瓶颈，因为“自有时间”最高的函数是

jQuery.fix

和

jQuery.init

等等（这并不能告诉我代码写得有多好），“总时间”最高的函数在调用堆栈中通常太高，无法找出实际问题所在（如果您有一个函数调用了10个其他函数，而其中一个函数需要“永远”，则调用函数的“总时间”将更大，但这无法让您确定哪些被调用函数需要的时间最长）.

您是否尝试过John Resig的profiler插件

---

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

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

筛选出库不是您想要的，而且没有分析器按照您想要的方式进行。此外，如果您的代码编写得很糟糕，因为它滥用库调用，那么您需要查看它滥用了哪些库调用

---

在“树（自上而下）”模式下使用内置的Chrome profiler。（选择Self和Total列底部的模式。）在此模式下，您可以看到每个函数所花费的总时间以及函数调用的每个函数所花费的总时间，依此类推，直到不调用其他函数的叶函数。因此，在函数

bar（）

中，您将看到在bar中花费的总时间，以及

bar

调用

每个
所花费的总时间，依此类推。（现在使用jQuery可能会有点复杂，但这并不是问题的关键。）

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

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


使用“Heavy（Bottom-up）”视图查找占用大量时间的叶函数。三角形显示谁调用它们
选项单击三角形以打开整个树。通过嵌套较深的调用链节省大量单击
“（程序）”指探查器运行期间没有JavaScript运行的部分时间。比如呈现HTML

您可以对每个函数进行过滤和聚焦。阅读此内容及更多详细信息。
该博客帖子上指向实际插件的链接似乎已经失效，谷歌也没有找到任何有用的替代方案。另外，从外观上看，这个插件可以让您看到哪些jQuery方法花费了很长时间。我并不特别关心这一点——我关心代码的哪些部分运行缓慢，并希望修复这些部分。如果这涉及到修复jQuery代码，那么这是第二步。这不应该是第一次；我的代码可能比jQuery的（低效的选择器等）愚蠢得多。这将创建单独的评测结果，这是非常无用的：我不知道如何组合这些结果，在一个相当复杂的应用程序中，你输入/退出jQuery的次数比调用你自己的函数的次数要多，所以会有很多评测结果。Raynos：使用其他库评测代码也会遇到同样的问题。写你自己的包装来解释浏览器的疯狂和图书馆能为你解决的各种其他问题，意味着你在写你自己的图书馆——这仍然会遇到这个问题。我认为你的建议没有帮助。我给出的例子是不正确的，因为你当然不需要使用
每一个
，但是在没有querySelector（All）的浏览器中轻松访问元素也会有同样的问题，并且不是为了“圆滑”。事实上，这与tin上所说的不一样。它们仍然会出现，只是从
文件中列出。浏览函数源代码仍然会显示原始jQuery代码，不过…DynatraceAJAX版的开发已于2014年停止。2014年起的4.5.0版仍然可用。最后支持的Firefox版本是34。“（现在使用jQuery可能会有点复杂，但这不是真正的重点。）”——但这正是我的观点：）Chrome自上而下模式下的分析器假装53%的时间都花在“程序”（比如说什么？）上，而几乎所有其他函数的自时间都为0%。最大总时间是最顶层的库函数（jQuery事件处理）。为了达到我所关心的那一点，我必须像这样走在树上：。问题是，这个函数在其他时候会从树的其他部分调用无数次。这不是一个有效的解决方案
function bar(jqNode) {
    jqNode.children().each(function() {
        $(this).html('Test');
    });
}