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

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

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

 Rob Wells21 сент. 2008 г., 18:43
Вы можете посмотреть наYSlow Плагин для Firefox.
 EscapeNetscape03 нояб. 2016 г., 20:54
Для быстрого и простого тестирования в вашем браузере вы можете использоватьjsben.ch
 Sam Hasler24 сент. 2008 г., 03:18
Это только скажет вам, сколько времени занимает загрузка. Я думаю, что вопрос был больше связан с производительностью, когда он работает.
 jar16 сент. 2016 г., 03:20
Если вы хотите, чтобы ваш код работал на производительность, наиболее распространенным способом (и наиболее точным, поскольку вы можете отточить определенные функции). В этом посте есть хороший пример использования таймера (но вам действительно стоит взглянуть на Performance.now, если у вас есть такая возможность):albertech.blogspot.com/2015/07/…

Ответы на вопрос(19)

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

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

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

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);

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

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 Performance Result

FireFox Performance Result

IE Performance Result

IE Performance Result

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

ПытатьсяJSPerf, Это онлайновый инструмент повышения производительности javascript для сравнения и сравнения фрагментов кода. Я пользуюсь этим все время.

 28 окт. 2016 г., 12:03
В качестве альтернативы вы можете использоватьjsben.ch
 11 мар. 2017 г., 14:43
Я также рекомендую его, поскольку он дает измерение ops / sec (он запускает ваш код несколько раз)
 17 окт. 2013 г., 16:10
JSPerf построен наgithub.com/bestiejs/benchmark.js
 24 июл. 2015 г., 13:31
Поскольку jsPerf являетсяdown at the moment, benchmarkjs естьeasy to use instead.

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

Quick answer

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

Long answer

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

What is a benchmark?

A benchmark is "a standard of measurement or evaluation" (Webster’s II Dictionary). A computer benchmark is typically a computer program that performs a strictly defined set of operations - a workload - and returns some form of result - a metric - describing how the tested computer performed. Computer benchmark metrics usually measure speed: how fast was the workload completed; or throughput: how many workload units per unit time were completed. Running the same computer benchmark on multiple computers allows a comparison to be made.

Should I benchmark my own application?

Ideally, the best comparison test for systems would be your own application with your own workload. Unfortunately, it is often impractical to get a wide base of reliable, repeatable and comparable measurements for different systems using your own application with your own workload. Problems might include generation of a good test case, confidentiality concerns, difficulty ensuring comparable conditions, time, money, or other constraints.

If not my own application, then what?

You may wish to consider using standardized benchmarks as a reference point. Ideally, a standardized benchmark will be portable, and may already have been run on the platforms that you are interested in. However, before you consider the results you need to be sure that you understand the correlation between your application/computing needs and what the benchmark is measuring. Are the benchmarks similar to the kinds of applications you run? Do the workloads have similar characteristics? Based on your answers to these questions, you can begin to see how the benchmark may approximate your reality.

Note: A standardized benchmark can serve as reference point. Nevertheless, when you are doing vendor or product selection, SPEC does not claim that any standardized benchmark can replace benchmarking your own actual application.

Performance testing JS

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

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

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

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

How do I find bottlenecks? Profilers

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

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

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

Example of how I use it:
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')

Results Look like this

Update (4/4/2016):

Хром канарейка недавно добавленаПрофилирование на уровне линии вкладка источников средств разработки, которая позволяет точно узнать, сколько времени потребовалось для выполнения каждой строки! enter image description here

 22 янв. 2015 г., 21:38
Это все еще работает? Не появляясь в Chrome.
 23 янв. 2015 г., 00:57
Да все еще работает на меня.developer.chrome.com/devtools/docs/console-api#consoletimelabel
 03 сент. 2018 г., 11:57
@ K.KilianLindberg Ведение журнала всегда будет зависеть от производительности, как и от любого кода, но а) оно будет согласовано в ваших тестах и б) вы не должны быть консольным входом в живой код. После тестирования на моей машине регистрация времени занимает лишь часть MS, но она будет складываться по мере того, как вы будете это делать.
 09 февр. 2014 г., 12:37
Да, одна из прелестей этого заключается в том, что его легко реализовать. Интересно, будет ли ведение журнала само по себе отнимать часть производительности при выполнении javascript. Допустим, у нас есть цикл в игре, и он выводит несколько строк журнала. Например, раз в секунду в течение 5 минут, то есть 300 строк. Кто-нибудь знает?

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

/*
     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

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

Usage

var start = performance.now();

// code being timed...

var duration = performance.now() - start;

References

https://developer.mozilla.org/en-US/docs/Web/API/Performance.now() http://www.w3.org/TR/hr-time/#dom-performance-now
 24 мая 2015 г., 17:33
Еще лучше было бы использоватьUser Timing API, который опирается наperformance.now().

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

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

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

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

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

 10 дек. 2015 г., 06:04
Это действительно хороший ответ, поскольку он требует практического подхода к большинству ситуаций, описанных в этом вопросе. Тем не менее, он не отвечаетthe question, который спрашивает, есть ли другой способ измерить это, кроме как только восприятие пользователя. Все время простоя, например, когда кнопки заморожены, все еще можно измерить, используя методы из ответа pramodc и прикрепленных к нему комментариев.
 09 июн. 2014 г., 19:56
Это шаг точной настройки после того, как хорошо известные алгоритмы с хорошими рабочими характеристиками введены в действие.

Некоторые люди предлагают конкретные плагины и / или браузеры. Я бы не стал, потому что они толькоreally полезно для этой одной платформы; тестовый запуск в Firefox не будет точно соответствовать IE7. Учитывая, что 99,999999% сайтов посещают более одного браузера,you need to check performance on all the popular platforms.

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

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

 21 сент. 2008 г., 19:02
это правда, но профилировщики хороши в случае, если есть проблема с кодированием, которая не имеет ничего общего с конкретной проблемой браузера.
 10 дек. 2009 г., 22:23
+1 к сведению, что это правда, но наличие профилировщика, такого как Firebug, все еще прекрасно, если не обязательно, чтобы найти узкие места.
 22 апр. 2016 г., 08:17
& Quot;Considering 99.999999% of sites…& Quot; Я думаю, что вы это сделали & # x2026; : - /
 21 сент. 2008 г., 21:02
Конечно! Да, они "поймают общее" плохое кодирование " проблемы и конкретные проблемы хороши для выполнения реальной отладки, но для общего тестирования вариантов использования вы получите преимущество от того, что работает на всех платформах.
 22 апр. 2016 г., 10:05
@RobG Я мог бы преувеличивать один или два десятичных знака, но идея о том, что ваша платформа разработки, вероятно, не будет идентична вашей платформе развертывания, сохраняется.

Я обычно просто тестирую производительность javascript, как долго работает скрипт. jQuery Lover дал хорошую ссылку на статью для тестированияjavascript code performance, но статья показывает только, как проверить, как долго работает ваш код JavaScript. Я также рекомендовал бы прочитать статью под названием "5 советов поулучшение вашего кода JQuery во время работы с огромными наборами данных & quot ;.

Вы могли бы использоватьconsole.profile в клопе

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

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

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

 09 дек. 2015 г., 01:55
Спасибо, это как раз то, что я искал.

Мы всегда можемmeasure time taken by any function by simple date object.

var start = +new Date();  // log start timestamp
function1();
var end =  +new Date();  // log end timestamp
var diff = end - start;
 04 февр. 2013 г., 16:43
Обратите внимание, что это решение возвращает разницу в миллисекундах
 09 июн. 2016 г., 17:11
Перед использованием performance.now () проверьте совместимость браузера.developer.mozilla.org/en-US/docs/Web/API/Performance/…
 02 мар. 2018 г., 17:34
Дата не является действительно представителем времени, которое прошло. Проверьте эту статью на это:sitepoint.com/measuring-javascript-functions-performance , Performance.now () - более точная отметка времени.
 15 мая 2014 г., 17:00
Еще лучше, используйтеperformance.now()
 04 авг. 2013 г., 23:22
Использование Date () не рекомендуется, поскольку время в миллисекундах может варьироваться в зависимости от системных факторов. Вместо этого используйте console.time () и console.timeEnd (). Смотрите ответ от JQuery Lover для более подробной информации.

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

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

 10 дек. 2009 г., 22:24
В отличие от чего? Я не уверен, что понимаю.
 10 дек. 2009 г., 22:30
В отличие от вопроса об оригинальных постерах: «Циклы ЦП, использование памяти, время выполнения и т. Д .?"

Ваш ответ на вопрос