探讨web前端性能分析

1、web前端性能----原理：

即是web用户在访问一个页面时所要花费的时间总和。即一个完全意义上的用户响应时间，相对于服务器的响应时间而言还会包括更多的内容和影响因素。那么一个web页面的完整请求包括了哪些部分的时间总和就是web前端性能分析和优化所需要了解的基础知识，先了解一下用户从浏览器访问一个url后到页面完全展示所有内容的整个过程吧。
页面的请求过程：
=======================================开始分界线=============================================
1、浏览器的url请求
2、递归寻找DNS服务器
3、连接目标IP并建立TCP连接
4、向目标服务器发送http请求
5、web服务器接收请求后处理
6、web服务器返回相应的结果【无效、重定向、正确页面等】
7、浏览器接收返回的http内容
====================================前端解析分割线============================================

8、开始解析html文件，当然是自上而下，先是头部，后是body
9、当解析到头部css外部链接时，同步去下载，如果遇到外部js链接也是下载【不过js链接不建议放在头部，因为耽误页面第一展现时间】
10、接着解析body部分，边解析边开始生成对应的DOM树，同时等待css文件下载

11、一旦css文件下载完毕，那么就同步去用已经生成的DOM节点+CSS去生成渲染树
12、渲染树一旦有结构模型了，接着就会同步去计算渲染树节点的布局位置
13、一旦计算出来渲染的坐标后，又同步去开始渲染
14、10-13步进行过程中如果遇到图片则跳过去渲染下面内容，等待图片下载成功后会返回来在渲染原来图片的位置
15、同14步，如果渲染过程中出现js代码调整DOM树机构的情况，也会再次重新来过，从修改DOM那步开始

16、最终所有节点和资源都会渲染完成
=========================================分析结束分割线==============================================
17、渲染完成后开始page的onload事件
18、整个页面load完成

整个过程中会有很多的分别请求，所以TCP连接会很多，并且每一个用完都会自己关了，除非是keep-live类型的可以请求多次才关闭。

综上所述：
一个页面的请求等于一个或多个url的请求，因此一个页面里包含的外部请求数会影响页面的整体性能【每请求一次就要多占用一次cpu使用、多一次tcp连接】
每个url的请求又包括寻址、连接、请求传输、返回传输、断连的过程；因此每个阶段的外部环境也会影响整体性能【DNS服务器的寻址时间，请求和返回内容时的网络环境】
除了URL请求数量外，每个请求的内容大小也是影响性能的主要因素【文件越大消耗在传输过程中的时间就越长】
请求同样多的资源，并行请求和串行请求速率是不一样的，所以请求的资源要尽量支持同步请求【同步请求不同资源，即请求被发送到不同的资源服务器即可】
依据浏览器的加载、渲染机制，选择合适的HTML内容排版方式【减少反复创建对象实例的次数、充分利用缓存机制】
优先加载用户关注的内容【css加载优于js内容，首屏内容优于非首屏内容】

关注完http请求的过程后，再来关注整个请求过程中关注的几个时间点，通过确定时间点就可以确定影响性能的时间段，就是确定影响性能的因素。根据上面的介绍主要的几个时间点又可以分页面的整体时间点、以及单个url请求过程中的时间点。【基于httpanalyzer工具的指标】

单个url请求的主要时间点：
1、Cache Read：缓存读取时间，或304错误的处理时间 
2、Block：请求等待时间，取决于缓存检查，网络连接等待
3、DNS Lookup：DNS服务器查找时间，取决于dns服务的数量，dns注册的域
4、Connect：tcp连接的总时间，取决于连接类型，ssh，keepalive都会比http长
5、Send first to last：发送请求内容的时间，取决于请求内容大小，及上行的传输速度
6、Wait：等待响应的时间，取决于网络环境的响应，web服务器的处理时间
7、Receive first to last：接收响应内容的时间，取决于响应内容，下行的传输速度，也要考虑服务器的带宽
8、Time to first byte：从请求一直到接收到第一个字符的总时间，等于1+2+3+4+5+6
9、Network：网络消耗时间，等于3+4
10、Begin to end：整个请求的总时间，等于1+2+3+4+5+6+7

单个页面的主要时间点：
1、DOM Ready Time: DOM完成的时间，从接收html到完全转换成dom树所需的时间
2、DOM Ready to Page Load: 页面元素的加载和渲染完成时间，包括html，css，img及其它内容
3、Page Load Time: page页onload事件的时间，其实际时间等于总时间 - （DOM ready + 元素渲染时间）
4、URL Requests Begin to End:url请求所消耗的所有时间，从发送请求发起到接收最后一个字节断开
5、Network Time:消耗在网络上的时间，即tcp的连接时间
6、Begin to End:所有消耗的时间，包括请求结束后的渲染时间

 2、Web前端性能分析--工具篇

在线网站类：

WebPageTest
说明：
在线的站点性能评测网站，地址http://www.webpagetest.org/
补充：
其实这网站也是个开源项目，所以支持自己搭建一个内部的测试站点

ShowSlow
说明：
showslow是yslow的数据收集与展示平台http://www.showslow.com/，它是一个开源的php项目，可以用来与firefox的yslow插件、page speed插件或者dynatrace通信，收集插件或程序所发送过来的信息并集中展示。只需要在dynatrace安装目录下进行一些设置，即可自动实现上传结果到showslow平台作为存档、分析及监控。 

浏览器插件类： 
FireBug
这个不用说了，它可以对页面进行调试，可以记录所有网页的访问耗时，下载的资源等。

Page Speed
说明：
基于firebug的web页面优化的评测工具，同时还有支持chrome的插件，因为是google产的。
使用：
直接打开FF的firebug或chrome的开发人员工具，切换到page speed标签，浏览一个网页然后点击分析即可，分析完成后会针对规则打出一个成绩，并告诉你哪些规则你没有符合。
其评分规则27条规则：
https://developers.google.com/speed/docs/best-practices/rules_intro 
对几个网站的分析结果如下：
Google.cn  99分
Baidu.com  98分
360buy.com  98分
Taobao.com  89分
Dangdang.com  83分
补充：
其实这个更像是代码的白盒测试分析工具，因为其都是根据一定的规范来检测网页的优化程度，而不是实际的去监听和过滤页面访问所花费的时间。当然一个网页的加载时间和很多因素有关；比如网速，比如页面上的内容，不同的网站加载时间肯定是不一样的，这个就每一个用一个规则来确定一个怎么的网站应该要多长的加载时间了，因此这只是一个最佳实践规则和建议的检测工具；还有一点就是如果想看页面访问时间的细节，firebug和chrome的开发人员工具本身就已经有了。

Speed Tracer
说明：
基于chrome的插件，同样是有google产的，这个是web前端页的性能记录和分析工具，同时还提供一个规则和建议的评测。
使用：
https://developers.google.com/web-toolkit/speedtracer/get-started 
补充：
这个工具收集的东西主要是资源或事件消耗的时间，它会实时的记录某个页面的加载过程，并且一直跟踪所有的事件；在易用性方面数据可以到出来，还有可以根据时间轴来分析具体某端的性能规则和建议。

Yslow
说明：
基于firebug的评测分析工具，yahoo产；和page speed类似工具，会给出页面的评分和优化说规则，同时会提供页面下载资源的统计分析功能，还提供了一些小工具，如js运行检测，图片的优化工具，未符合规则的资源有哪些等等。总的来说是page speed的增强版。
Yslow优化建议23条规则：
http://developer.yahoo.com/performance/rules.html 
各网站的评分：
Google.cn 67分
Baidu.com 94分
360buy.com 77分
Taobao.com 70分
Dangdang.com 71分

独立程序类：
DynaTrace Ajax Edition
说明：
基于IE，firefox的插件，对于FF需要版本支持，需要独立安装文件（50多M）。其可支持到函数级的度量分析，此外其它工具能支持的功能这个工具都支持的。
DynaTrace优化建议规则：
http://community.dynatrace.com/ext/ajax/PUB/Best+Practices+on+Web+Site+Performance+Optimization 

Fiddler
说明：
Microsoft的一款web调试工具，它会记录所有本地的http通信。同时支持ie插件版

HttpAnalyzer
说明：
和fiddler原理一样的工具，不过功能比fiddler更加易用。同时支持ie，ff插件版，此外独立版程序提供http调试功能，写基于http通信的程序使用这个调试比较不错，之前写接口测试工具时就用的这个调试的。

HttpWatch：
说明：
以前这个和httpanalyzer都用过，后来就只用后者了；今天突然发现放弃它的原因是它只支持插件版的，即只能在浏览器上使用，而且只能抓对应浏览器的http通信，且不支持http通信的调试；不过现在发现了一个比httpanalyzer好的就是它的页面加载用时的统计功能，是可以统计一个页面总用时什么的，所以这个工具更适合用于站点的页面性能分析。

总结：
这些个工具里有些类似，有些用处各不相同，有些事专门的web前端性能评测工具，有些并不是为了web前端性能而做的工具。总的来说就是要结合实际情况，综合这些个工具来用，需要分析什么情况就用什么工具。如果是通常意义上的web前端性能测试的话，可以选择一个固定的方案，比如：DynaTrace + showslow，前者获取非常丰富的数据，后者则在服务端专门展示这些数据，即方便使用又方便存储。如果要支持持续测试的话，可以写自动化的脚本来跑具体的页面，每次新版本都执行一次自动化测试即可。

3、web前端性能分析--实践篇

dynatrace安装与使用
1、下载并安装dynatrace ajax edition
2、从开始--》程序就可以打开该工具
3、启动IE后默认状态是没有连接到dynatrace
4、点击ie上dynatrace插件的最左边的连接
5、连接成功后会自动刷新当前url页
6、此时刷新dynatrace工具界面上的browser节点
7、载入测试数据成功后就能看到数据分析图表

