Измерение производительности функций JavaScript

Риск при таком подходе состоит в том, что механизм JavaScript нашего браузера может выполнять субоптимизацию, что означает, что при повторном вызове функции с одним и тем же вводом может быть полезно запомнить первый вывод и просто использовать его снова. Чтобы решить эту проблему, вы можете использовать много разных строк ввода вместо того, чтобы повторно отправлять одну и ту же строку ввода (например, 'Peter' ). Очевидно, что проблема с тестированием с разными входами заключается в том, что измеряемая нами функция занимает разное время. Возможно, некоторые из входов вызывают больше времени выполнения, чем другие.

Подводный камень № 3 — слишком много полагаясь на среднего

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

 Took 0.2730 milliseconds to generate: 77005292 Took 0.0234 milliseconds to generate: 77005292 Took 0.0200 milliseconds to generate: 77005292 Took 0.0281 milliseconds to generate: 77005292 Took 0.0162 milliseconds to generate: 77005292 Took 0.0245 milliseconds to generate: 77005292 Took 0.0677 milliseconds to generate: 77005292 Took 0.0289 milliseconds to generate: 77005292 Took 0.0240 milliseconds to generate: 77005292 Took 0.0311 milliseconds to generate: 77005292 

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

Одним из способов является вычисление среднего за последние девять раз. Другой, более практичный способ — собрать все результаты и рассчитать медиану . По сути, все результаты выстроены в ряд, отсортированы по порядку и выбраны по среднему. Вот где performance.now() так полезен, потому что вы получаете число, с которым можете делать все, что угодно.

Давайте попробуем еще раз, но на этот раз мы будем использовать медианную функцию:

 var numbers = []; for (var i=0; i < 10; i++) { var t0 = performance.now(); makeHash('Peter'); var t1 = performance.now(); numbers.push(t1 - t0); } function median(sequence) { sequence.sort(); // note that direction doesn't matter return sequence[Math.ceil(sequence.length / 2)]; } console.log('Median time', median(numbers).toFixed(4), 'milliseconds'); 

Подводный камень # 4 — Сравнение функций в предсказуемом порядке

Мы поняли, что всегда полезно измерять что-то много раз и брать среднее значение. Более того, последний пример научил нас, что лучше использовать медиану, а не среднюю.

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

Допустим, мы хотим иметь функцию, которая возвращает true или false если определенная строка находится в массиве других строк, но делает это без учета регистра . Другими словами, мы не можем использовать Array.prototype.indexOf потому что он не Array.prototype.indexOf регистр. Вот одна из таких реализаций:

 function isIn(haystack, needle) { var found = false; haystack.forEach(function(element) { if (element.toLowerCase() === needle.toLowerCase()) { found = true; } }); return found; } console.log(isIn(['a','b','c'], 'B')); // true console.log(isIn(['a','b','c'], 'd')); // false 

Мы сразу же замечаем, что это можно улучшить, поскольку цикл haystack.forEach всегда проходит через все элементы, даже если у нас есть раннее совпадение. Давайте попробуем написать лучшую версию, используя старый добрый цикл for .

 function isIn(haystack, needle) { for (var i = 0, len = haystack.length; i < len; i++) { if (haystack[i].toLowerCase() === needle.toLowerCase()) { return true; } } return false; } console.log(isIn(['a','b','c'], 'B')); // true console.log(isIn(['a','b','c'], 'd')); // false 

Теперь посмотрим, какой из них самый быстрый. Мы делаем это, выполняя каждую функцию 10 раз и собирая все измерения:

 function isIn1(haystack, needle) { var found = false; haystack.forEach(function(element) { if (element.toLowerCase() === needle.toLowerCase()) { found = true; } }); return found; } function isIn2(haystack, needle) { for (var i = 0, len = haystack.length; i < len; i++) { if (haystack[i].toLowerCase() === needle.toLowerCase()) { return true; } } return false; } console.log(isIn1(['a','b','c'], 'B')); // true console.log(isIn1(['a','b','c'], 'd')); // false console.log(isIn2(['a','b','c'], 'B')); // true console.log(isIn2(['a','b','c'], 'd')); // false function median(sequence) { sequence.sort(); // note that direction doesn't matter return sequence[Math.ceil(sequence.length / 2)]; } function measureFunction(func) { var letters = 'a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z'.split(','); var numbers = []; for (var i = 0; i < letters.length; i++) { var t0 = performance.now(); func(letters, letters[i]); var t1 = performance.now(); numbers.push(t1 - t0); } console.log(func.name, 'took', median(numbers).toFixed(4)); } measureFunction(isIn1); measureFunction(isIn2); 

Мы запускаем это и получаем следующий вывод:

 true false true false isIn1 took 0.0050 isIn2 took 0.0150 

Демонстрационная версия этого примера показана ниже: