Как игнорировать библиотеки, такие как jQuery при профилировании JavaScript?

Конечно, Firebug, Chrome Web Inspector, Opera Dragonfly и инструменты DynaTrace AJAX для IE имеют возможности профилирования. Однако я не нашел инструмент, который позволяет мне игнорировать библиотеку.

Чтобы привести пример, предположим, что у меня есть следующий чистый код 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 других, а одна занимает "навсегда", вызывающая функция будет иметь большее "общее время", но это не позволит вам определить, какая из вызываемых функций занимает самое длинное ").

Ответы

Ответ 1

Фильтрация библиотек - это не то, что вы хотите, и AFAIK без профилировщика делает это так, как вы этого хотите. Кроме того, если ваш код плохо написан, потому что он злоупотребляет вызовами библиотеки, вы хотите увидеть, какая из библиотек вызывает это злоупотребление.

Используйте встроенный профилировщик Chrome в режиме "Дерево (сверху вниз)". (Выберите режим в нижней части столбцов Self и Total.) В этом режиме вы можете видеть общее время, которое каждая функция выполняет вместе с общим временем, затраченным на каждую функцию, которая вызывает вызовы функций и т.д. Вниз до функций листа, которые не звонят другие функции. Таким образом, в вашей функции bar() вы увидите общее время, проведенное в баре и ниже этого, общее время, затрачиваемое на bar на вызов each и т.д. (Теперь с jQuery он может немного запутаться, но это не совсем так.)

Итак, если у вас есть одна функция, которая называет 10 других, а одна принимает "навсегда", вызывающая функция будет иметь большее "общее время", и вы выясните, какая из вызываемых функций занимает наибольшее время, нажав на треугольник и расширяя функцию "навсегда" и глядя на общее время каждой из функций, которые он вызывает. Если 9 займет мало времени и 1 берется навсегда, то это преступник, и вы продолжаете бурить, пока не найдете проблему.

EDIT: еще несколько советов по использованию профайлера Chrome

  • Используйте "Heavy (Bottom up)", чтобы найти функции листьев, которые занимают много времени. Отображаются треугольники, которые их называют.
  • нажмите на треугольник, чтобы открыть все дерево. Сохраняет много щелчков по глубоко вложенным цепочкам вызовов.
  • "(program)" относится к той части времени, когда работал профайлер, в течение которого JavaScript не работал. Такие вещи, как рендеринг HTML.

Вы можете выполнять фильтрацию и фокусировку на основе каждой функции. Подробнее читайте документацию для получения более подробной информации об этом и многом другом.

Ответ 3

Вы можете попробовать включить и выключить профилирование с помощью console.profile и console.profileEnd. Ссылки относятся к документации Firebug, но по крайней мере Webkit также поддерживает ее. Не уверен в IE.

Ответ 4

Используя DynaTrace AJAX Edition, вы можете исключить библиотеку, указанную в ее URL-адресе, в диалоговом окне настроек. На вкладке "Агент" вы можете указать список файлов, которые не следует отслеживать. Поэтому, если вы укажете свой jquery.js, вы не увидите никаких связанных с jquery узлов в PurePaths...