showslow站点的安装
showslow是一个开源的php项目，主要用来展示多个测试工具的性能数据，比如yslow等。它有一个线上版的，也支持你下一个源码在自己的公司搭建一个本地版showslow。所以这里我们会搭建一个自己私人的showslow站点。
1、下载showslow，并解压到一个本地目录
2、下载搭建showslow站点的其他支撑程序，如web服务器、php、mysql等
3、下载apache2.2,，nginx也可以，其它的支持php执行的web服务器都行【但是配置可能有点麻烦】
4、下载php程序，最好是5.3的，而且是线程安全的版本【不然有些模块没有，而且安装时选择apache 2.2 x-modle，以及安装扩展插件】
5、下载mysql5.5及以上的，这个默认安装的选项就可以了

配置各支持程序：

官方说明链接：http://www.showslow.org/Installation_and_configuration

 

apche配置：
1、先测试一下默认的安装后是否可以工作
2、修改httpd.conf配置文件
3、去掉以下3个模块加载的注释符号: mod_deflate, mod_rewrite and mod_expires
4、添加一行模块加载语句LoadModule php5_module "x:/.../php/php5apache2_2.dll"
5、添加以下2种web的请求类型页:【在<IfModule mime_module>标签之间】
AddType application/x-httpd-php .php
AddType application/x-httpd-php .phtml
6、在文档最下方添加一行php配置文件的目录：PHPIniDir "x:/.../php"
7、修改DocumentRoot的路径为你解压showslow的目录【记住是有两处，还有一个在<Directory >标签处】
8、为DirectoryIndex添加一个默认的php浏览文件：形如：DirectoryIndex index.php
9、浏览以下index.php页，如果显示了php源码文件内容，则上述配置没有什么大问题

php配置：
1、打开php安装目录中的配置文件php.ini
2、取消以下2个扩展模块的注释符号：php_mysql.dll，php_mysqli.dll

mysql配置：
1、测试mysql是否安装正确
2、给showslow创建数据库

[sql] view plaincopy

1. $ mysql -u root -p  

2. mysql> create database showslow;  

3. mysql> grant usage on showslow.* to showslowuser@localhost identified by '... database-password ...';  

4. mysql> grant all privileges on showslow.* to showslowuser@localhost;  

5. mysql> quit    

3、修改showslow解压目录下的config.sample.php文件名为config.php
4、修改该文件的数据库连接信息，按照上面创建的数据库名，用户名，密码即可
5、给showslow创建表结构，通过运行showslow解压主目录下的dbupgrade.php和users子目录下dbupgrade.php文件【如果是在linux下可以在主目录运行make命令即可】

ok，现在所有的配置都已经完成了，可以再次访问我们配置的网址，是不是已经可以正常访问了。

集成dynatrace和showslow：
2个程序单独的都已经安装完成就可以合作使用了，其实集成就是在dynatrace主程序界面，或者叫代理界面中进行一个上传操作即可。
1、点击查看之前录制的性能数据的概要页面
2、在右边上方窗口中选择一个url地址
3、右键之，选择上传至showslow.com

不过点过之后应该没有起到作用，因为还需要在dynatrace的配置文件添加一些配置：
1、打开dynatrace的配置文件dtajax.ini，在安装目录
2、添加如下配置行
-Dcom.dynatrace.diagnostics.ajax.beacon.uploadurl=http://www.showslow.com/beacon/dynatrace
-Dcom.dynatrace.diagnostics.ajax.beacon.portalurl=http://www.showslow.com/
第一行为上传的位置，即数据传输到哪；其实是指向了一个php文件，这个文件用来接收发送过去的json字符串，并存储在showslow的数据库中
第二行为手动上传后提示你打开showslow页面查看数据分析时的url地址
3、现在再去上传一次，然后去showslow首页刷新一次

集成到自动化测试的环境中：

 

让dynatrace自动上传数据：

其实dynatrace没有任何的外部标准接口可以被自动化所调用，但是却提供了一些简单的可配置的选项，比如可以在dtajax.ini文件中配置自动上传，
具体为添加如下行即可：

-Dcom.dynatrace.diagnostics.ajax.beacon.autoupload=true

 

让自动化测试执行时自动捕获网页浏览数据：
还有一个可以配置dynatrace的地方就是环境变量，因为当浏览器安装了dynatrace的插件后，每次启动插件都会去检查特定的环境变量，若其值等于特定的配置则会
作为初始化为插件的参数；而其中就有环境变量支持作为工具的开关功能，在运行自动化测试时可以通过控制这些环境变量的值就可以间接的控制dynatrace了。
因版本不同会有不同的环境变量名，具体可以看一下这里。https://apmcommunity.compuware.com/community/display/AJAXFORUM/Automation+with+dynaTrace+AJAX+Edition
其中3.x的环境变量如下：
DT_AE_AGENTACTIVE=true
DT_AE_AGENTNAME="any string name"
这样你启动的每一个浏览器实例都会默认打开dynatrace的代理功能，所以整个自动化的测试过程中的所有页面访问数据都会被收集，同时在你测试完成关闭浏览器之后会
自动发送所有数据到指定的showslow上面，测试结束后还可以发送邮件给相关人员去showslow上直接查看即可。