yjiang's cake

WEB性能测试工具主要分为三种，一种是测试页面资源加载速度的，一种是测试页面加载完毕后页面呈现、JS操作速度的，还有一种是总体上对页面进行评价分析，下面分别对这些工具进行介绍，如果谁有更好的工具也请一起分享下。

　　Firebug:

Firebug 是firefox中最为经典的开发工具，可以监控请求头，响应头，显示资源加载瀑布图：

HttpWatch  :

httpwatch 功能类似firebug，可以监控请求头，响应头，显示资源加载瀑布图。但是httpwatch还能显示GZIP压缩信息，DNS查询，TCP链接信息，个人在监控http请求比较喜欢使用httpwatch，httpwatch包含IE和firefox插件。不过httpwatch专业版本是收费的，免费版本有些功能限制。

　　DynaTrace's Ajax Edition：

dynaTrace 是本人常使用的1个免费工具，该工具不但可以检测资源加载瀑布图，而且还能监控页面呈现时间，CPU花销，JS分析和执行时间，CSS解析时间的等。

Speed Tracer:

speed trace 是google chrome的1个插件，speed trace的优势点是用于监控JS的解析执行时间，还可以监控页面的重绘、回流，这个还是很强的(dynaTrace也能有这个功能)。   注：安装这个插件，需要安装 Google Chrome Developer Channel 版本，但是这个链接的地址在国内好像打不开，如果打不开，请大家直接到这个地址去下载：

http://www.google.com/chrome/eula.html?extra=devchannel

Page Speed :

Page speed 是基于firebug的1个工具，主要可以对页面进行评分，总分100分，而且会显示对各项的改进意见，Page Speed也能检测到JS的解析时间。

yslow :

yslow跟pge speed一样是基于 firefox\firebug的插件，功能与page speed类似，对各种影响网站性能的因素进行评分，yslow是yahoo的工具，本人也一直在使用，推荐一下。

webpagetest : 

webpagetest 是1个在线进行性能测试的网站，在该网站输入你的url，就会生成1个url加载的时间瀑布图，对所有加载的资源(css,js,image等等)列出优化的清单，也是非常好用的工具。

新产品为了效果，做的比较炫，用了很多的图片和JS，所以前端的性能是很大的问题，分篇记录前端性能优化的一些小经验。

第一篇：HTTP服务器

因tomcat处理静态资源的速度比较慢，所以首先想到的就是把所有静态资源(JS,CSS,image,swf)提到单独的服务器，用更加快速的HTTP服务器，这里选择了nginx 了，nginx相比apache，更加轻量级，配置更加简单，而且nginx不仅仅是高性能的HTTP服务器，还是高性能的反向代理服务器。

目前很多大型网站都使用了nginx,新浪、网易、QQ等都使用了nginx，说明nginx的稳定性和性能还是非常不错的。

1. nginx 安装(linux)

http://nginx.org/en/download.html 下载最新稳定版本

根据自己需要的功能先下载对应模板，这里下载了下面几个模块：

openssl-0.9.8l，zlib-1.2.3，pcre-8.00

编译安装nginx:

2、nginx处理静态资源的配置

#启动GZIP压缩CSS和JS

gzip  on;

# 压缩级别 1-9,默认是1，级别越高压缩率越大，当然压缩时间也就越长

gzip_comp_level 4;

# 压缩类型

gzip_types text/css application/x-javascript;

# 定义静态资源访问的服务，对应的域名:res.abc.com
server {

listen       80;

server_name  res.abc.com;

# 开启服务器读取文件的缓存，

# 判断如果是图片或swf，客户端缓存5天

# 因JS,CSS改动比较频繁，客户端缓存8小时

# 其他静态资源

3、nginx 反向代理设置

# 反向代理服务，绑定域名www.abc.com
server { listen 80; server_name www.abc.com; charset utf-8; }
# BBS使用Discuz!

# 因反向代理为了提高性能，一部分http头部信息不会转发给后台的服务器，

# 使用proxy_pass_header 和 proxy_set_header 把有需要的http头部信息转发给后台服务器
location ^~ /bbs/ { root html; access_log off; index index.php; } /code> # 转发host的信息，如果不设置host,在后台使用request.getServerName()取到的域名不是www.abc.com，而是 127.0.0.1 proxy_set_header Host $host; # 因Discuz! 为了安全，需要获取客户端User-Agent来判断每次POST数据是否跟第一次请求来自同1个浏览器， # 如果不转发User-Agent,Discuz! 提交数据就会报"您的请求来路不正确，无法提交"的错误

# 其他请求转发给tomcat
location / { root html; access_log off; index index.jsp; proxy_pass http://127.0.0.1:8080; }
error_page 500 502 503 504 /50x.html;location = /50x.html { root html; } }
nginx详细配置参考：http://wiki.nginx.org/