前端性能测试入门

原文：

http://www.wangyuxiong.com/archives/51405

      

       性能测试一直是 Web 应用中非常受关注的部分。目前大多数人对性能的关注还主要集中在服务端，大部分人在说到“性能测试”的时候，都会把重点放到服务端的性能测试和调优，也就是通过各种方法找到服务端的性能瓶颈并尝试对其进行调优。但实际上，对于 web 应用来说，除了考虑服务端在足够短的时间内返回页面数据之外，还可以从页面 前端 的角度来考虑性能测试和性能调优。

       目前，前端性能测试的执行工具也有很多，比如YSlow，Page Speed，dynaTrace AJAX Edition，webload等等。这些执行工具都很好使用，并且这些关注的性能点还有些不同，所以就有了将这些工具产生的数据都收集起来的工具，showslow。通过部署和匹配showslow，可以实现将上述工具产生的数据收集并产生不错的报表。

       当然我们可以直接先使用showslow在线的服务，体验一下这种报表的强大。见下面的图:

        

       

现在的一些思路： 
1.    我们需要测试的url可能会比较多，所有每次都手动添加刷新不太靠谱，所有需要做成自动化的，可以使用pwatir，selenium 
2.    安装执行插件：Firebug，YSlow ，pagespeed，dynatrace。 
3.    搭建一个showslow，用于收集数据生成报表，报表如附上的图所示。

附上一些指标以及说明： 
前端性能指标： 
1.    Dynatrace时间： 
      1、首次显示时间（Time to First Impression）：在浏览器地址栏输入URL按回车到用户看到网页的第一个视觉标志为止。 
      2、onLoad事件时间（Time to onLoad Event）：这个时间是直到浏览器触发onLoad事件的时间，当原始文档和所有引用的内容完全下载后才会触发这个事件 
      3、完全载入的时间（Time to Fully Loaded）：等于直到所有onLoad JavaScript 处理程序执行完毕，所有动态的或延迟加载的内容都通过这些处理程序触发的时间

2.    页面大小： 组成页面的所有资源总大小，图像/css/js的大小也可以单独成为一个指标。

3.    请求数量： 从网站下载资源时所有网络请求的总数，尽量少。

4.    网络方面的指标（yslow中的一些指标的意义）： 
      1、DNS时间：托管网站资源的每个域名都会发生一次DNS查找，如果你在多个网页之间移动，当前一个页面已经请求过一次DNS查找后，浏览器不会再对同一个域名请求另一个DNS查找，但通过查看总体DNS时间，可以确定是否存在DNS查找时间问题，有可能牵出DNS配置不当的问题。 
      2、连接时间：根据浏览器和资源的大小不同，浏览器可能会在域名上建立一到多个连接，连接时间就是浏览器与Web服务器建立TCP/IP连接的时间，连接通常会保持打开状态，除非Web服务器命令浏览器关闭连接。当使用SSL建立安全通信时，连接时间也包括SSL握手的时间，连接时间过长有以下原因：到Web服务器的网络连接速度较慢，使用了SSL，不允许浏览器保持连接打开。 
      3、服务器时间：高服务器时间意味着Web/应用程序服务器需要很长的时间处理请求，监视服务器时间对于找出性能瓶颈和应用程序的扩展问题是至关重要的，通过增加Web服务器实现负载均衡，使静态内容的扩展是很容易的，当然也可以购买CDN加速服务来达到同样的目的，但以这种方法实现动态应用程序扩展就行不通了。 
      4、传输时间：这个时间与传输内容的大小，浏览器与服务器之间的连接速度紧密相关，保持低传输时间是确保页面快速载入的关键，可以通过减小总的页面大小，或者通过CDN将内容放在离最终用户较近的地方改善传输时间。 
      5、等待时间：等待时间与相同域名下资源的数量直接相关，受浏览器同一域名物理网络连接数的限制，访问某个资源时可能必须等待另一个连接的释放，减少资源的数量，或将资源分布在多个域名上，可以有效减少等待时间。 
      6、域名的数量: 托管网站资源域名的数量也很重要，因为它会影响DNS，连接和等待时间，要下载的资源使用额外的域名将会直接减少等待时间.