Navigation Timing API

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

Многие разработчики, долгое время пользовались объектом JavaScript Date для сбора данных о производительности. Этот код измеряет время загрузки путем сравнения метки каждый раз когда событие загрузки страницы будет вызвано обработчиком.



var start = new Date();
window.addEventListener("load", function() {
  var elapsed = (new Date()).getTime() - start.getTime();
}, false);


Есть несколько проблем с этим подходом. Во-первых, время загрузки JavaScript является изначально недостоверное. Во-вторых, использование объекта Date увеличивает код сайта. В-третьих, с объектом Date можно измерить время выполнения только после того, как код начинает выполняется в браузере. Объект Date не может показать какие-либо данные, о процессе загрузке страницы с сервера, сети и т.д.

Navigation Timing API

С целью обеспечения на и более точные данных о загрузке страницы, группа W3C предложила Navigation Timing API (API навигация времени). API показывает более подробную информацию о времени на протяжении всего процесса загрузки страницы. В отличие от объекта Date , Navigation Timing API (API навигация времени) измеряет время потраченное на поиск DNS, TCP, страница пере-направления (редиректа), время потраченное DOM, и многие другие показатели. И самое главное что Navigation Timing API, непосредственно встроен в браузер.

Navigation Timing API в настоящее время работает только в Internet Explorer 9 +, Firefox, и Chrome смотрим здесь . Убедитесь что вы в нужном браузере, прежде чем пытаться использовать Navigation Timing API. API определен в окне объекта как window.performance.timing . Эта функция определяет, поддерживается ли API.



function supportsNavigationTiming() {
  return !!(window.performance && window.performance.timing);
}


События

Navigation Timing API записывает время, когда происходят многочисленные этапы событий в процессе загрузки страницы. Каждое из этих событий хранится как свойство объекта window.performance.timing . Ниже приведен список событий. Если данное событие не происходит (например, страницы перенаправлена), то его значение равно нулю. Mozilla утверждает, что события происходят в таком порядке .

  • navigationStart — время, сразу после завершения запроса браузера для выгрузки предыдущего документа. Если нет предыдущего документа, то navigationStart равно fetchStart (см. следующий пункт). Это начало время загрузки страницы для пользователя.
  • f etchStart — время, непосредственно перед тем как браузер начинает поиск URL. Процесс поиска включает в себя проверку приложений кэша, или запроса файла с сервера, если он не кэшируется.
  • domainLookupStart — значение равно времени непосредственно перед DNS поиск URL. Если не требуется поиска DNS, то значение такое же, как и fetchStart .
  • d omainLookupEnd — время, сразу после просмотра DNS. Если поиск DNS не требуется, то значение такое же, как и fetchStart .
  • connectStart — время непосредственно перед тем как браузер подключается к серверу. Это значение равно domainLookupEnd , если URL сохранён в кэше или на локальном ресурсе.
  • c onnectEnd — Как только соединение с сервером установлено, рассчитывается время connectEnd . Если URL сохранен в кэше или на локальном ресурсе, то это значение такое же, как и domainLookupEnd .
  • secureConnectionStart — Если HTTPS использует протокол: secureConnectionStart установлен на время начинается безопасное соединение. Если браузер не поддерживает HTTPS, это значение должно быть определено.
  • requestStart — время, как раз перед тем как браузер посылает запрос на URL. API не определяет значение requestEnd .
  • redirectStart — начало времени получения URL, который также может инициировать пере-направления.
  • redirectEnd - Если существует пере-направление redirectEnd представляет собой время после последнего байта последнего полученного ответа redirect.
  • responseStart — время сразу после того как браузер получит первый байт ответа.
  • responseEnd — время, сразу после того, как браузер получает последний байта ответа.
  • unloadEventStart — время, перед предыдущим документом события unload . Если нет предыдущего документа, или если предыдущий документ из другого источника, то это значение равно нулю.
  • unloadEventEnd — время, сразу после предыдущего документа события unload . Если нет предыдущего документа, или, если предыдущий документ из другого источника, то это значение равно нулю. Если есть пере-направления, которые указывают на другой источник, то unloadEventStart и unloadEventEnd равны нулю.
  • domLoading — время перед document.readyState имеет значение loading .
  • domInteractive — время перед document.readyState имеет значение interactive .
  • domContentLoadedEventStart — время, непосредственно перед событием DOMContentLoaded .
  • domContentLoadedEventEnd — время, сразу после события DOMContentLoaded .
  • domComplete — время, непосредственно перед document.readyState имеет значение complete .
  • loadEventStart — время перед событием окна загрузки. Если событие еще не открылось, всё равно, это значение равно нулю.
  • loadEventEnd — Это время, сразу после открытия событий загрузки окна. Если событие не открыто, или все еще работает, то значение равно нулю.

Виды навигации

Navigation Timing API также имеет интерфейс для определения того, где пользователь остановился на конкретной странице. Window.performance объект также содержит объект navigation , который имеет два свойства — type и redirectCount . С помощью метода type определяется что пользователь делает на текущей странице. Следующий список описывает свойства метода type .

  • Если пользователь переходит на страницу, из адресной строки, нажав на ссылку, через баннер, или через скрипт, то значение type равна нулю.
  • Если пользователь перезагружает или обновляет страницу, то type равно единице.
  • Если пользователь переходит на страницу через историю (кнопками назад или вперед ), то type равен двум.
  • Для любых других действий, type равен 255.

Свойство RedirectCount имеет номер принятия пере-направления на текущей странице. Если пере-направление не произошло, или если какие-либо пере-направления были из разных мест, то redirectCount — нулевой. Следующий пример показывает доступ, к навигационным данным.



var navigation = window.performance.navigation;
var navType = navigation.type;
var redirectCount = navigation.redirectCount;


Navigation Timing API можно использовать для расчета времени отдельных компонентов загрузки страницы. Например, время, необходимое для выполнения поиска DNS можно рассчитать путем вычитания timing.domainLookupStart от timing.domainLookupEnd . В следующем примере вычисляется несколько полезных показателей. UserTime равен общей задержки загрузки страницы для пользователя. “DNS” и “connect” переменные требуют время, чтобы выполнить поиск DNS и подключиться к серверу. Общее время, необходимое для отправки запроса на сервер и получить ответ хранящийся в requestTime . Чтобы завершить подсчет общего времени для получения документа (в том числе доступа к любому кэшу и т.д.) хранящийся в fetchTime . Обратите внимание, что функция setTimeout() вызывается из окна нагрузки обработчика событий. Это гарантирует, что навигация синхронизации данных используется не только после загрузки. Если данные времени должны быть доступны начиная от загрузки, обработчик события timing.loadEventEnd будет нулевым.



window.addEventListener("load", function() {
  setTimeout(function() {
    var timing = window.performance.timing;
    var userTime = timing.loadEventEnd - timing.navigationStart;
    var dns = timing.domainLookupEnd - timing.domainLookupStart;
    var connection = timing.connectEnd - timing.connectStart;
    var requestTime = timing.responseEnd - timing.requestStart;
    var fetchTime = timing.responseEnd - timing.fetchStart;
    // use timing data
  }, 0);
}, false);


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

Преимущества Navigation Timing API

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

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

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

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