Web Page Performance

Overview

现下Web项目越来越多，如何衡量Web应用的性能，也成了开发或者测试人员不得不着重考虑的问题。传统方式下可能会使用项目日志，或者LoadRunner等工具对Web页面进行监测以得到一份能反应性能的数据。仅从客户端角度来看，当浏览器输入一个网址访问一个Web页面时，网络状况、浏览器渲染页面的速度、Web应用本身解析Request回复Response等因素和时间，共同组成了整个页面呈现在用户面前的时间。作为项目开发人员，我们无法帮用户决定使用哪一种浏览器能更快的解析和渲染页面，我们也不能决定用户从世界上的哪一个角度以何种网络状况访问我们的Web页面，我们能优化和不断改进的应该是Application本身对于连接请求解析执行业务逻辑并且生成回复的HTML的时间。这就是本文所谓的Web Page Performance。

我们提到了传统方式下，我们可能需要借助各种工具，但依然不能很精确的拿到我们想要的时间数据（毕竟性能参数都是以毫秒甚至纳秒来计算）。好在最近听说基于Web性能的元数据标准已经提交到W3C并且被主流浏览器逐渐都支持起来了。通过浏览器的实现来记录所有我们需要的Web性能数据，能够帮助我们更加准确的分析Web页面的性能。详情请见W3C关于Performance Interface的标准：http://www.w3.org/TR/navigation-timing/

简单来说我们可以利用Selenium这样的开源优秀的Web自动化工具，来向我们需要测试的Web页面注入一段Javascript，读取浏览器原生支持的Performance对象，进而取到Timing中的所有properties记录的时间数据，出于与各种语言的Date对象集成，这些时间数据都会是以1970/1/1日起到现在的一个毫秒数，这样可以在大多数语言中直接构造Date对象。当然我们需要知道一个周期性的时间，就需要把其中的一些properties想减得到测试中有价值的性能参考数据。

Demo

根据W3C的文档，浏览器原生会带有一个performance对象，火狐的话叫mozPerformance，微软的叫msPerformance，它属于window对象上的一个属性。这个performance对象带有一个叫timing属性，timing包含了我们所需要衡量Web页面性能的所有参数。包括以下数据：

• fetchStart=1343141015417, 
• redirectStart=1343141014613, 
• domComplete=1343141019316, 
• redirectEnd=1343141015417, 
• loadEventStart=1343141019316, 
• navigationStart=1343141014612, 
• requestStart=1343141015418, 
• responseEnd=1343141015975, 
• domLoading=1343141015798, 
• domInteractive=1343141018513, 
• domContentLoadedEventStart=1343141018521, 
• domainLookupEnd=1343141015417, 
• responseStart=1343141015798, 
• connectEnd=1343141015417, 
• loadEventEnd=1343141019317, 
• unloadEventStart=1343141015798, 
• connectStart=1343141015417, 
• domContentLoadedEventEnd=1343141018521, 
• unloadEventEnd=1343141015799, 
• domainLookupStart=1343141015417

例如我们要知道Application解析request发出response用了多久就可以用responseEnd-requestStart得到。我们想知道不同种类的浏览器在渲染页面这方面花了多久，包括Js的执行速度等，就可以用domContentLoadedEventEnd - responseEnd得到。基本上从我的几次测试可以证实Chrome浏览器确实是最快的，Firefox稍逊一筹，IE就不解释了。我把这整个个过程集成到一段基于Selenium2的Web页面自动化测试代码中，大致如下：

        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

最后附上一张图，摘自国外的网站，清晰的列出来访问Web页面的整个过程中，有哪些时间点，W3C的设计和这些属性的命名以及含义，正是针对这些时间点来设计的：（可能字有点小，不过大致能看清楚是什么意思）