Тестирование производительности с помощью User Timing API

Тестирование производительности с помощью User Timing API

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

Я разбирался в разных способах тестирования 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, тем более что это функция для разработчиков, которая не будет видна пользователям. Ну и если нужно, всегда есть полифил.

Источник: http://csskarma.com/

Редакция: Команда webformyself.

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Практика оптимизации сайта: ускорение загрузки Вашего сайта в разы

Узнайте как ускорить загрузку сайта .

Научиться

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree