分析JavaScript时如何忽略jQuery之类的库? [英] How can I ignore libraries like jQuery when profiling JavaScript?

问题描述

当然，Firebug，Chrome的Web Inspector，Opera的Dragonfly和dynaTrace的IE的AJAX工具都具有概要分析功能.但是，我还没有找到可让我忽略"库的工具.

Of course, Firebug, Chrome's Web Inspector, Opera's Dragonfly and dynaTrace's AJAX tools for IE have profiling capabilities. However, I haven't found a tool that lets me 'ignore' a library.

举个例子，假设我有下面的纯JS/DOM代码:

To give an example, suppose I have the following pure JS/DOM code:

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

以及使用jQuery的类似代码:

and a similar bit of code that uses jQuery:

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

(示例代码并不是很好的代码，请不要把它们留在那儿，因为那不是重点)

(examples aren't exactly great code, please leave them be as that isn't the point)

如果同时通过JS探查器进行抛出，则会发现在第一个示例中，只有一个函数，其中函数的自身时间"等于函数中的总"时间-作为DOM操作被计为自己的时间".

If you throw both through a JS profiler, you'll find that in the first example, there's just one function where the 'own time' of the function equals the 'total' time spent in the function - as the DOM manipulations get counted as 'own time'.

但是，在jQuery示例中，所有这些都被抽象到jQuery中，这意味着自己的时间"非常短，并且所有时间都花在了jQuery上.

In the jQuery example, however, all of this is abstracted away into jQuery, which means the 'own time' is minimal and all the time is spent in jQuery.

这使得很难找到性能瓶颈，因为具有最高自用时间"的函数是jQuery.fix和jQuery.init以及类似的东西(这并没有告诉我编写(或没有编写)的程度如何)我的代码是)，并且总时间"最高的函数通常在调用堆栈中过高，无法找出实际问题出在哪里(如果您有一个函数调用了10个其他函数，而一个函数却需要永远"，则调用函数将具有更大的总时间"，但这不会让您弄清楚哪个调用的函数花费的时间最长".

This makes it very hard to find performance bottlenecks, because the functions with the highest 'own time' are jQuery.fix and jQuery.init and such (which doesn't tell me anything about how well-written (or not) my code is), and the functions with the highest 'total time' are usually too high up the call stack to find out where the actual problem is (if you have one function that calls 10 others, and one takes 'forever', the calling function will have a bigger 'total time' but that won't let you figure out which of the called functions take the longest').

推荐答案

过滤不是您想要的库，而AFAIK no profiler并没有按照您希望的方式进行.此外，如果您的代码由于滥用库调用而被错误地编写，则您想查看它滥用了哪个库调用.

Filtering out libraries is not what you want and AFAIK no profiler does it the way you want it to. Besides, if your code is badly written because it is abusing library calls, you want to see which library calls it is abusing.

在树(自上而下)"模式下使用内置的Chrome分析器. (选择自身"和总计"列底部的模式.)在这种模式下，您可以看到每个函数花费的总时间以及每个函数调用所花费的总时间，依此类推直至调用no的叶子函数.其他功能.因此，在函数bar()中，您将看到在bar上花费的总时间，以及该时间以下的花费，bar调用each所花费的总时间，依此类推. (现在，使用jQuery可能会有些令人费解，但这并不是重点.)

Use the built-in Chrome profiler in "Tree (Top Down)" mode. (Select the mode at the bottom of the Self and Total columns.) In this mode you can see the total time each function takes along with the total time spent in each function that function calls and so on down to the leaf functions that call no other functions. So in your function bar() you will see the total time spent in bar and below that, the total time spent by bar calling each and so forth. (Now with jQuery it can get a bit convoluted, but that's not really the point.)

因此，如果您有一个函数调用了10个其他函数，而一个函数需要永远"，则调用函数将具有更大的总时间"，您可以通过单击三角形和扩展永远"功能并查看其调用的每个功能的总时间.如果9花费的时间很少，而1花费的时间永远，那么这就是元凶，并且您会不断努力直到发现问题.

So if you have one function that calls 10 others, and one takes 'forever', the calling function will have a bigger 'total time' and you figure out which of the called functions take the longest by clicking on the triangle and expanding the 'forever' function and looking at the total time of each of the functions it calls. If 9 take little time and 1 takes forever, then that's the culprit and you keep drilling down until you find the problem.

使用Chrome探查器的更多提示

A few more tips on using Chrome's profiler

• 使用重载(自下而上)"视图查找需要大量时间的叶子函数.三角形显示谁称呼它们.
• 选项并单击一个三角形以打开整个树.通过深层嵌套的呼叫链可以节省大量点击.
• (程序)"是指探查器正在运行的时间中没有运行JavaScript的部分.诸如渲染HTML之类的东西.

您可以基于每个功能进行过滤和聚焦.阅读文档，以获取有关此内容及更多内容的详细信息.

You can do filtering and focusing on a per-function basis. Read the documentation for details on this and more.

这篇关于分析JavaScript时如何忽略jQuery之类的库?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！