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

当然,Firebug,Chrome的Web Inspector,Opera的Dragonfly和dynaTrace用于IE的AJAX工具都具有分析function。 但是,我还没有找到一个让我“忽略”库的工具。

举个例子,假设我有以下纯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.fixjQuery.init等(它没有告诉我任何有关我的代码编写得好(或没有)的信息。 ),并且具有最高’总时间’的函数通常在调用堆栈中太高而无法找出实际问题的位置(如果你有一个函数调用10个其他函数,并且一个函数’永远’,调用函数将有一个更大的’总时间’,但这不会让你弄清楚哪个被调用的函数需要最长的’)。

过滤掉库不是你想要的,而AFAIK没有分析器可以按照你想要的方式进行过滤。 此外,如果您的代码编写错误,因为它滥用库调用,您希望查看哪些库调用它正在滥用。

在“树(自上而下)”模式下使用内置Chrome分析器。 (选择Self列和Total列底部的模式。)在此模式下,您可以看到每个函数占用的总时间以及函数调用的每个函数所花费的总时间,依此类推到调用no的叶函数其他function。 因此,在您的functionbar()您将看到在酒吧及其下方花费的总时间,即bar each呼叫所花费的总时间等等。 (现在有了jQuery,它可能会有点复杂,但这不是重点。)

因此,如果你有一个函数调用10个其他函数,并且一个函数“永远”,则调用函数将具有更大的“总时间”,并且通过单击三角形并扩展”来确定哪个被调用函数的时间最长。永远’function,并查看它调用的每个函数的总时间。 如果9花费很少的时间,1需要永远,那么这就是罪魁祸首,你一直向下钻,直到找到问题为止。

编辑:关于使用Chrome的分析器的一些提示

  • 使用“重(自下而上)”视图查找占用大量时间的叶子函数。 三角形显示谁调用它们。
  • 选项 – 单击三角形以打开整个树。 通过深层嵌套的调用链保存大量点击。
  • “(程序)”指的是分析器运行期间没有运行JavaScript的部分时间。 像渲染HTML一样。

您可以按function进行过滤和聚焦。 阅读文档以获取有关此内容的详细信息。

你试过John Resig的探查器插件吗?

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

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

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