Measuring and optimizing the client-side performance is essential for a seamless user experience, and this is critical for web 2.0 applications using AJAX.
Capturing vital information, such as the time taken for page load, rendering of the elements, and the JavaScript code execution, helps in identifying the areas where performance is slow, and optimizes the overall client-side performance.
Sometimes, third-party controls, images, and media content also cause degradation in the performance. Using Selenium WebDriver and various other tools together, we can measure the performance and eliminate the weaker content.
Navigation Timing is a W3C Standard JavaScript API to measure performance on the Web. The API provides a simple way to get accurate and detailed timing statistics natively for page navigation and load events. It is available on Internet Explorer 9, Google Chrome, Firefox, and WebKit-based browsers.
The API is accessed via the properties of the timing interface of the window.performance object using JavaScript.
Each performance.timing attribute shows the time of a navigation event when the page was requested or when the page load event was measured in milliseconds since midnight of January 1, 1970 (UTC). A zero value means that an event did not occur.
The order of the performance.timing events is shown in the following diagram from the Navigation Timing draft:
Identify a test where you want to measure the performance as well as decide what performance counters you want to measure.
We need to access the window.performance object using JavascriptExecutor to collect the timing metric; the following code shows an example for this:
// Open the BMI Calculator Mobile Application
driver.get("http:// cookbook.seleniumacademy.com/bmicalculator.html");
JavascriptExecutor js = (JavascriptExecutor) driver;
// Get the Load Event End
long loadEventEnd = (Long) js.executeScript("return window.performance.timing.loadEventEnd;");
// Get the Navigation Event Start
long navigationStart = (Long) js.executeScript("return window.performance.timing.navigationStart;");
// Difference between Load Event End and Navigation Event Start is // Page Load Time
System.out.println("Page Load Time is " + (loadEventEnd - navigationStart)/1000 + " seconds.");As discussed in the previous code, the
window.performance object provides us with the performance metric that is available within the Browser Window object. We need to use JavaScript to retrieve this metric, using the following code:
JavascriptExecutor js = (JavascriptExecutor) driver;
// Get the Load Event End
long loadEventEnd = (Long) js.executeScript("return window.performance.timing.loadEventEnd;");Here, we are collecting the loadEventEnd time and the navigationEventStart time and calculating the difference between them, which will give us the page load time.