Як ви перевіряєте продуктивність коду JavaScript?

Цикли процесора, використання пам'яті, час виконання тощо?

Додано: Чи існує кількісний спосіб тестування продуктивності в JavaScript, окрім просто сприйняття того, як швидко працює код?

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

Ми це "виправили" не за допомогою переходу на більш швидкий компонент чи оптимізації якогось методу, а спочатку наданням даних, а потім рендерингами сітки setTimeout. Отже, інформація з’явилася спочатку, потім сітки з’являться на місце через секунду. Загалом, для цього було потрібно трохи більше часу на обробку, але користувачеві сприйнята ефективність була покращена.

У ці дні, профайлер Chrome і інші інструменти повсюдно доступні і прості у використанні, так само як console.time(), console.profile()і performance.now(). Chrome також дає вам перегляд часової шкали, який може показати вам, що вбиває частоту кадрів, де користувач може чекати тощо.

Пошук документації для всіх цих інструментів дуже простий, для цього вам не потрібна відповідь. Через 7 років я все одно повторюватиму свою первісну відповідь і зазначу, що ви можете повільно запускати код, коли користувач цього не помітить, і досить швидкий код працює там, де вони є, і вони будуть скаржитися на досить швидкий код недостатньо швидкий. Або що ваш запит на API сервера займав 220 мс. Або щось інше подібне. Справа залишається в тому, що якщо ви виймете профілера і почнете шукати роботу, ви знайдете його, але це може бути не робота ваших користувачів.

Я погоджуюся, що сприйняте виконання - це дійсно все, що має значення. Але іноді просто хочеться з’ясувати, який метод робити щось швидше. Іноді різниця ВЕЛИЧЕЗНА і варто знати.

Ви можете просто використовувати таймери 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.04.2016):

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

Ми завжди можемо виміряти час, зайнятий будь-якою функцією, простим об’єктом дати .

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

Спробуйте jsPerf . Це онлайн-інструмент для виконання Javascript для порівняльного аналізу та порівняння фрагментів коду. Я ним користуюся постійно.

Зараз більшість браузерів впроваджує терміни з високою роздільною здатністю 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

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

Деякі люди пропонують конкретні плагіни та / або веб-переглядачі. Я б не тому, що вони дійсно корисні лише для тієї однієї платформи; тестовий запуск на Firefox не перекладе точно в IE7. Враховуючи, що 99,999999% сайтів відвідують їх більше одного браузера, вам потрібно перевірити продуктивність на всіх популярних платформах.

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

Потім просто промийте і повторіть на різних платформах.

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

Тест швидкості JavaScript

Ви можете пограти з кодом і дізнатися, яка техніка краще в перевіреному браузері.

Я думаю, що тестування JavaScript (часу) достатньо. Тут я знайшов дуже зручну статтю про тестування продуктивності JavaScript .

Ось проста функція, яка відображає час виконання переданої функції:

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

Ви можете використовувати це: http://getfirebug.com/js.html . Він має профілер для JavaScript.

Швидка відповідь

У jQuery (точніше на Sizzle) ми використовуємо це (майстер оформлення замовлення та відкритий speed / index.html у вашому браузері), який, у свою чергу, використовує benchmark.js . Це використовується для перевірки працездатності бібліотеки.

Довга відповідь

Якщо читач не знає різниці між орієнтиром, робочим навантаженням та профілями, спочатку прочитайте деякі основи тестування продуктивності в розділі "readme 1st" в spec.org . Це для тестування системи, але розуміння цих основ допоможе і тестуванню JS perf. Деякі основні моменти:

Що таке орієнтир?

Орієнтиром є "еталон вимірювання або оцінки" (II Словник Вебстера). Комп'ютерний орієнтир, як правило, є комп'ютерною програмою, яка виконує суворо визначений набір операцій - робоче навантаження - і повертає певну форму результату - метрику - описуючи, як виконується перевірений комп'ютер. Комп'ютерні контрольні показники зазвичай вимірюють швидкість: як швидко було виконано навантаження; або пропускна здатність: скільки одиниць навантаження за одиницю часу було виконано. Запуск одного і того ж комп'ютерного орієнтира на кількох комп'ютерах дозволяє проводити порівняння.

Чи варто орієнтувати власну заявку?

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

Якщо не моя власна заявка, то що?

Ви можете розглянути можливість використання стандартизованих орієнтирів як орієнтиру. В ідеалі стандартизований орієнтир буде портативним і, можливо, вже був запущений на платформах, які вас цікавлять. Однак, перш ніж розглянути результати, ви повинні бути впевнені, що ви розумієте взаємозв'язок між вашими потребами / обчисленнями та тим, що еталоном є вимірювання. Чи орієнтири схожі на типи програм, які ви запускаєте? Чи мають схожі характеристики робочі навантаження? На основі ваших відповідей на ці запитання ви можете почати бачити, як орієнтир може наближати вашу реальність.

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

Тестування працездатності JS

В ідеалі найкращим тестом на Perf було б використання власного додатку з власною робочою програмою, що перемикає те, що потрібно перевірити: різні бібліотеки, машини тощо.

Якщо це неможливо (а зазвичай це не так). Перший важливий крок: визначте своє навантаження. Це має відображати навантаження вашої програми. У цій розмові В’ячеслав Єгоров розповідає про тухливі навантаження, яких вам слід уникати.

Тоді ви можете використовувати такі інструменти, як benchmark.js, щоб допомогти вам збирати показники, як правило, швидкість або пропускну здатність. На Sizzle нам цікаво порівняти, як виправлення чи зміни впливають на системну ефективність бібліотеки.

Якщо щось справді погано, ваш наступний крок - пошук вузьких місць.

Як знайти вузькі місця? Профілі

Який найкращий спосіб виконати профіль JavaScript?

Я вважаю час виконання найкращим заходом.

Ви можете використовувати console.profile у firebug

Я зазвичай просто тестую продуктивність JavaScript, як триває сценарій. jQuery Lover дав гарне посилання на статтю для тестування продуктивності коду JavaScript , але ця стаття лише показує, як перевірити, як довго працює код Javascript. Я також рекомендую прочитати статтю під назвою "5 порад щодо покращення коду jQuery під час роботи з величезними наборами даних".

Ось клас багаторазового використання для виконання часу. Приклад включений у код:

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

UX Profiler підходить до цієї проблеми з точки зору користувача. Він групує всі події веб-переглядача, мережеву діяльність тощо, спричинені певними діями користувача (натисканням) і враховує всі аспекти, такі як затримка, час очікування тощо.

Я шукав щось подібне, але знайшов це.

https://jsbench.me/

Це дозволяє співставляти сторону та ви також можете ділитися результатами.

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

Тестування продуктивності стало чимось казковим словом із пізнього часу, але це не означає, що тестування продуктивності не є важливим процесом QA або навіть після доставки продукту. І хоча я розробляю додаток, я використовую багато різних інструментів, деякі з них згадані вище, як хромований Profiler я зазвичай дивлюся на SaaS або щось відкрите, що я можу піти і забути про це, поки не отримаю це повідомлення, сказавши, що щось пішло в живіт .

Існує безліч дивовижних інструментів, які допоможуть вам стежити за продуктивністю, не проскакуючи обручі, щоб отримати налаштування основних сповіщень. Ось кілька, які, на мою думку, варто перевірити для себе.

1. Sematext.com
2. Datadog.com
3. Uptime.com
4. Smartbear.com
5. Solarwinds.com

Щоб спробувати намалювати більш чітку картину, ось невеликий підручник про те, як налаштувати моніторинг для програми реагування.

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

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