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

 　　原文：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---收集数据生成报表

　　如今的一些思路：

　　一、须要测试的URL可能比较多，因此每次手动添加刷新不太靠谱，因此须要自动化

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

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

前端性能指标说明

　　一、Dynatrace时间

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

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

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

　　二、页面大小：组成页面的全部资源总大小，图像/css/js的大小也能够单独成为一个指标

　　三、请求数量：从网站下载资源时全部网络请求的总数，尽可能少

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

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

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

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

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

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

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