Статьи

Использование JavaScript с ADF для захвата времени загрузки страницы: API синхронизации навигации

Апрель 5, 2018

Улучшение производительности является неотъемлемой частью любого приложения, и каждый из нас должен сделать это в какой-то момент времени. Прежде чем повысить производительность, мы должны найти возможные причины узких мест в производительности. Существуют разные способы анализа поведения приложения. Мы используем такие инструменты, как JFR, HAR Profiling, DB Trace, APPS Trace и многие другие для анализа Java-приложений. Все эти инструменты эффективны и решают разные задачи, но иногда нам требуется минимальная настройка, чтобы получить время загрузки страницы и время ответа на запрос. В этом случае может помочь API синхронизации Java Script Navigation.

Использование Java Script с ADF для захвата времени загрузки страницы

Использование JavaScript с ADF для захвата времени загрузки страницы

Ранее объект даты Java Script использовался для вычисления времени страниц, но этот подход имеет определенные проблемы, поскольку он не учитывает время сервера и сети. W3C разработал API синхронизации навигации, который показывает подробную информацию о времени.

Java Script Code для подхода 1

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

Код Java-сценария для подхода 2 (с интерфейсом синхронизации навигации)

function onLoadClient(event) {
var timing = window.performance.timing;
var pageLoadTime = 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;
alert("Greetings from FinTech PSR Team !! \r\n" +
"User-perceived page loading time: " + pageLoadTime + " ms \r\n" +
"Connect Time : " + connection + " ms \r\n" +
"DNS Time : " + dns + " ms \r\n" +
"Request Time : " + requestTime + " ms \r\n" +
"Fetch Time : " + fetchTime + " ms \r\n");
}

Подход 1 больше не используется. Мы будем использовать API синхронизации навигации, который предоставляет следующие детали

  • 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» будет установлено на «загрузка».
  • domInteractive «domInteractive» соответствует времени непосредственно перед тем, как значение «document.readyState» будет установлено в «интерактивный».
  • domContentLoadedEventStart Это представляет время непосредственно перед тем, как событие DOMContentLoaded запущено.
  • domContentLoadedEventEnd Представляет время сразу после возникновения события DOMContentLoaded.
  • domComplete Значение «domComplete» представляет время непосредственно перед тем, как для значения «document.readyState» установлено значение «complete».
  • loadEventStart Это значение представляет время непосредственно перед тем, как событие загрузки окна будет запущено . Если событие еще не было запущено, значение равно нулю.
  • loadEventEnd Это представляет время сразу после того, как событие загрузки окна запущено . Если событие не было запущено или все еще выполняется, значение равно нулю.

Код Java Script все хорошо, но как мы можем включить то же самое в ADF? Это довольно легко и просто. Мы добавляем af: clientListener и добавляем java-скрипт в af: resource внутри af: document .

function onLoadClient(event) {
/* function code comes here */
}

В вышеприведенном коде важно позаботиться о названии метода в af: clientListener . Я использовал оповещение в своем методе js, но оно может быть зарегистрировано на консоли, а также отправлено на сервер.

Надеюсь, этот
урок API навигации по времени будет вам полезен.

36
Share: