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

第一篇：HTTPserver

因tomcat处理静态资源的速度比較慢，所以首先想到的就是把全部静态资源(JS,CSS,image,swf)

提到单独的server，用更加高速的HTTPserver，这里选择了nginx了，nginx相比apache，更加轻量级，

配置更加简单，并且nginx不不过高性能的HTTPserver，还是高性能的反向代理server。

眼下非常多大型站点都使用了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:

./configure

--without-http_rewrite_module

--with-http_ssl_module

--with-openssl=../../lib/openssl-0.9.8l

--with-zlib=../../lib/zlib-1.2.3

--with-pcre=../../lib/pcre-8.00

--prefix=/usr/local/nginx

make

make install

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;

# 开启server读取文件的缓存。

open_file_cache max=200 inactive=2h;

open_file_cache_valid 3h;

open_file_cache_errors off;

charset utf-8;

# 推断假设是图片或swf。client缓存5天

location ~* ^.+.(ico|gif|bmp|jpg|jpeg|png|swf)$ {

root   /usr/local/resource/;

access_log off;

index  index.html index.htm;

expires 5d;

}

# 因JS,CSS修改比較频繁。client缓存8小时

location ~* ^.+.(js|css)$ {

root   /usr/local/resource/;

access_log off;

index  index.html index.htm;

expires 8h;

}

# 其它静态资源

location / {

root   /usr/local/resource;

access_log off;

expires 8h;

}

}

3、nginx 反向代理设置

# 反向代理服务，绑定域名www.abc.com

server {

listen       80;

server_name  www.abc.com;

charset utf-8;

# BBS使用Discuz!

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

# 使用proxy_pass_header 和 proxy_set_header 把有须要的http头部信息转发给后台server

location ^~ /bbs/ {

root   html;

access_log off;

index index.php;

# 转发host的信息，假设不设置host,在后台使用request.getServerName()取到的域名不是www.abc.com。而是127.0.0.1

proxy_set_header Host $host;

# 因Discuz! 为了安全，须要获取clientUser-Agent来推断每次POST数据是否跟第一次请求来自同1个浏览器，

# 假设不转发User-Agent,Discuz! 提交数据就会报"您的请求来路不对，无法提交"的错误

proxy_pass_header User-Agent;

proxy_pass http://127.0.0.1:8081;

}

# 其它请求转发给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/



PS：假设安装提示GCC not found。执行以下命令安装就能够(apt-get install build-essential)，仅限debian