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

Question

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

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

Answer 1

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

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

---

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

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

Answer 2

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

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

Обновление (04.04.2016):

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

Answer 3

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

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

Answer 4

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

Answer 5

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

Usage

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

Answer 6

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

Answer 7

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

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

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

Answer 8

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

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

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

Answer 9

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

Answer 10

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

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