Wednesday, May 08, 2013

WebApp-Collecting Page load time Statistics in Browser

window.performance.timing is a new DOM Object introduced by most of the new version of Browsers such as IE 8+, Safari 5+, Firefox 3.6+ & Chrome.

Here is a sample Code snippet which can be used in ADF JSPX/JSFF pages through a JavaScript function.



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"></meta>
    <title>PageLoadStatsTestPage</title>
    <script  language="javascript">
        function processTiming()
        {
        var navTimeAvailable, performanceTiming;
        navTimeAvailable = window.performance || window.msPerformance || window.webkitPerformance || window.mozPerformance;
        if(navTimeAvailable && navTimeAvailable.timing && navTimeAvailable.navigation) {
            performanceTiming = window.performance.timing;
                        connectEnd = performanceTiming.connectEnd;
                        connectStart = performanceTiming.connectStart;
                        domComplete = performanceTiming.domComplete;
                        domContentLoadedEventEnd = performanceTiming.domContentLoadedEventStart;
                        domContentLoadedEventStart = performanceTiming.domContentLoadedEventStart;
                        domInteractive = performanceTiming.domInteractive;
                        domLoading  =   performanceTiming.domLoading;
                        domainLookupEnd =   performanceTiming.domainLookupEnd;
                        domainLookupStart   =   performanceTiming.domainLookupStart;
                        fetchStart  =   performanceTiming.fetchStart;
                        loadEventEnd    =   performanceTiming.unloadEventEnd;
                        loadEventStart  =   performanceTiming.unloadEventStart;
                        navigationStart =   performanceTiming.navigationStart;
                        redirectEnd =   performanceTiming.redirectEnd;
                        redirectStart   =   performanceTiming.redirectStart;
                        requestStart    =  performanceTiming.requestStart;
                        responseEnd =   performanceTiming.responseEnd;
                        responseStart   =   performanceTiming.responseStart;
                        secureConnectionStart   =   performanceTiming.secureConnectionStart;
                        unloadEventEnd  =   performanceTiming.unloadEventEnd;
                        unloadEventStart    =   performanceTiming.unloadEventStart;
                }

            var timeStats = "connectEnd="+connectEnd+"\n"+"connectStart="+connectStart+"\n"+"domComplete="+domComplete+"\n"+"domContentLoadedEventEnd="+domContentLoadedEventEnd+"\n"+
                            "domContentLoadedEventStart="+domContentLoadedEventStart+"\n"+"domInteractive="+domInteractive+"\n"+"domLoading="+domLoading+"\n"+"domainLookupEnd="+domainLookupEnd+"\n"+
                            "domainLookupStart="+domainLookupStart+"\n"+"fetchStart="+fetchStart+"\n"+"loadEventEnd="+loadEventEnd+"\n"+"loadEventStart="+loadEventStart+"\n"+
                            "navigationStart="+navigationStart+"\n"+"redirectEnd="+redirectEnd+"\n"+"redirectStart="+redirectStart+"\n"+"requestStart="+requestStart+"\n"+
                            "responseEnd="+responseEnd+"\n"+"responseStart="+responseStart+"\n"+"secureConnectionStart="+secureConnectionStart+"\n"+"unloadEventEnd="+unloadEventEnd+"\n"+
                            "unloadEventStart="+unloadEventStart+"\n"+
                            "";
            alert(timeStats);
        }
    </script>
  </head>
  <body onload="processTiming();"></body>
</html>