[转]Web前端性能测试及优化技巧

上一篇 / 下一篇  2015-08-25 19:01:06

1、前段性能的意义
  对于访问一个网站,最花费时间的并不是后端应用程序处理以及数据库等消耗的时间,而是前端花费的时间(包括请求、网络传输、页面加载、渲染等)。根据web优化的黄金法则:
  80%的最终用户响应时间花在前端程序上,而其大部分时间则花在各种页面元素,如图像、样式表、脚本和Flash等,的下载上。减少页面元素将会减少HTTP请求次数。这是快速显示页面的关键所在。
  根据著名的“2-5-8原则”,用户访问一个页面:
  当用户能够在2秒以内得到响应时,会感觉系统的响应很快;
  当用户在2-5秒之间得到响应时,会感觉系统的响应速度还可以;
  当用户在5-8秒以内得到响应时,会感觉系统的响应速度很慢,但是还可以接受;
  而当用户在超过8秒后仍然无法得到响应时,会感觉系统糟透了,或者认为系统已经失去响应,而选择离开这个Web站点,或者发起第二次请求。
  对于一个网站如果希望抓住用户,网站的速度以及稳定性是首当其冲的。目前性能已经被列入google的网站的排名规则中。
  相关文章Web Performance Optimization (WPO) – As Business Critical as SEO
  2、前端性能关注的重点
  2.1 加载时间指标,主要包括三个时间断
  a. Time to First Impression
  表示从用户在浏览器键入url按下回车键一刻开始到页面开始有反应(用户可以在页面中看见一点点内容)为止。经常能感觉到的一个信号就是网页开始显示title。
  b.Time to onLoad Event
  表示从页面开始显示内容,到浏览器开始触发OnLoad函数这一时间段。只有当初始的文本和所引用的对象加载完成,浏览器才开始触发OnLoad函数
  c.Time to Fully Loaded
  表示从上一时间段末到整个网页完全加载完成(所有OnLoad函数以及相关的动态资源加载完成)。在网页中含有timeout或定时刷新之类处理时较为难判断结束点。
  2.2 资源情况指标
  网页由初始的html文本中嵌入图片以及通过XHR或者修改dom树动态加载的内容组成,css负责样式,js负责行为。所以当网页资源过多为了下载资源,客户端和服务器的网络来回就更多。下面是资源方面相关的指标。
  a. Total Number of Requests
  包括html网页请求,css、js资源下载及其它网络请求。优化的目标之一是要尽量减少请求数。
  b. Total Number of HTTP 300s/400s/500s
  表示返回状态为300(重定向)、400(客户端错误)、500(服务器端错误)的http请求。尽量避免这些请求,以提高页面load的时间。造成这些状态的原因经常是服务器的实施、配置和部署问题。
  c. Total Size of Web Site
  构成网页元素总的大小。图片或者js库的增加都会对下载时间造成重要的影响。
  d. Total Size of Images/CSS/JS
  image、css、js在网页元素大小中占主要比例。
  e. Total Number of XHR(XMLHttpRequest) Requests
  通过js异步从服务器端获得数据的请求数。一些js框架提供了跟服务器端的更新机器,就是XHR请求。通过配置可以减少XHR请求的数目
  2.3 网络连接指标
  浏览器底层的网络连接对资源的下载速度有很大影响。资源的下载过程分为很多阶段。下面介绍这些阶段以及浏览器、网络、请求如何影响这些阶段的时间
  a. DNS Time
  dns 查询的时间。网页请求会产生一次寻找该网页资源所在主机的dns查询。在同个域名进行网页切换不会造成新的dns查询。
  b. Connect Time
  指浏览器和服务器之间建立tcp/ip连接的时间,对于ssl连接包括握手的时间。网络连接过慢、使用ssl、使用短连接而非常连接都是造成connect time较多的原因。
  c. Server Time
  指收到请求后服务器逻辑处理的时间,
  d. Transfer Time
  这一指标与浏览器和服务器之间的连接速度相一致,通过减小传输内容或使用cdn来降低Transfer Time。
  e. Wait Time
  等待时间和同一个域中服务资源的数量直接相关。每个域的浏览器的物理网络的限制,导致资源等待可用的连接。减少资源的数量,或将资源散布在不同的域,能将这一时间降低。平均等待时间的大小更能反映等待时间是否需要注意。
  f. Number of Domains / Single Resource Domains
  部署网站资源的域主机数量是很重要的,因为它影响的DNS,连接和等待时间。
  专门用户资源下载的域是必要的,他将直接减少等待时间。应避免单一的资源域,否则你将为dns查询以及资源下载付出昂贵的代价。
3、前段性能测试
  3.1 DynaTrace AJAX
  本来是应该按照测试点列举的,但基本能想到的测试点都可以用DynaTrace AJAX进行检测,就将DynaTrace AJAX作为小标题,也由此可见DynaTrace AJAX的强大。连JQuery的创始者John Resig也极力推荐,并高度赞誉写了篇简单手册Deep Tracing of Internet Explorer
  DynaTrace AJAX是一个运行在IE浏览器下的免费页面性能分析工具,它可以支持主流的IE6、IE7、IE8浏览器。
  关于DynaTrace的排名
  dynaTrace AJAX also calculates Ranks for Browser Caching, Network Resources, JavaScript/AJAX and Server-Side Activities.
  The overall rank is calculated by weighting in 10% on each of these Sub Ranks. The overall rank therefore is calculated by taking 60% of the rank based on the KPI's and 10% each from Caching, Network, JavaScript. and Server-Side.
  dynaTrace中文基础篇
  A Step-by-Step Guide to dynaTrace Ajax Edition
  Deep Tracing of Internet Explorer
  DynaTrace Ajax Edition:IE浏览器性能分析工具
  4、前端性能优化的技巧
  图片优化:
  http://www.ibm.com/developerworks/cn/java/j-lo-javawebhiperf1/index.html
  两篇关于前端性能优化的文章:
  Yahoo团队经验:网站性能优化的34条黄金法则
  Web应用性能优化黄金法则

TAG: 技巧

 

评分:0

我来说两句

Open Toolbar