HTML5 Zone is brought to you in partnership with:

An avid reader and a big time comics fan. A software engineer by profession who loves writing code and make things work. Yashwant is a DZone MVB and is not an employee of DZone and has posted 3 posts at DZone. You can read more from them at their website. View Full User Profile

Using JavaScript with ADF to Capture Page Load Time : Navigation Timing API

03.26.2014
| 4572 views |
  • submit to reddit

Performance Improvement is an integral part of any application and all of us need to do that at some point of time. Before improving performance, we need to find the possible causes of performance bottlenecks. There are different ways of analyzing application behavior. We use tools like JFR, HAR Profiling, DB Trace, APPS Trace and many more to analyze java applications. All these tools are efficient and solve different purpose but sometimes we need very minimal setup to get the page load time and request response time. Java Script Navigation Timing API can help in this situation.

Using Java Script with ADF to Capture Page Load Time

Using JavaScript with ADF to Capture Page Load Time Navigation Timing Api

Earlier Java Script date object was used to calculate page timings but that approach has cetain issues as it doesn’t consider server and network timings. W3C has come up with Navigation Timing API which shows detailed timing information.

Java Script Code For Approach 1

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

Java Script Code For Approach 2 (With Navigation Timing API)

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");
}

Approach 1 is not used anymore. We will use Navigation Timing API which provides following details

  • navigationStart This represents the time immediately after the browser finishes prompting to unload the previous document. If there is no previous document, then “navigationStart” is equal to “fetchStart” (see next item). This is the beginning of the page load time as perceived by the user.
  • fetchStart “fetchStart” represents the time immediately before the browser begins searching for the URL. The search process involves checking application caches, or requesting the file from the server if it is not cached.
  • domainLookupStart The “domainLookupStart” value corresponds to the time immediately before the DNS lookup for the URL occurs. If no DNS lookup is required, then the value is the same as “fetchStart”.
  • domainLookupEnd This value represents the time immediately after the DNS lookup occurs. If a DNS lookup is not required, then the value is the same as “fetchStart”.
  • connectStart This denotes the time immediately before the browser connects to the server. This value is equal to “domainLookupEnd” if the URL is a cached or local resource.
  • connectEnd Once the connection to the server is established, the “connectEnd” time is set. If the URL is a cached or local resource, then this value is the same as “domainLookupEnd”.
  • secureConnectionStart If the HTTPS protocol is used, “secureConnectionStart” is set to the time immediately before the secure handshake begins. If the browser does not support HTTPS, this value should be undefined.
  • requestStart “requestStart” represents the time just before the browser sends the request for the URL. The API does not define a “requestEnd” value.
  • redirectStart “redirectStart” represents the start time of a URL fetch that initiates a redirect.
  • redirectEnd If any redirects exist, “redirectEnd” represents the time after the last byte of the last redirect response is received.
  • responseStart This corresponds to the time immediately after the browser receives the first byte of the response.
  • responseEnd This represents the time immediately after the browser receives the last byte of the response.
  • unloadEventStart This represents the time immediately before the previous document’s “unload” event is fired. If there is no previous document, or if the previous document is from a different origin, then this value is zero.
  • unloadEventEnd This represents the time immediately after the previous document’s “unload” event is fired. If there is no previous document, or if the previous document is from a different origin, then this value is zero. If there are any redirects that point to a different origin, then “unloadEventStart” and “unloadEventEnd” are both zero.
  • domLoading “domLoading” represents the time immediately before the “document.readyState” value is set to “loading”.
  • domInteractive “domInteractive” corresponds to the time immediately before the “document.readyState” value is set to “interactive”.
  • domContentLoadedEventStart This represents the time immediately before the DOMContentLoaded event is fired.
  • domContentLoadedEventEnd This represents the time immediately after the DOMContentLoaded event is fired.
  • domComplete The “domComplete” value represents the time immediately before the “document.readyState” value is set to “complete”.
  • loadEventStart This value represents the time immediately before the window’s load event is fired. If the event hasn’t been fired yet, the value is zero.
  • loadEventEnd This represents the time immediately after the window’s load event is fired. If the event hasn’t been fired, or is still running, then the value is zero.

Java Script Code is all well but how do we incorporate the same in ADF? Its pretty easy and straightforward. We add an af:clientListener and add a java script in af:resource inside af:document.

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

Important point to take care in above code is method name in af:clientListener. I have used alert in my js method, but it could be logged on console and can also be sent to server.

I hope this Navigation Timing API tutorial will be useful for you.


Published at DZone with permission of Yashwant Golecha, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)