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

289

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

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

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

Ваш Ответ

19   ответов
6

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

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

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

34

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

Usage

var start = performance.now();

// code being timed...

var duration = performance.now() - start;

References

Еще лучше было бы использоватьUser Timing API, который опирается наperformance.now().
55

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

JSPerf построен наgithub.com/bestiejs/benchmark.js
Я также рекомендую его, поскольку он дает измерение ops / sec (он запускает ваш код несколько раз)
В качестве альтернативы вы можете использоватьjsben.ch
Поскольку jsPerf являетсяdown at the moment, benchmarkjs естьeasy to use instead.
1

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

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

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

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

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

10

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

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

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

Спасибо, это как раз то, что я искал.
289

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

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


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

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

Это действительно хороший ответ, поскольку он требует практического подхода к большинству ситуаций, описанных в этом вопросе. Тем не менее, он не отвечаетthe question, который спрашивает, есть ли другой способ измерить это, кроме как только восприятие пользователя. Все время простоя, например, когда кнопки заморожены, все еще можно измерить, используя методы из ответа pramodc и прикрепленных к нему комментариев.
Это шаг точной настройки после того, как хорошо известные алгоритмы с хорошими рабочими характеристиками введены в действие.
3

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?

0

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

170

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

Вы можете просто использовать таймеры 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

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

Мы всегда можем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;
Перед использованием performance.now () проверьте совместимость браузера.developer.mozilla.org/en-US/docs/Web/API/Performance/…
Обратите внимание, что это решение возвращает разницу в миллисекундах
Использование Date () не рекомендуется, поскольку время в миллисекундах может варьироваться в зависимости от системных факторов. Вместо этого используйте console.time () и console.timeEnd (). Смотрите ответ от JQuery Lover для более подробной информации.
Дата не является действительно представителем времени, которое прошло. Проверьте эту статью на это:sitepoint.com/measuring-javascript-functions-performance , Performance.now () - более точная отметка времени.
Еще лучше, используйтеperformance.now()
15

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

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

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

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

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

8

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

1

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

0

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

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

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

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

Похожие вопросы