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

Ответ 1

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

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

РЕДАКТИРОВАТЬ: Этот ответ теперь 7 лет. В наши дни профилировщик Chrome и другие инструменты универсально доступны и просты в использовании, а также console.time(), console.profile() и performance.now(). Chrome также предоставляет вам представление временной шкалы, которое может показать вам, что убивает вашу частоту кадров, где пользователь может ждать и т.д.

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

Ответ 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')

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

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

Ответ 3

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

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

Ответ 4

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

Ответ 5

Большинство браузеров теперь выполняют синхронизацию с высоким разрешением в 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

Ответ 6

JSLitmus - легкий инструмент для создания тестовых тестов ad hoc 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

Ответ 7

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

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

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

Ответ 8

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

Проверка скорости JavaScript

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

Ответ 9

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

Ответ 10

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

Ответ 11

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

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

Ответ 12

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

Ответ 13

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Ответ 14

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

Ответ 15

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

Ответ 16

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

Ответ 17

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

Ответ 18

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

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

Ответ 19

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

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

Ответ 20

Вот инструмент для измерения производительности вашей функции без изменения кода функции. performance-meter

import { makeMeasurable } from 'performance-meter';

// the function counts factorial
function fact(n) {
    if(n < 2) {
        return 1;
    }
    return n * fact(n - 1);
}
fact = makeMeasurable(fact);
fact(4);
// the output:
// 0.0025ms
// 24