Статьи

API синхронизации навигации: как эффективно профилировать загрузку страниц

Январь 22, 2019

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

Как разработчик, методы сбора данных об этих различных факторах в прошлом были ограничены. Для многих разработчиков объект JavaScript Date уже давно является стандартом для сбора данных о производительности. Например, следующий код измеряет время загрузки, сравнивая временные метки после вызова обработчика события загрузки страницы. 

var start = new Date();

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

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

Cue Navigation Timing API

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

Обнаружение поддержки

В настоящее время API синхронизации навигации поддерживается только в Internet Explorer 9+, Firefox и Chrome. Следовательно, поддержка API должна быть обнаружена перед попыткой его использования. API определяется в объекте окна как «window.performance.timing». Следующая функция определяет, поддерживается ли API. 

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

Записанные события

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

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

Типы навигации

API синхронизации навигации также определяет интерфейс для определения того, как пользователь попал на определенную страницу. Объект «window.performance» также содержит объект «навигация», который содержит два свойства — «тип» и «redirectCount». Свойство «type» предоставляет метод, с помощью которого пользователь перешел на текущую страницу. В следующем списке описаны значения, которые может содержать «type».

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

Свойство «redirectCount» содержит количество перенаправлений на текущую страницу. Если перенаправления не произошли, или если какие-либо из перенаправлений были из другого источника, тогда «redirectCount» равен нулю. В следующем примере показано, как осуществляется доступ к данным навигации. 

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

Осмысление данных

API Navigation Timing полезен для вычисления определенных компонентов времени загрузки страницы. Например, время, необходимое для выполнения поиска DNS, может быть вычислено путем вычитания «хронометража_доменов LookupStart» из «хронометража.доменовЛуксования». В следующем примере вычисляются несколько полезных показателей. «UserTime» соответствует общей задержке загрузки страницы, с которой столкнулся пользователь. Переменные «dns» и «connection» представляют время, необходимое для выполнения поиска DNS и подключения к серверу соответственно. Общее время, необходимое для отправки запроса на сервер и получения ответа, сохраняется в «requestTime». Наконец, общее время завершения выборки документа (включая доступ к любым кэшам и т. Д.) Хранится в «fetchTime». Обратите внимание, что функция setTimeout () вызывается из обработчика события загрузки окна. Это гарантирует, что данные о времени навигации не будут использованы до тех пор, пока не завершится событие загрузки. Если бы к данным синхронизации нужно было обращаться из обработчика события загрузки, значение «синхронизации.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);

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

То, что нужно запомнить

  • Объект JavaScript Date не может точно измерить данные о загрузке страницы, поскольку он не знает о запросе до запуска в браузере.
  • API Navigation Timing встроен непосредственно в браузер и обеспечивает более подробные измерения синхронизации.
  • API также отслеживает, как пользователи переходят на страницу.
  • Данные о времени навигации могут быть отправлены на серверы для анализа.

35
Share: