javascript - 在分析 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 个函数的函数，并且其中一个函数“永远”运行，则调用函数的“总时间”会更长，您可以通过单击三 Angular 形和扩展“永远”函数并查看它调用的每个函数的总时间。如果 9 花费的时间很少，而 1 花费的时间很长，那么这就是罪魁祸首，您将继续深入研究直到找到问题。

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

• 使用“繁重(自下而上)” View 查找花费大量时间的叶函数。三 Angular 形显示调用者。
• 按住 option 键并单击三 Angular 形以打开整棵树。通过深层嵌套的调用链节省大量点击次数。
• “(程序)”指的是探查器运行期间没有运行 JavaScript 的部分时间。诸如呈现 HTML 之类的事情。

您可以在每个函数的基础上进行过滤和聚焦。阅读the documentation有关这方面的详细信息以及更多信息。