От автора: производительность – первое, с чем сталкивается пользователь на сайте. Во многих случаях неважно, насколько крутой поток на сайте и информационная архитектура. Если сайт не загружается, пользователи уходят с него. Именно поэтому хороший бюджет на производительность и данные по тестированию так важны для создания хорошего конечного опыта для пользователей (и для получения прибыли).
Я разбирался в разных способах тестирования front-end производительности приложения и наткнулся на User Timing API, которое входит в Performance Interface. Тогда я еще не знал ничего об этих инструментах, и я решил поделиться моими знаниями в этой статье.
User Timing API
The User Timing API позволяет создавать именованные временные метки для определенного приложения на временной шкале производительности. В API есть два типа меток: метки и измерения. Метки представляют собой точки на временной шкале в приложении, а измерения – промежуточные точки между метками. Все метки и измерения после выполнения сохраняются, т.е. к ним можно вернуться в любое время во время работы приложения (так приложение не замедляется при добавлении дополнительных временных меток).
Метки
Самый стандартный тест на время, который можно запустить, включает в себя две метки (начало и конец), а также время, необходимое на переход от первой метки ко второй. Ниже показан пример, как использовать две метки и вернуть время:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
// Задаем первую метку 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[i].name + " Entry Type: " + entries[i].entryType + " Start Time: " + entries[i].startTime + " Duration: " + entries[i].duration + "\n"); } // конец цикла } // конец measurePerformance() |
В примере выше задается начальная и конечная метка, а также выполняется какой-то код между ними, после чего возвращается информация. Приятное дополнение к приложению, если вы пытаетесь зафиксировать время ajax вызовов или метода с высоким уровнем обработки (например, очень интенсивный цикл).
Такие данные вы, скорее всего, пользователю не покажете, однако для вас это хороший способ обнаружить узкие места в приложении.
Измерения
Измерение – промежуточная точка между двух меток. Создается она почти так же, но метод принимает три аргумента:
|
1 |
performance.measure( "measureName", "startMarkName", "endMarkName" ); |
measureName можно назвать как угодно (строка), startMarkName и endMarkName – метки, между которых ставится измерение. Для получения измерения можно использовать метод getEntriesByType(), который хранится в объекте performance. Метод вернет массив данных:
|
1 |
performance.getEntriesByType("measure"); |
или можно получить напрямую по имени:
|
1 |
performance.getEntriesByName("measureName"); |
Метки и измерения дают вам хорошее представление о производительности вашего приложения. Их даже можно цеплять к популярным событиям типа domComplete. Отличное дополнение в набор инструментов любого технаря. Я сам еще нахожусь на ранних этапах тестирования пределов API, и у меня еще нет всех ответов на свои вопросы. Но я как сумасшедший с нетерпением хочу понять, как этот инструмент может улучшить UX на сайте.
Поддержка
Поддержка у User Timing API удивительно хорошая. Таблица на caniuse говорит, что API дружит с IE10+, но не с Safari. Я считаю, что при соответствующей поддержке/тестировании возможностей 100% нужно использовать это API, тем более что это функция для разработчиков, которая не будет видна пользователям. Ну и если нужно, всегда есть полифил.
Источник: //csskarma.com/
Редакция: Команда webformyself.
