性能学习-了解前端性能测试

 　　原文：http://www.wangyuxiong.com/archives/51405

　　 原文：http://www.cnblogs.com/fnng/archive/2012/07/11/2587196.html

　　性能测试一直是Web应用中非常受关注的部分，目前大多数人对于性能测试还主要集中在服务器端，重点都会放在服务器端的性能测试与调优，但实际上，除了考虑服务端在足够短的时间内返回页面数据之外，还可以从页面前端考虑。

     从用户的感受来看，虽然传输速度受用户带宽的限制。但我们可以通过很多技术来使用户想要看到的页面更快的显示

　  Web应用的基础是超文本传输协议（HTTP）和超文本标记语言（HTML），HTTP协议本身是一种面向非连接的协议，HTML语言则是一种用于制作超文本文档资料的简单标记语言。

　　对于一个页面而言，“请求”与“返回数据”都可能多次发生，由于HTTP对浏览器下载资源并发请求数量、Cache等方面都进行定义和限制，以及浏览器对于HTML的处理过程所以说，用户所以感受的响应时间中的相当大的一部分并不完全取决于应用的后台处理所需要的时间

　　前端性能测试的执行工具有 YSlow,Page Speed ,dyna Trace AJAX Edition,webload,这些关注的性能点有所不同，所有有了将这些工具产生的数据收集起来的工具----showslow---收集数据生成报表

　　现在的一些思路：

　　1、需要测试的URL可能比较多，所以每次手动添加刷新不太靠谱，所以需要自动化

　　2、安装执行插件：FireBug,YSlow,pagespeed,dynatrace

　　3、搭建一个showslow，用于收集数据生成报表

前端性能指标说明

　　1、Dynatrace时间

　　　　①首次显示时间（Time to First Impression）：在浏览器地址栏输入URL按回车到用户看到网页的第一视觉标志为止

　　　　②onLoad事件时间（Time to onLoad Event）：这个时间是知道浏览器触发onload事件的时间，当初始文档和所有引用的内容完全下载后才会触发这个时间

　　　　③完全载入时间（Time to Fully Loaded）：等于知道所有的onLoad JavaScript处理程序执行完毕，所有动态的或延迟加载的内容都通过这些处理程序触发的时间

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

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

　　4、网络方面的指标（yslow中的一些指标的意义）

　　　　①DNS时间：托管网站资源的每个域名都会发生一次DNS查找，如果你在多个网页之间移动，当前一个页面已经请求过一次DNS查找后，浏览器不会再对同一个域名请求另一个DNS查找，但通过查看总体DNS时间，可以确定是否存在DNS查找时间问题，有可能牵出DNS配置不当的问题

　　　　②连接时间：根据浏览器和资源的大小不同，浏览器可能会在域名上建立一到多个连接，连接时间就是浏览器与Web服务器建立TCP/IP连接的时间，连接通常会保持打开状态，除非Web服务器命令浏览器关闭连接。当使用SSL建立安全通信时，连接时间也包括SSL握手时间，连接时间过长有以下原因：到Web服务器的网络链接速度较慢，使用了SSl，不允许浏览器保持连接打开

　　　　③服务器时间：高服务器时间意味着Web/应用程序服务器需要很长的时间请求处理，监视服务器时间对于找出性能瓶颈和应用程序的扩展问题是至关重要的，通过增加Web服务器实现负载均衡，使静态内容的扩展是很容易的，当然也可以购买CDN加速服务来达到同样的目的，但以这种方法实现动态应用程序扩展就行不通

　　　　④传输时间：这个时间与传输内容的大小、浏览器与服务器之间的链接速度紧密相关，保持低传输时间是确保页面快速载入的关键，可以通过减小总的页面大小，或者通过CDN将内容挡在离最终用户较近的地方改善传输时间

　　　　⑤等待时间：等待时间与相同域名下资源的数量直接相关，受浏览器同一域名物理网络链接数的限制，访问某个资源时可能必须等待另一个连接的释放，减少资源的数量，或将资源分布在多个域名商，可以有效较少等待时间　

　　　　⑥域名的数量：托管网站资源域名的数量也很重要，因为它会影响DNS，连接和等待时间，要下载的资源使用额外的域名将会直接减少等待时间