Navigation Timing API

Navigation Timing API предоставляет данные, которые могут быть использованы для измерения производительности веб-сайта. В отличие от других механизмов на основе JavaScript, которые были использованы с той же целью, этот API может предоставить полную и точную информацию о задержке в получении данных. 

Следующий пример демонстрирует как можно измерить время загрузки страницы с точки зрения пользователя:

function onLoad() { 
  var now = new Date().getTime();
  var page_load_time = now - performance.timing.navigationStart;
  console.log("User-perceived page loading time: " + page_load_time);
}

Есть много событий, измеренных в миллисекундах, которые могут быть доступны через PerformanceTiming интерфейс. Список событий в хронологическом порядке:

• navigationStart
• unloadEventStart
• unloadEventEnd
• redirectStart
• redirectEnd
• fetchStart
• domainLookupStart
• domainLookupEnd
• connectStart
• connectEnd
• secureConnectionStart
• requestStart
• responseStart
• responseEnd
• domLoading
• domInteractive
• domContentLoadedEventStart
• domContentLoadedEventEnd
• domComplete
• loadEventStart
• loadEventEnd

Объект window.performance.navigation хранит два атрибута, которые могут быть использованы, для оперделения была ли страница загружена в последствии перенаправления, использования навигации по страницам в браузере или обычной загрузки по ссылке.

window.performance.navigation.type:

window.performance.navigation.redirectCount отображает количество переадресаций до последней страницы, если они происходили.

Navigation Timing API может быть использован для сбора данных о производительности на стороне клиента при отправке ассинхронных запросов на сервер, а также для получения данных, которые нельзя плучить с помощью других средств, таких как время выгрузки предыдущей страницы, время DNS запроса, время полной загрузки страницы.

Примеры

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

var perfData = window.performance.timing; 
var pageLoadTime = perfData.loadEventEnd - perfData.navigationStart;

Вычисление времени выполнения запроса:

var connectTime = perfData.responseEnd - perfData.requestStart;

Ссылки

• https://www.w3.org/TR/navigation-timing/

Совместимость с браузерами