Как вы тестируете производительность кода JavaScript?

Циклы ЦП, использование памяти, время выполнения и т. Д.?

Добавлено: Есть ли количественный способ тестирования производительности в JavaScript, кроме простого восприятия скорости выполнения кода?

Профилировщики, безусловно, являются хорошим способом получения цифр, но по моему опыту воспринимаемая производительность - это все, что имеет значение для пользователя / клиента. Например, у нас был проект с Ext аккордеоном, который расширился, чтобы показать некоторые данные, а затем несколько вложенных сеток Ext. На самом деле все рендерилось довольно быстро, ни одна операция не заняла много времени, было просто много информации, отображаемой одновременно, поэтому пользователю это казалось медленным.

Мы «исправили» это, не переключаясь на более быстрый компонент или оптимизируя какой-либо метод, но сначала отображая данные, а затем отображая сетки с помощью setTimeout. Итак, сначала появилась информация, затем через секунду появятся сетки. В целом, для этого потребовалось немного больше времени на обработку, но для пользователя воспринимаемая производительность была улучшена.

В эти дни, профайлер Chrome и другие инструменты повсеместно доступны и просты в использовании, так же как console.time(), console.profile()и performance.now(). Chrome также дает вам представление временной шкалы, которое может показать вам, что убивает вашу частоту кадров, где пользователь может ждать и т. Д.

Найти документацию по всем этим инструментам очень просто, для этого вам не нужен SO-ответ. Спустя 7 лет я все же повторю совет моего первоначального ответа и укажу, что вы можете иметь медленный код, выполняемый вечно, где пользователь этого не заметит, и довольно быстрый код, работающий там, где он это делает, и они будут жаловаться на довольно быстрый код недостаточно быстр. Или чтобы ваш запрос к API вашего сервера занял 220мс. Или что-то подобное. Суть в том, что если вы возьмете профилировщик и начнете искать работу, вы найдете ее, но это может быть не та работа, которая нужна вашим пользователям.

Я согласен, что воспринимаемая производительность - это действительно все, что имеет значение. Но иногда я просто хочу выяснить, какой способ сделать что-то быстрее. Иногда разница огромна и стоит знать.

Вы можете просто использовать таймеры JavaScript. Но я , как правило , получить гораздо более стабильные результаты , используя родную Chrome ( в настоящее время также в Firefox и Safari) методу devTool console.time()&console.timeEnd()

Пример того, как я использую это:

var iterations = 1000000;
console.time('Function #1');
for(var i = 0; i < iterations; i++ ){
    functionOne();
};
console.timeEnd('Function #1')

console.time('Function #2');
for(var i = 0; i < iterations; i++ ){
    functionTwo();
};
console.timeEnd('Function #2')

Обновление (4/4/2016):

Chrome canary недавно добавил Line Level Profiling на вкладку источников инструментов dev, которая позволяет точно узнать, сколько времени потребовалось для выполнения каждой строки!

Мы всегда можем измерить время, затраченное любой функцией, на простой объект даты .

var start = +new Date();  // log start timestamp
function1();
var end =  +new Date();  // log end timestamp
var diff = end - start;

Попробуйте jsPerf . Это онлайн-инструмент для работы с JavaScript для сравнения и сравнения фрагментов кода. Я использую это все время.

Большинство браузеров теперь поддерживают синхронизацию с высоким разрешением performance.now(). Он лучше new Date()для тестирования производительности, потому что он работает независимо от системных часов.

использование

var start = performance.now();

// code being timed...

var duration = performance.now() - start;

Ссылки

• https://developer.mozilla.org/en-US/docs/Web/API/Performance.now ()
• http://www.w3.org/TR/hr-time/#dom-performance-now

JSLitmus - это легкий инструмент для создания специальных тестов JavaScript.

Давайте рассмотрим производительность между function expressionи function constructor:

<script src="JSLitmus.js"></script>
<script>

JSLitmus.test("new Function ... ", function() { 
    return new Function("for(var i=0; i<100; i++) {}"); 
});

JSLitmus.test("function() ...", function() { 
       return (function() { for(var i=0; i<100; i++) {}  });
});

</script>

То, что я сделал выше, это создание function expressionи function constructorвыполнение той же операции. Результат выглядит следующим образом:

Результат исполнения FireFox

IE Performance Результат

Некоторые люди предлагают конкретные плагины и / или браузеры. Я бы не стал, потому что они действительно полезны только для этой платформы; тестовый запуск в Firefox не будет точно соответствовать IE7. Учитывая, что 99,999999% сайтов посещают более одного браузера, необходимо проверить производительность на всех популярных платформах.

Мое предложение было бы сохранить это в JS. Создайте страницу сравнения со всеми вашими тестами JS и временем выполнения. Вы могли бы даже иметь это AJAX - отправлять результаты обратно вам, чтобы сохранить его полностью автоматизированным.

Затем просто промойте и повторите на разных платформах.

У меня есть небольшой инструмент, с помощью которого я могу быстро запустить небольшие тесты в браузере и сразу же получить результаты:

Тест скорости JavaScript

Вы можете поиграть с кодом и узнать, какая техника лучше в проверенном браузере.

Я думаю, что тестирование производительности JavaScript (времени) вполне достаточно. Я нашел очень удобную статью о тестировании производительности JavaScript здесь .

Вот простая функция, которая отображает время выполнения переданной функции:

var perf = function(testName, fn) {
    var startTime = new Date().getTime();
    fn();
    var endTime = new Date().getTime();
    console.log(testName + ": " + (endTime - startTime) + "ms");
}

Вы можете использовать это: http://getfirebug.com/js.html . У него есть профилировщик для JavaScript.

Быстрый ответ

В jQuery (точнее, в Sizzle) мы используем это (мастер проверки и откройте speed / index.html в вашем браузере), который, в свою очередь, использует benchmark.js . Это используется для проверки производительности библиотеки.

Длинный ответ

Если читатель не знает разницы между эталонным тестом, рабочей нагрузкой и профилировщиками, сначала прочтите некоторые основы тестирования производительности в разделе «readme 1st» spec.org . Это для тестирования системы, но понимание этой основы также поможет JS-тестированию. Некоторые основные моменты:

Что такое эталон?

Эталоном является «стандарт измерения или оценки» (словарь Вебстера II). Эталонный тест обычно представляет собой компьютерную программу, которая выполняет строго определенный набор операций - рабочую нагрузку - и возвращает некоторую форму результата - метрику - описывающую работу тестируемого компьютера. Компьютерные метрики обычно измеряют скорость: насколько быстро была выполнена рабочая нагрузка; или пропускная способность: сколько единиц рабочей нагрузки за единицу времени было выполнено. Запуск одного и того же эталонного теста на нескольких компьютерах позволяет провести сравнение.

Должен ли я сравнить свои собственные приложения?

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

Если не мое собственное приложение, то что?

Вы можете рассмотреть возможность использования стандартизированных ориентиров в качестве ориентира. В идеале стандартизированный бенчмарк должен быть переносимым и, возможно, уже запущен на интересующих вас платформах. Однако, прежде чем рассматривать результаты, необходимо убедиться, что вы понимаете взаимосвязь между своими приложениями / вычислительными потребностями и тем, что эталоном является измерение. Схожие тесты с типами приложений, которые вы запускаете? Имеют ли рабочие нагрузки похожие характеристики? Основываясь на ваших ответах на эти вопросы, вы сможете увидеть, как эталонный тест может приблизиться к вашей реальности.

Примечание. Стандартизованным ориентиром может служить ориентир. Тем не менее, когда вы делаете выбор поставщика или продукта, SPEC не утверждает, что какой-либо стандартизированный эталонный тест может заменить эталонный тест вашего собственного реального приложения.

Тестирование производительности JS

