web前端性能意义、关注重点、测试方案、优化技巧

一、前段性能的意义

对于访问一个网站，最花费时间的并非后端应用程序处理以及数据库等消耗的时间，而是前端花费的时间（包括请求、网络传输、页面加载、渲染等）。根据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.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查询以及资源下载付出昂贵的代价。

 

参考：关于前端的关键性能指标Key Performance Indicators

 

三、前段性能测试

  3.1 DynaTrace AJAX

原本是应该按照测试点列举的，但基本能想到的测试点均可以用DynaTrace AJAX进行检测，就将DynaTrace AJAX做为小标题，也因而可知DynaTrace AJAX的强大。连JQuery的创始者John Resig也极力推荐，并高度赞誉写了篇简单手册Deep Tracing of Internet Explorer

 

DynaTrace AJAX是一个运行在IE浏览器下的免费页面性能分析工具，它能够支持主流的IE六、IE七、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浏览器性能分析工具

 

四、前端性能优化的技巧

图片优化：

http://www.ibm.com/developerworks/cn/java/j-lo-javawebhiperf1/index.html

两篇关于前端性能优化的文章:

Yahoo团队经验：网站性能优化的34条黄金法则

Web应用性能优化黄金法则

dynatrace网上的一些建议：

https://community.dynatrace.com/community/display/PUB/Best+Practices+on+Server-Side+Performance+Optimization

https://community.dynatrace.com/community/display/PUB/Best+Practices+on+JavaScript+and+AJAX+Performance

https://community.dynatrace.com/community/display/PUB/Best+Practices+on+Browser+Caching