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

337

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

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

danmine
источник
Вы можете посмотреть на плагин YSlow для Firefox.
Роб Уэллс
7
Это только скажет вам, сколько времени занимает загрузка. Я думаю, что вопрос был больше связан с производительностью, когда он работает.
Сэм Хаслер
Если вы хотите, чтобы ваш код работал на производительность, наиболее распространенным способом (и наиболее точным, поскольку вы можете отточить определенные функции). В этом посте приведен хороший пример использования таймера (но вам действительно стоит взглянуть на Performance.now, если у вас есть такая возможность): albertech.blogspot.com/2015/07/…
jar
1
Для быстрых и простых тестов в вашем браузере вы можете использовать jsben.ch
EscapeNetscape

Ответы:

325

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

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


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

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

Ной
источник
3
Это прекрасный шаг после того, как хорошо известные алгоритмы с хорошими показателями работают.
Рафаэль Ксавье
1
Это действительно хороший ответ, так как он требует практического подхода к большинству ситуаций, которые описывает вопрос. Тем не менее, он не отвечает на вопрос , который спрашивает, есть ли другой способ измерить это, кроме как только восприятие пользователя. Все время простоя, например, когда кнопки застыли, все еще можно измерить, используя методы в ответе pramodc и прикрепленные к нему комментарии.
RoboticRenaissance
202

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

Вы можете просто использовать таймеры 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, которая позволяет точно узнать, сколько времени потребовалось для выполнения каждой строки! введите описание изображения здесь

Хосе Браун
источник
Да, одна из прелестей этого заключается в том, что это быстро и легко реализовать. Интересно, будет ли ведение журнала само по себе отнимать часть производительности при выполнении javascript. Допустим, у нас есть цикл в игре, и он выводит несколько строк журнала. Например, раз в секунду в течение 5 минут, то есть 300 строк. Кто-нибудь знает?
К. Килиан Линдберг
Это все еще работает? Не появляясь в Chrome.
Изучение статистики на примере
2
Да все еще работает на меня. developer.chrome.com/devtools/docs/console-api#consoletimelabel
Хосе Браун
@ K.KilianLindberg Ведение журнала всегда будет зависеть от производительности, как и от любого кода, но а) оно будет согласовано в ваших тестах и ​​б) вы не должны входить в консоль в реальном коде. После тестирования на моей машине регистрация времени занимает лишь часть MS, но она будет складываться по мере того, как вы будете это делать.
Полидукс
92

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

var start = +new Date();  // log start timestamp
function1();
var end =  +new Date();  // log end timestamp
var diff = end - start;
pramodc84
источник
10
Обратите внимание, что это решение возвращает разницу в миллисекундах
Chris Bier
16
Использование Date () не рекомендуется, поскольку время в миллисекундах может варьироваться в зависимости от системных факторов. Вместо этого используйте console.time () и console.timeEnd (). Смотрите ответ от JQuery Lover для более подробной информации.
mbokil
44
Еще лучше использоватьperformance.now()
edan
1
Перед использованием performance.now () проверьте совместимость браузера. developer.mozilla.org/en-US/docs/Web/API/Performance/…
AR_HZ
Дата не совсем соответствует времени, которое прошло. Проверьте эту статью на нем: sitepoint.com/measuring-javascript-functions-performance . Performance.now () - более точная отметка времени.
Миллионер
61

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

Расслабьтесь
источник
1
Поскольку jsPerf в данный момент недоступен , benchmarkjs прост в использовании .
Мукахо,
Я также рекомендую его, поскольку он дает измерение операций в секунду (он запускает ваш код несколько раз)
Ричард
+9001 (это более девяти тысяч;) за jsPerf. Я регулярно использую это таким же образом , чтобы %timeitв ipythonREPL оболочки для кода Python.
amcgregor
37

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

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

var start = performance.now();

// code being timed...

var duration = performance.now() - start;

Ссылки

Даниэль Иммс
источник
2
Еще лучше было бы использовать User Timing API , который основан на performance.now().
Крис
30

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

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

IE Performance Результат

IE Performance Результат

Рамиз Уддин
источник
Связанная страница JSLitmus содержит неработающие ссылки для скачивания. Я нашел JSLitmus (для браузеров) и jslitmus (для NodeJS, строчные!).
Роб Вт
16

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

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

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

Oli
источник
5
это правда, но профилировщики хороши в случае, если есть проблема с кодированием, которая не имеет ничего общего с конкретной проблемой браузера.
Джон Бокер
1
Конечно! Да, они поймают общие проблемы «плохого кодирования», а конкретные отлично подходят для реальной отладки, но для общего тестирования вариантов использования вам пригодится то, что работает на всех платформах.
Оли
2
+1 к сведению, что это правда, но наличие профилировщика, такого как Firebug, все еще прекрасно, если не обязательно, чтобы найти узкие места.
Пекка
1
« Учитывая 99,999999% сайтов… » Я думаю, что вы сделали это…: - /
RobG
@RobG Я мог бы преувеличивать один или два десятичных знака, но идея о том, что ваша платформа разработки, вероятно, не будет идентична вашей платформе развертывания, сохраняется.
Оли
11

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

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

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

DUzun
источник
Спасибо, это как раз то, что я искал.
Джозеф Шиди
9

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

var perf = function(testName, fn) {
    var startTime = new Date().getTime();
    fn();
    var endTime = new Date().getTime();
    console.log(testName + ": " + (endTime - startTime) + "ms");
}
Bunz
источник
4

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Рафаэль Ксавье
источник
3

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

pdavis
источник
В отличие от чего? Я не уверен, что понимаю.
Пекка
В отличие от оригинальных постеров вопрос: «Циклы ЦП, использование памяти, время выполнения и т. Д.?»
Сникер
2

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

Uzbekjon
источник
2

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

/*
     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
Шон Дотей
источник
1

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

Константин Тригер
источник
1

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

https://jsbench.me/

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

Ste
источник
0

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

Уильям Келлер
источник
0

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

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

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

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

Джон Демьян
источник
-1

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

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);
user2601995
источник