В идеале, лучшим тестом производительности будет использование собственного приложения с переключением рабочей нагрузки на то, что нужно тестировать: разные библиотеки, машины и т. Д.

Если это невозможно (и обычно это не так). Первый важный шаг: определите свою рабочую нагрузку. Он должен отражать нагрузку на ваше приложение. В этом выступлении Вячеслав Егоров рассказывает о дерьмовых нагрузках, которых следует избегать.

Затем вы можете использовать такие инструменты, как benchmark.js, чтобы помочь вам собирать метрики, обычно скорость или пропускную способность. На Sizzle нам интересно сравнить, как исправления или изменения влияют на системную производительность библиотеки.

Если что-то работает очень плохо, ваш следующий шаг - поиск узких мест.

Как мне найти узкие места? Профайлеры

Каков наилучший способ профилировать выполнение JavaScript?

Я считаю, что время выполнения - лучшая мера.

Вы можете использовать console.profile в firebug

Я обычно просто тестирую производительность javascript, как долго работает скрипт. jQuery Lover дал хорошую ссылку на статью для тестирования производительности кода javascript , но статья показывает только, как проверить, как долго работает ваш код javascript. Я также рекомендовал бы прочитать статью под названием «5 советов по улучшению кода JQuery при работе с огромными наборами данных».

Вот класс многократного использования для времени выполнения. Пример включен в код:

/*
     Help track time lapse - tells you the time difference between each "check()" and since the "start()"

 */
var TimeCapture = function () {
    var start = new Date().getTime();
    var last = start;
    var now = start;
    this.start = function () {
        start = new Date().getTime();
    };
    this.check = function (message) {
        now = (new Date().getTime());
        console.log(message, 'START:', now - start, 'LAST:', now - last);
        last = now;
    };
};

//Example:
var time = new TimeCapture();
//begin tracking time
time.start();
//...do stuff
time.check('say something here')//look at your console for output
//..do more stuff
time.check('say something else')//look at your console for output
//..do more stuff
time.check('say something else one more time')//look at your console for output

UX Profiler подходит к этой проблеме с точки зрения пользователя. Он группирует все события браузера, сетевую активность и т. Д., Вызванные некоторыми действиями пользователя (щелчок), и учитывает все аспекты, такие как задержка, время ожидания и т. Д.

Я искал что-то похожее, но нашел это.

https://jsbench.me/

Это позволяет проводить параллельное сравнение, а затем вы также можете поделиться результатами.

Золотое правило - НЕ при любых обстоятельствах блокировать браузер пользователя. После этого я обычно смотрю на время выполнения, а затем на использование памяти (если вы не делаете что-то сумасшедшее, в этом случае это может быть более высокий приоритет).

В последнее время тестирование производительности стало чем-то вроде модного слова, но это не значит, что тестирование производительности не является важным процессом в QA или даже после поставки продукта. И пока я разрабатываю приложение, я использую много разных инструментов, некоторые из них, упомянутые выше, например, Chrome Profiler, я обычно смотрю на SaaS или что-то с открытым исходным кодом, которое я могу запустить и забыть об этом, пока не получу предупреждение о том, что что-то пошло не так. ,

Есть много замечательных инструментов, которые помогут вам следить за производительностью, не заставляя вас прыгать через обручи, просто чтобы настроить некоторые базовые оповещения. Вот некоторые, которые, я думаю, стоит проверить сами.

1. Sematext.com
2. Datadog.com
3. Uptime.com
4. Smartbear.com
5. Solarwinds.com

Чтобы попытаться нарисовать более четкую картину, вот небольшое руководство о том, как настроить мониторинг для реагирующего приложения.

Это хороший способ сбора информации о производительности для конкретной операции.

start = new Date().getTime(); 
for (var n = 0; n < maxCount; n++) {
/* perform the operation to be measured *//
}
elapsed = new Date().getTime() - start;
assert(true,"Measured time: " + elapsed);