User Timing в HTML5

В HTML5 есть удобное средство профилирования клиентский событий – User Timing API. Это набор Javascript функций, с помощью которых можно определять события и время, которое проходит между ними.

High Resolution Time

API работает со специальным форматом времени High Resolution Time. Этот формат позволяет отслеживать время до долей микросекунд. Функция now() позволяет вывести время, которое прошло с момента события “navigationStart” (время начала загрузки документа):

console.log(window.performance.now());

Профилирование

Для профилирования событий User Timing API предоставляет две функции:

• mark отмечает точки во времени
• measure фиксирует длительность между двумя отметками mark

mark()

Функция mark позволяет отмечать временные точки и связывать их с названием:
window.performance.mark('событие началось');
## Отмечаем начало какого-то события

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

$.post('/post', function() {

window.performance.mark('событие закончилось');

# ...

});

measure()

Функция measure покажет время, которое прошло между двумя отмеченным событиями:

window.performance.measure('длительность AJAX запроса', 'событие началось', 'событие закончилось');

Получение данных

После того, как Вы добавили необходимые отметки и измерения, Вы можете получить сохраненную информацию:
var marks = window.performance.getEntriesByType('mark');

console.log(marks);

## Выведет в консоль все отметки

Консоль покажет нам:

[
{
    duration: 0
    entryType: "mark"
    name: "событие началось"
    startTime: 131154.89599993452
    __proto__: PerformanceMark
}
,
{
    duration: 0
    entryType: "mark"
    name: "событие закончилось"
    startTime: 135179.0579999797
    __proto__: PerformanceMark
}
]

Чтобы вывести все измерения:
var measures = window.performance.getEntriesByType('measure');

console.log(measures);

## Выведет в консоль все измерения между отметками

В этом случае в консоли увидим:

{
    duration: 3351.0539999697357
    entryType: "measure"
    name: "длительность AJAX запроса"
    startTime: 47443.45400005113
    __proto__: PerformanceMeasure
}

Стандартные события

Вы можете использовать стандартные события (отметки) в измерениях, которые определены всегда:

navigationStart

Начало загрузки документа.

unloadEventStart

Время перед событием unload предыдущего документа.

unloadEventEnd

Время окончания события unload предыдущего документа.

redirectStart

Время начала первого перенаправления страницы, если используется редирект.

redirectEnd

Время получения последнего байта последнего редиректа, если он есть.

fetchStart

Время начала получения ресурса (либо начало проверки клиентского кеша).

domainLookupStart

Время начала поиска домена.

domainLookupEnd

Время окончания поиска домена.

connectStart

Время начала установки соединения для получения документа.

connectEnd

Время окончания установки соединения для получения документа.

secureConnectionStart

Время начала процедуры handshake при безопасном соединении.

requestStart

Время начала отправки запроса на сервер.

responseEnd

Время окончания получения документа (время сразу после получения последнего байта).

domLoading

Время установки статуса DOM в “loading”.

domInteractive

Время установки статуса DOM в “interactive”.

domContentLoadedEventStart

Время запуска Javascript события “DOMContentLoaded”.

domContentLoadedEventEnd

Время окончания Javascript события “DOMContentLoaded”.

domComplete

Время установки статуса DOM в “complete”.
[ad]

loadEventStart

Время начала Javascript события “load”.

loadEventEnd

Время окончания Javascript события “load”.

Пример стандартных событий

Определим время, которое прошло с начала поиска домена и до окончания загрузки страницы:
window.performance.measure('DNS to complete', 'domainLookupStart', 'loadEventEnd');

console.log(window.performance.getEntriesByName('DNS to complete')[0]);

Пример профилирования

Для примера проведем профилирование запроса на VK API:
window.performance.mark('VK getProfiles start');

VK.Api.call('getProfiles', {uids: 1}, function(r) {

window.performance.mark('VK getProfiles finish');

window.performance.measure('VK getProfiles length', 'VK getProfiles start', 'VK getProfiles finish');

console.log('VK getProfiles duration:' + window.performance.getEntriesByName('VK getProfiles length')[0].duration);

# ...

});

## Тут мы выводим длительность запроса к API сразу после его завершения

Готовый код для использования на сайте

Чтобы постоянно не делать кучу одинаковых вызовов, воспользуйтесь таким компонентом:
var ut_tracker = {

start: function(name)

{

window.performance.mark(name + ' start');

},

end: function(name)

{

window.performance.mark(name + ' end');

},

measure: function(name)

{

window.performance.measure(name + ' measure', name + ' start', name + ' end');

return window.performance.getEntriesByName(name + ' measure')[0];

}

}

Пример с VK выглядел бы так:
**ut_tracker.start('VK getProfiles');**

VK.Api.call('getProfiles', {uids: 1}, function(r) {

**ut_tracker.end('VK getProfiles');**

console.log('VK getProfiles duration:' + **ut_tracker.measure('VK getProfiles').duration**);

# ...

});

Самое важное

User Timing API в HTML5 – простой инструмент для профилирования клиентских событий с большой точностью. Используйте компонент ut_tracker для удобства.