Небольшое примечание: разные браузеры достигают разных результатов даже на одних и тех же машинах. Часть кода вполне может работать быстрее в Firefox Quantum, чем в Google Chrome, или Opera может отставать от Safari в одной задаче, опережая ее в другой. (То же самое верно и для просмотра с мобильных устройств на iOS и Android.) Единственная истинная константа, когда дело доходит до сравнения результатов на разных платформах, - это сравнение результатов любого другого браузера с результатами Internet Explorer; независимо от того, насколько он медленный в вашем браузере, он лучше не работает вообще.

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

Итак, JSPerf - отличный инструмент для стабильного тестирования JavaScript. Однако если вы ищете что-то быстрое и легкое, не ищите ничего, кроме консоли Chrome (или Firefox).

Mozilla и Google, компании, ответственные за два самых популярных в мире настольных браузера, изо всех сил старались предложить удобные, удобные консоли, на которых вы можете работать. Просто нажмите option + command + J (ctrl + shift + J в Windows), и все готово. идти.

new Date генерирует для вас отметку даты и времени: Fri Jun 22 2018 16:54:38 GMT-0400 (Eastern Daylight Time) Он также предлагает удобную функцию, которая хорошо подходит для проведения небольшого тестирования: если вы вычитаете одно время из другого после выполнения какой-либо операции, вы получаете время в миллисекундах. Примечание: Вы также можете использовать performance.now() вместо new Date(). У него более высокая степень детализации, и он может давать более последовательные результаты. Однако вам, вероятно, не нужно.

Например, предположим, что вас интересует код тестирования, который вы написали, чтобы определить сумму, кратную 3 и 5 ниже n, по сравнению с решениями других людей:

const mySolution = n => {
 let sum = 0
 
 for (let i = 0; i < n; i++)
   if (i % 3 === 0 || i % 5 === 0)
     sum += i
 return sum
}

vs.

const otherSolution = n => {
  let   number = n-1;   
  const fives = Math.floor(number/5) // # of multiples of 5 below n
  ,     threes = Math.floor(number/3)
  ,     fifteens = Math.floor(number/15)
  ,     sum = (base, num) => base * (num ** 2 + num)/2;
  return sum(5, fives) + sum(3, threes) - sum(15, fifteens)
};

Давай попробуем.

let then = new Date;
for (let i = 0; i < 1000; i++) {
  mySolution(100000);
}
let now = new Date;
now - then;

Это было просто. Мы создали новую дату перед запуском нашего цикла, выполнили нашу функцию 1000 раз с нашим решением, где n = 100000, затем создали новую дату после ее завершения и вычли текущее время из времени начала. В данном случае мы получили 396 мс.

Давайте теперь посмотрим на другой.

then = new Date //then and now were already declared
for (let i = 0; i < 1000; i++) {
  otherSolution(100000)
}
now = new Date
now - then

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

Все еще не идеально, но достаточно хорошо, чтобы получить хорошее изображение. Мы увеличили количество операций в 10 000 раз и достигли 17 мс. Это решение примерно в 233000 раз быстрее, по крайней мере, для этого ввода (исходное решение имеет сложность O (n), поэтому оно должно масштабироваться довольно линейно).

Вот и все. Если вы хотите протестировать различные части вашего кода, вы можете console.log определить время начала и окончания в разных частях вашего кода. Это должно работать и для асинхронного JavaScript. Он, конечно, не такой полнофункциональный, как JSPerf, но он быстрый, вы можете легко вносить изменения и контролировать количество итераций.

Дополнительный совет:

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

const bench = (func, input, iterations) => {
  /* any boilerplate code you want to have happen before the timer starts, perhaps copying a variable so it isn't mutated */
  const start = new Date;
  for (let i = 0; i < iterations; i++) {
    func(input)
  }
  const finish = new Date
  return (finish - start)
}

Теперь мы можем быстро и легко вызвать нашу функцию для тестирования нашего кода с минимальной настройкой. Просто вызывайте как bench(functionName, input, numIterations)!

А теперь вперед! Тестируйте, сколько душе угодно! Просто не забудьте использовать достаточно большой набор данных и достаточное количество итераций тестирования, чтобы получить значимые результаты. :)