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 для удобства.
Сообщить об опечатке
Текст, который будет отправлен нашим редакторам: