Web page performance

Overview

Now there are more and more web projects. How to measure the performance of Web applications has become a problem that developers or testers have to consider. Traditionally, project logs or LoadRunner tools may be used to monitor web pages to obtain a copy of performance data. From the perspective of the client side, when the browser enters a Web site to access a Web page, factors such as the network status, the speed of the browser rendering page, and the response time of the Web application parsing request, the whole page is displayed in front of the user. As a project developer, we cannot help users decide which browser to use to parse and render pages faster, nor can we determine which network conditions the user can access our web pages from any angle in the world, what we can optimize and constantly improve should be the time for the application to parse the connection request and execute the business logic and generate the response html. This is the so-called web
Page performance.

We mentioned that in the traditional way, we may need to use a variety of tools, but we still cannot accurately obtain the desired time data (after all, performance parameters are calculated in milliseconds or even nanoseconds ). Fortunately, I recently heard that metadata standards based on Web performance have been submitted to W3C and are gradually supported by mainstream browsers. Using browser implementation to record all the web performance data we need can help us analyze the performance of web pages more accurately. For more information, see W3C Performance
Standard: http://www.w3.org/TR/navigation-timing/ for interfaces

Simply put, we can use an excellent open-source Web automation tool such as selenium to inject Javascript into the web pages we need to test and read the performance objects supported by the browser's native, in this way, the time data of all properties records in timing is obtained. For integration with date objects in various languages, the time data is expressed as one millisecond from January 1, in this way, the date object can be directly constructed in most languages. Of course, we need to know a periodic time, and we need to reduce some of the properties to obtain valuable Performance Reference Data in the test.

Demo

According to W3C documents, the browser will have a performance object. Firefox is called performance Performance performance, and Microsoft is called msperformance. It belongs to an attribute on the window object. This performance object has a property called timing. Timing contains all the parameters that we need to measure the web page performance. Includes the following data:

• Fetchstart = 1343141015417,
• Redirectstarted = 1343141014613,
• Domcomplete = 1343141019316,
• Redirectend= 1343141015417,
• Loadeventstarted = 1343141019316,
• Navigationstart = 1343141014612,
• Requeststart = 1343141015418,
• Responseend= 1343141015975,
• Domloading = 1343141015798,
• Dominteractively = 1343141018513,
• Domcontentloadedeventstarted = 1343141018521,
• Domainlookupend= 1343141015417,
• Responsestart = 1343141015798,
• Connectend = 1343141015417,
• Loadeventend= 1343141019317,
• Unloadeventstarting = 1343141015798,
• Connectstart = 1343141015417,
• Domcontentloadedeventend = 1343141018521,
• Unloadeventend = 1343141015799,
• Domainlookupstart = 1343141015417

For example, we need to know how long it takes for the application to parse the request to send a response, so we can use responseend-requeststart to get it. We want to know how long it takes for different types of browsers to render pages, including the JS execution speed, so we can use domcontentloadedeventend
-Responseend. Basically, several tests have proved that the Chrome browser is indeed the fastest, and Firefox is slightly inferior, So Ie will not explain it. I integrated this entire process into a web page automated test code based on selenium2, which is roughly as follows:

        static String script = "var performance = window.performance || window.webkitPerformance || " +"window.mozPerformance || window.msPerformance || {}; " +"var timings = performance.timing || {}; return timings;";public static void main(String[] args) throws WCFException{String url = "http://www.sina.com.cn";driver.manage().window().setSize(new Dimension(1440,1000));driver.get(url);measure();driver.quit();}private static void measure(){StringBuilder timeData = new StringBuilder().append(driver.executeScript(script).toString());timeData.deleteCharAt(0);timeData.deleteCharAt(timeData.length()-1);Map<String, String> timeMap = StringUtils.buildMap(timeData.toString().split(","));//for(String key : timeMap.keySet())//System.out.println(key + "->"+ timeMap.get(key));long start = Long.parseLong(timeMap.get("requestStart"));long end1 = Long.parseLong(timeMap.get("responseEnd"));long end2 = Long.parseLong(timeMap.get("domContentLoadedEventEnd"));System.out.println("Request page cost: "+ (end1 - start) + " ms");System.out.println("Loading page cost: "+ (end2 - end1) + " ms");}

End

The last figure is an excerpt from a foreign website. It clearly lists the time points, W3C design, and the names and meanings of these attributes during the whole web page access process, it is designed for these time points: (the word may be a little small, but you can roughly see what it means)