Тестування продуктивності з допомогою User Timing API

338

Від автора: продуктивність – перше, з чим стикається користувач на сайті. У багатьох випадках неважливо, наскільки крутий потік на сайті і інформаційна архітектура. Якщо сайт не завантажується, користувачі йдуть з нього. Саме тому хороший бюджет на продуктивність і дані по тестуванню так важливі для створення гарного кінцевого досвіду для користувачів (для одержання прибутку).

Я розбирався в різних способах тестування front-end продуктивності програми і натрапив на User Timing API, яке входить в Performance Interface. Тоді я ще не знав нічого про цих інструментах, і я вирішив поділитися своїми знаннями в цій статті.

User Timing API

The User Timing API дозволяє створювати іменовані тимчасові мітки для певної програми на часовій шкалі продуктивності. В API є два типи міток: мітки та вимірювання. Мітки представляють собою точки на шкалі в додатку, а вимірювання – проміжні точки між мітками. Всі мітки і вимірювання після виконання зберігаються, тобто до них можна повернутися в будь-який час під час роботи програми (так додаток не сповільнюється при додаванні додаткових тимчасових міток).

Мітки

Самий стандартний тест на час, який можна запустити, включає в себе дві позначки (початок і кінець), а також час, необхідний на перехід від першої мітки до другої. Нижче показаний приклад, як використовувати дві мітки і повернути час:

// Задаємо першу мітку
performance.mark(“initialize”);
/* Сам код тут */
performance.mark(“complete”);
measurePerformance();
// Функція виведення даних про продуктивність
function measurePerformance() {
var entries = performance.getEntries();
var entryCount = entries.length
var i;
for ( i = 0; i < entryCount; i++ ) {
console.log( “Name:” + entries.name +
“Entry Type:” + entries.entryType +
“Start Time:” + entries.startTime +
“Duration:” + entries.duration + “\n”);
} // кінець циклу
} // кінець measurePerformance()

У прикладі вище, задається початкова і кінцева мітка, а також виконується якийсь код між ними, після чого повертається інформація. Приємне доповнення до додатка, якщо ви намагаєтеся зафіксувати час ajax викликів або методу з високим рівнем обробки (наприклад, дуже інтенсивний цикл).

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

Вимірювання

Вимірювання – проміжна точка між двох міток. Створюється вона майже так само, але метод приймає три аргументи:

performance.measure( “measureName”, “startMarkName”, “endMarkName” );

measureName можна назвати як завгодно (рядок), startMarkName і endMarkName – мітки, між якими ставиться вимір. Для отримання вимірювання можна використовувати метод getEntriesByType(), який зберігається в об’єкті performance. Метод повертає масив даних:

performance.getEntriesByType(“measure”);

чи можна отримати безпосередньо на ім’я:

performance.getEntriesByName(“measureName”);

Мітки та вимірювання дають вам гарне уявлення про продуктивність вашого додатка. Їх навіть можна чіпляти до популярних подій типу domComplete. Відмінне доповнення в набір інструментів будь-якого технаря. Я сам ще перебуваю на ранніх етапах тестування меж API, і у мене ще немає всіх відповідей на свої питання. Але я як божевільний з нетерпінням хочу зрозуміти, як цей інструмент може поліпшити UX на сайті.

Підтримка

Підтримка у User Timing API дивно хороша. Таблиця caniuse каже, що API дружить з IE10+, але не з Safari. Я вважаю, що при відповідній підтримці/тестуванні можливостей 100% потрібно використовувати це API, тим більше що це функція для розробників, яка не буде видно користувачам. Ну і якщо потрібно, завжди є полифил.